我需要一个关于如何获取MVC Json结果并将其填充到使用Ajax的视图表中的想法,
这是我的json结果
public JsonResult GetAllContacts()
{
var User = GetLoggedInUserID();
var getContact = _contactService.GetUserContacts(User).Select(x => new
{
Id = x.Id,
Name = x.Name,
MobileNumber = x.MobileNumber
});
return Json(getContact, JsonRequestBehavior.AllowGet);
}
请问我该如何存档?
其次,我的表格有复选框,我将能够选择手机号码并将其填充在列表框中
这是我的表格视图
<table class="table table-striped table-hover table-bordered" id="contacts">
<thead>
<tr>
<th><input type="checkbox" name="chooseAllRecipient" id="chooseAllRecipient" /></th>
<th class="center">Contact Name(s)</th>
<th class="center">Mobile Number(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="chooseRecipient" class="my_chkBox"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
这是我的剧本
function GetContact() {
$.ajax({
url: table.data('/Contact/GetAllContacts'),
type: 'GET',
contentType: 'application/json',
data: JSON.stringify(),
cache: false,
context: table,
success: function (contact) {
var tableBody = this.find('tbody');
tableBody.empty();
$.each(contact, function (index, contact) {
$('<tr/>', {
html: $('<td/>', {
html: contact.Name
}).after($('<td/>', {
html: contact.MobileNumber
}))
}).appendTo(tableBody);
});
},
error: function () { alert("error"); }
});
}
$('#getContacts')。click(function(){
GetContact();
});
请我就如何使它与jQuery和AJAX一起工作需要一些帮助,因为我不知道问题出在哪里,请非常感谢。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
您可以尝试以下方法:
public JsonResult GetAllContacts()
{
var user = GetLoggedInUserID();
var contacts = _contactService.GetUserContacts(user).Select(x => new
{
Id = x.Id,
Name = x.Name,
MobileNumber = x.MobileNumber
}).ToList(); // <--- cast to list if GetUserContacts returns an IEnumerable
return Json(contacts, JsonRequestBehavior.AllowGet);
}
在您的视图中,将此JSON数据填充到网格中:
的HTML
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th><input type="checkbox" name="chooseAllRecipient" id="chooseAllRecipient" /></th>
<th class="center">Contact Name(s)</th>
<th class="center">Mobile Number(s)</th>
</tr>
</thead>
<tbody id="contacts"></tbody>
</table>
<button id="add_recipient">Add Selected Recipients</button>
<select id="recipientList"></select>
jQuery的
function GetContact() {
$.ajax({
url: "/Contact/GetAllContacts",
type: "GET",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function (data) {
var row = "";
$.each(data, function(index, item){
row+="<tr><td><input type='checkbox'id='"+item.Id+"' name='chooseRecipient' class='my_chkBox' /></td><td>"+item.Name+"</td><td>"+item.MobileNumber+"</td></tr>";
});
$("#contacts").html(row);
},
error: function (result) {
alert("Error");
}
});
}
$('#getContacts').click(function(){
GetContact();
});
编辑:添加额外的要求,以将移动电话号码从选定的复选框填充到列表框
$("#add_recipient").click(function(e){
e.preventDefault();
$("#contacts input:checkbox:checked").map(function(){
var contact_number = $(this).closest('td').next('td').next('td').text();
var id = $(this).attr('id');
$('#recipientList').append('<option value="'+ id +'">'+ contact_number +'</option>');
}).get();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句