【发布时间】: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">
الدولة: @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