【问题标题】:why the retrived data from json action display as undefined?为什么从 json 操作中检索到的数据显示为未定义?
【发布时间】:2020-10-27 17:15:58
【问题描述】:

这里有人看输出console.log() 和表的结构是对的吗?我认为错误在其中之一。 我正在尝试从数据库中获取所需的数据,我在 loadData() 函数中使用 console.log() 数据和 $.each() 中的 val,当我单击 btn1 或 btnAllUser 时,它会显示所需的数据在控制台中作为 javascript 对象,但结果在表格字段中显示为未定义,如最后的图像中所示。我需要你的帮助,请。 以下是我的控制器、视图、ajax 脚本:

 public JsonResult GetDonatorsWithParameter(int? StateId, string CityName, string blt)
{

    ViewBag.StateId = new SelectList(db.states, "StateId", "StateName");
    ViewBag.CityName = new SelectList(db.cities, "CityId", "CityName");



    return this.Json(new
    {
        result = (from a in db.Donors
                  where (a.StateId == StateId && a.CityName == CityName && a.bloodType == blt)
                  select new { Id = a.Id, Name = a.Name, adress =( a.state.StateName+"-"+ a.CityName), PhoneNumber = a.PhoneNumber, bloodType = a.bloodType,Email=a.Email, conn = a.conn, Tconn = a.Tconn }).ToList()
    }, JsonRequestBehavior.AllowGet);
}

观点是:

 @{
ViewBag.Title = "GetDonators";
Layout = "~/Views/Shared/_Layout.cshtml";

}

 <div class="container" id="con">
<br />
     <div class="form-group row">
         &nbsp;&nbsp;
         الدولة: @Html.DropDownList("StateId", (SelectList)ViewBag.StateId, "اختر الدولة", htmlAttributes: new { @class = "form-control mx-2 col-md-2", id = "State" })
         المدينة:@Html.DropDownList("CityName", new SelectList(string.Empty, "Value", "Text"), htmlAttributes: new { @class = "form-control col-md-2", id = "city" })
         فصيلة الدم:@Html.DropDownList("blt", new SelectList(new[] { "+A", "-A", "+B", "-B", "+AB", "-AB", "+O", "-O" }), "اختر فصيلة الدم", new { @class = "form-control col-md-2 mr-md-3", id = "bt" })
         <input type="submit" value="Search" class="btn btn-info col-md-1 mr-1" id="btn1" />
         <input type="submit" value=" بحث" class="btn btn-info col-md-1" id="btnAllUser" />

     </div>
</div>



<div id="UpdatePanel">

</div>

这是我的 jQuery 脚本:

@section Scripts {
<script type="text/jscript">
$(function () {
    $('#State').change(function () {
        $.getJSON('/Donators/Citylist/' + $('#State').val(), function (obj) {
            var items = '<option>اختر المدينة</option>';
            $.each(obj, function (i, city) {
                items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
            });
            $('#city').html(items);
        });
    });

    // This is for Get All Data
    $("#btnAllUser").click(function () {

        $.ajax({
            url: "@Url.Action("GetAllDonators", "DonorOnlines")",
            data: "",
        type: "GET",
        dataType: "json",
        success: function (data) {
            loadData(data);
        },
        error: function () {
            alert("Failed! Please try again.");
        }
    });

});

// this will use for Get Data based on parameter
$("#btn1").click(function () {
    $.ajax({
        url: "@Url.Action("GetDonatorsWithParameter", "DonorOnlines")",
        data: {
            StateId: $('#State').val(),
            CityName: $('#city').val(),
            blt: $('#bt').val()
        },
    type: "GET",
    dataType: "json",
    success: function (data) {
        loadData(data);
    },
    error: function () {
        alert("Failed! Please try again.");
    }
});
});

    function loadData(data) {
        
    
     // Here we will format & load/show data
    var tab = $('<table class="table"></table>');
    var thead = $('<thead></thead>');
    thead.append('<th>User ID</th>');
    thead.append('<th>User name</th>');
    thead.append('<th>Address</th>');
    thead.append('<th>Phone</th>');
    thead.append('<th>bloodType</th>');
    thead.append('<th>Email</th>');
    thead.append('<th>Connection way</th>');
    thead.append('<th>time</th>');
    console.log(thead);

    tab.append(thead);
    $.each(data, function (i, val) {
        // Append database data here
        var trow = $('<tr></tr>');
        trow.append('<td>' + val.Id + '</td>');
        trow.append('<td>' + val.Name + '</td>');
        trow.append('<td>' + val.adress + '</td>');
        trow.append('<td>' + val.PhoneNumber + '</td>');
        trow.append('<td>' + val.bloodType + '</td>');
        trow.append('<td>' + val.Email + '</td>');
        trow.append('<td>' + val.conn + '</td>');
        trow.append('<td>' + val.Tconn + '</td>');
               console.log(val);
               console.log(trow);
        tab.append(trow);
       
    });
    console.log(tab);
    $("tr:odd", tab).css('background-color', '#C4C4C4');
    $("#UpdatePanel").html(tab);
};


});
</script>

console.log(data) 的输出是

result: Array(9)
0: {Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", …}
1: {Id: 5, Name: "هيثم صلاح محمد", adress: "اليمن-24", PhoneNumber: "735699885", bloodType: "+A", …}
2: {Id: 7, Name: "علي قاسم محمد", adress: "اليمن-24", PhoneNumber: "775636545", bloodType: "A+", …}
3: {Id: 8, Name: "hossam", adress: "اليمن-21", PhoneNumber: "775696855", bloodType: "A-", …}
4: {Id: 9, Name: "ali ahmed ali", adress: "اليمن-21", PhoneNumber: "774455661", bloodType: "O+", …}
5: {Id: 10, Name: "salem saleh", adress: "اليمن-21", PhoneNumber: "774488996", bloodType: "+A", …}
6: {Id: 12, Name: "salah ali", adress: "اليمن-21", PhoneNumber: "715489693", bloodType: "+A", …}
7: {Id: 13, Name: "hospital", adress: "اليمن-22", PhoneNumber: "714693145", bloodType: "+A", …}
8: {Id: 14, Name: "salwa", adress: "اليمن-تعز", PhoneNumber: "714569965", bloodType: "-A", …}

【问题讨论】:

  • 谁能帮帮我

标签: jquery json ajax asp.net-mvc


【解决方案1】:

我测试了您的代码,它运行良好。 检查一下,也许您在代码中添加了其他内容。 loadData 中的 console.log(val) 究竟返回了什么?

var test = [
{Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", Email: "test", conn: "conn", Tconn: "123"},
{Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", Email: "test", conn: "conn", Tconn: "123"},
{Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", Email: "test", conn: "conn", Tconn: "123"},
{Id: 4, Name: "علي عبدالله", adress: "اليمن-22", PhoneNumber: "714885965", bloodType: "B-", Email: "test", conn: "conn", Tconn: "123"}];

loadData(test);

function loadData(data) {
     // Here we will format & load/show data
    var tab = $('<table class="table"></table>');
    var thead = $('<thead></thead>');
    thead.append('<th>User ID</th>');
    thead.append('<th>User name</th>');
    thead.append('<th>Address</th>');
    thead.append('<th>Phone</th>');
    thead.append('<th>bloodType</th>');
    thead.append('<th>Email</th>');
    thead.append('<th>Connection way</th>');
    thead.append('<th>time</th>');

    tab.append(thead);
    $.each(data, function (i, val) {
            console.log(i);
        console.log(val);

        // Append database data here
        var trow = $('<tr></tr>');
        trow.append('<td>' + val.Id + '</td>');
        trow.append('<td>' + val.Name + '</td>');
        trow.append('<td>' + val.adress + '</td>');
        trow.append('<td>' + val.PhoneNumber + '</td>');
        trow.append('<td>' + val.bloodType + '</td>');
        trow.append('<td>' + val.Email + '</td>');
        trow.append('<td>' + val.conn + '</td>');
        trow.append('<td>' + val.Tconn + '</td>');
        tab.append(trow);
       
    });
    $("tr:odd", tab).css('background-color', '#C4C4C4');
    $("#UpdatePanel").html(tab);
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="con">
<br />
     <div class="form-group row">
         &nbsp;&nbsp;
         الدولة: @Html.DropDownList("StateId", (SelectList)ViewBag.StateId, "اختر الدولة", htmlAttributes: new { @class = "form-control mx-2 col-md-2", id = "State" })
         المدينة:@Html.DropDownList("CityName", new SelectList(string.Empty, "Value", "Text"), htmlAttributes: new { @class = "form-control col-md-2", id = "city" })
         فصيلة الدم:@Html.DropDownList("blt", new SelectList(new[] { "+A", "-A", "+B", "-B", "+AB", "-AB", "+O", "-O" }), "اختر فصيلة الدم", new { @class = "form-control col-md-2 mr-md-3", id = "bt" })
         <input type="submit" value="Search" class="btn btn-info col-md-1 mr-1" id="btn1" />
         <input type="submit" value=" بحث" class="btn btn-info col-md-1" id="btnAllUser" />

     </div>
</div>



<div id="UpdatePanel">

</div>

【讨论】:

  • json 动作将数据作为对象数组返回,我正在编辑我的 json 动作
猜你喜欢
  • 1970-01-01
  • 2022-11-19
  • 2018-03-25
  • 1970-01-01
  • 2019-05-23
  • 2021-09-03
  • 2018-05-03
  • 1970-01-01
  • 2018-02-27
相关资源
最近更新 更多