如何使用 Ajax 获取 MVC Json 结果并填充到表中

Posted 2023-02-22

【中文标题】如何使用 Ajax 获取 MVC Json 结果并填充到表中

【英文标题】：how Get MVC Json Result and populate in a Table using Ajax

【发布时间】：2014-08-15 22:10:59

【问题描述】：

我需要了解如何获取我的 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 的帮助，因为我不知道问题是否出现了，非常感谢你...

【问题讨论】：

您是否发现您使用联系人作为数据参数和联系人作为项目参数？它是相同的名称，它会导致功能混乱。改一下看看能不能解决。

正如@Fals 所说，将contact.Name 和contact.MobileNumber 更改为this.Name 和this.MobileNumber。

另一个问题是table是什么？我假设它是一个变量，但我猜你没有显示所有的 javascript 代码。

【参考方案1】：

您可以尝试以下方法：

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

Working Demo

【讨论】：

非常感谢您...现在我可以完美填充...还有一件事，该表有一个按钮，当这些复选框被选中时，它应该将手机号码放入列表框中.. . 所以请你能在那个小提琴演示中为我完成那个吗，请上帝保佑你，非常感谢你

很高兴它有帮助。也许您可以为此添加一个单独的问题？

<div class="center"><a class="btn btn-success btn-large" data-dismiss="modal" aria-hidden="true" id="addRecipientList">Add To Recipient List</a></div> 这是列表框`@Html.ListBoxFor(model => model.SelectedRecipient, Model.Recipients, new id = "recipientList", style = "width: 250px; height: 160px;", name = "recipientList" ) `

现在一切都很好 请给我你的电子邮件，以便我可以直接联系你 [e-mail]

您的意思是从列表框中删除一个数字吗？您通常需要先选择该选项（或进行多项选择），然后单击另一个按钮以删除该数字。

【参考方案2】：

用这个插件轻松榨出柠檬汁：

https://github.com/jongha/jquery-jsontotable