如何使用Ajax获取MVC Json结果并填充到表中 [英] how Get MVC Json Result and populate in a Table using Ajax

问题描述

我需要知道如何获取我的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   = 通讯录 >  
 <   thead  >  
 <   tr  >  
 <   th  >  <  < span class =code-leadattribute> input     type   = 复选框   名称  =  chooseAllRecipient    id   =  chooseAllRecipient    /  >  <   / th  >  
 <   th     class   =  center > 联系人姓名<   / th  >  
 <   th     class   =  center > 移动电话号码< span class =code-keyword><   / th  >  
 <   / tr  >  
 <   / thead  >  
 
 <   tbody  >  
 <   tr  >  
 <   td  >  <  输入   类型  = 复选框    name   =  chooseRecipient < span class =code-attribute>   class   =  my_chkBox >  <   / td  >  
 <   td  >  <   / td  >  
 <   td  >  <   / td  >  
 <   / tr  >  
 <   / tbody   >  
 <   / table  >  

这是我的剧本

  function  GetContact（）{
 
 $ .ajax（{
 url：table.data（'  / Contact / GetAllContacts'），
类型：'  GET'，
 contentType：'  application / json'，
数据： JSON  .stringify（），
 cache： false ，
 context：table，
 success：功能（联系）{
  var  tableBody = 此 .find （'  tbody'）; 
 tableBody.empty（）; 
 $ .each（联系人，函数（索引，联系人）{
 $（'' < tr />'，{
 html：$（' < td />'，{
 html：contact.Name 
}）。after（$（' < td />'，{
 html：contact.MobileNumber 
}））
} ）.appendTo（tableBody）; 
}）; 
}，
错误： function （）{alert（ 错误）; } 
}）; 
} 
 
 $（' ＃getContacts'）。点击（ function （）{
 
 GetContact（）; 
}）; 

我需要一些关于如何使用jQuery和AJAX的帮助，因为我无法弄清楚问题是来形式请非常感谢...

解决方案

.ajax（{
url：table.data（' / Contact / GetAllContacts'），
类型：' GET'，
contentType：' application / json'，
data： JSON .stringify（），
cache： false ，
context：table，
成功：功能（联系）{
var tableBody = this .find（' TBODY'）;
tableBody.empty（）;

.each（contact， function （index，contact）{

（' < tr />'，{
html：

I need an idea on how I can GET my MVC Json result and populate it inside my view table using Ajax,

this is my json result

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);

    }

Please how can I archieve this?

Secondly My Table has Checkboxs that I will be able to pick the Mobile number and populate them inside a Listbox

this is my table view

<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>

and this is my Script

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();
});

please I need some help on how to get this working with jQuery and AJAX because I can't figure out were the problem is coming form please thank you very mush...

解决方案

.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:

这篇关于如何使用Ajax获取MVC Json结果并填充到表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！