मैं jQuery अजाक्स कॉल के माध्यम से employeeTbl डेटा प्रदर्शित करना चाहता हूं। क्रिया विधि डेटा लोड करती है और एक सरणी में डीबी डेटा से आउटपुट दिखाती है। कृपया jQuery अजाक्स विधि के माध्यम से उचित दृश्य प्राप्त करने में मेरी सहायता करें।

यहाँ मेरा नियंत्रक कोड है:

public JsonResult getData()
{
    List<employee> empList = new List<employee>();
    empList = db.employees.ToList();
    return Json(empList, JsonRequestBehavior.AllowGet);
}

और यह वह दृश्य है जिसका मैं प्रतिपादन कर रहा हूं:

@model IEnumerable<jQueryPoject.Models.employee>
@{
    ViewBag.Title = "Home Page";
}

<!DOCTYPE html>
<html>
<head>

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

     //   $(document).ready(function () {
       //     loadData();
        //});

        // Load Data Function
        function loadData() {
            $.ajax({
                url: "/Home/JsonView",
                type: "GET",
                contentType: "json",
                success: function (result) {
                    var html = '';
                    $.each("#tbody", result, function (key, item) {
                        html += '<tr>';
                        html += '<td>' + item.ID + '</td>';
                        html += '<td>' + item.Name + '</td>';
                        html += '<td>' + item.Age + '</td>';
                        html += '<td>' + item.Salary + '</td>';
                        html += '<td>' + item.Contact + '</td>';
                        html += '<td>' + item.Email + '</td>';
                        html += '</tr>';
                    });
                    $('.tbody').html(html);
                },
                error: function (errormessage) {
                    alert(errormessage.responseText);
                }
            });
        }
    </script>
</head>
<body>
    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>
    <br />
    <br />

    <div class="container">
        <table id="tbl" class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Salary</th>
                    <th>Contact</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
</body>
</html>

और यह परिणाम है जो मुझे मिल रहा है:

    [{"ID":1,"Name":"Sami","Age":"25","Salary":"28000","Contact":"111","Email":"s.rehman@texitech.com"},
    {"ID":2,"Name":"Muhammad Sami ur Rehman","Age":"25","Salary":"38970","Contact":"111","Email":"s.rehman@texitech.com"},
    {"ID":3,"Name":"Bilawal Bhutto","Age":"28","Salary":"18000","Contact":"0213333333","Email":"b.bhutto@gmail.com"},
    {"ID":4,"Name":"Bilawal Bhutto","Age":"28","Salary":"18000","Contact":"0213333333","Email":"b.bhutto@gmail.com"},
    {"ID":5,"Name":"Bilawal Bhutto","Age":"22","Salary":"20000","Contact":"ghfhj","Email":"b.bhutto@gmail.com"},
    {"ID":6,"Name":"Bilawal Bhutto","Age":"22","Salary":"20000","Contact":"03128646765","Email":"b.bhutto@gmail.com"},
    {"ID":7,"Name":"Tehmina Jawed","Age":"22","Salary":"20000","Contact":"02134598989","Email":"tehmina.jawed@gmail.com"},
    {"ID":8,"Name":"Sameer BAloch","Age":"22","Salary":"200000","Contact":"111","Email":"samirehman621@gmail.com"},
    {"ID":9,"Name":"Ali Zaidi","Age":"22","Salary":"18000","Contact":"02134598989","Email":"ali.zaidi@yahoo.com"},
    {"ID":10,"Name":"Bilawal Bhutto","Age":"22","Salary":"20000","Contact":"0213333333","Email":"b.bhutto@gmail.com"},{"ID":11,"Name":"hmgm","Age":"22","Salary":"38970","Contact":"ghfhj","Email":"samirehman621@gmail.com"},
    {"ID":12,"Name":"Tehmina Jawed","Age":"22","Salary":"20000","Contact":"ghfhj","Email":"samirehman621@gmail.com"},
    {"ID":13,"Name":"Bilawal Bhutto","Age":"22","Salary":"20000","Contact":"ghfhj","Email":"b.bhutto@gmail.com"},{"ID":14,"Name":"hmgm","Age":"222","Salary":"20000","Contact":"111","Email":"samirehman621@gmail.com"},
    {"ID":15,"Name":"Bilawal Bhutto","Age":"222","Salary":"20000","Contact":"ghfhj","Email":"m.shariq@gmail.com"},
    {"ID":16,"Name":"Bilawal Bhutto","Age":"22","Salary":"20000","Contact":"0213333333","Email":"b.bhutto@gmail.com"},
    {"ID":17,"Name":"Bilawal Bhutto","Age":"26","Salary":"20000","Contact":"0213333333","Email":"b.bhutto@gmail.com"},
    {"ID":18,"Name":"Bilawal Bhutto","Age":"22","Salary":"18000","Contact":"ghfhj","Email":"asdas@f.com"},
    {"ID":19,"Name":"Muhammad Shariq","Age":"26","Salary":"38970","Contact":"0213333333","Email":"m.shariq@gmail.com"},
    {"ID":20,"Name":"Bilawal Bhutto","Age":"22","Salary":"20000","Contact":"0213333333","Email":"samirehman621@gmail.com"},
   {"ID":21,"Name":"Bilawal Bhutto","Age":"22","Salary":"20000","Contact":"0213333333","Email":"b.bhutto@gmail.com"},
   {"ID":22,"Name":"Bilawal Bhutto","Age":"22","Salary":"18000","Contact":"ghfhj","Email":"samirehman621@gmail.com"}, 

 {"ID":23,"Name":null,"Age":null,"Salary":null,"Contact":null,"Email":null}, 
 {"ID":24,"Name":"Tehmina Jawed","Age":"222","Salary":"20000","Contact":"111","Email":"m.shariq@gmail.com"},
 {"ID":25,"Name":null,"Age":null,"Salary":null,"Contact":null,"Email":null}]
-1
M Sami Ur Rehman 17 सितंबर 2018, 14:34

3 जवाब

सबसे बढ़िया उत्तर

यहाँ मेरे प्रश्न का उत्तर है, youtube पर समाधान मिला।

मेरे विचार की JQuery स्क्रिप्ट:

<script type="text/javascript">
    $(function () {
        $.get("/Home/getData", {}, function (data) {
            var row;
            $.each(data, function (i, v) {
                row += "<tr><td>" + v.ID + "</td><td>" + v.Name + "</td><td>" + v.Age + "</td><td>" + v.Salary + "</td><td>" + v.Contact + "</td><td>" + v.Email + "</td></tr>";
            });
            $("#dataTable").append(row);
        })
    })
    </script>

और नियंत्रक कोड यहाँ है:

 public JsonResult getData()
        {
            DataSet ds = db1.GetAllrecord();
            List<employee> empList = new List<employee>();
            foreach(DataRow dr in ds.Tables[0].Rows)
            {
                empList.Add(new employee
                {
                    ID = Convert.ToInt32(dr["ID"]),
                    Name = dr["Name"].ToString(),
                    Age = dr["Age"].ToString(),
                    Salary = dr["Salary"].ToString(),
                    Contact = dr["Contact"].ToString(),
                    Email = dr["Email"].ToString()
                });
            }



            return Json(empList, JsonRequestBehavior.AllowGet);




        }

और यहाँ मॉडल क्लास फंक्शन है:

 public DataSet GetAllrecord()

        {

            SqlCommand com = new SqlCommand("Select * from  employee", con);
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet ds = new DataSet();
            da.Fill(ds);
            return ds;
        }
0
M Sami Ur Rehman 25 सितंबर 2018, 08:50

वर्ग चयनकर्ता .tbody को tbody में बदलें और इसे काम करना चाहिए, जहां tbody एक तत्व चयनकर्ता है

$(result).each(function (key, item) {
    html += '<tr>';
    html += '<td>' + item.ID + '</td>';
    html += '<td>' + item.Name + '</td>';
    html += '<td>' + item.Age + '</td>';
    html += '<td>' + item.Salary + '</td>';
    html += '<td>' + item.Contact + '</td>';
    html += '<td>' + item.Email + '</td>';
    html += '</tr>';
});

$('tbody').html(html);

dataType जोड़ें, वह प्रकार जो सर्वर से वापस अपेक्षित है

dataType: "json" और contentType: "application/json"

0
mbharanidharan88 17 सितंबर 2018, 15:00

अरे जैसा मैंने किया वैसा ही कोशिश करो।

    // Load Data Function
    function loadData() {
        $.ajax({
            url: "/Home/JsonView",
            type: "GET",
            contentType: "json",
            success: function (result) {
                var html = '';
                var count = Object.keys(result).length;
                for(var i = 0; i< count; i++){
                    html += '<tr>';
                    html += '<td>' + result[i].ID + '</td>';
                    html += '<td>' + result[i].Name + '</td>';
                    html += '<td>' + result[i].Age + '</td>';
                    html += '<td>' + result[i].Salary + '</td>';
                    html += '<td>' + result[i].Contact + '</td>';
                    html += '<td>' + result[i].Email + '</td>';
                    html += '</tr>';
                }
                $('.tbody').html(html);
               // you could try append too
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }

एक जेसन डेटा लूपिंग के लिए।

0
Muhammed Sami 17 सितंबर 2018, 15:01