Question

我有一个带有参数List的ViewModel。在视图中，用户应该能够从该列表中添加或删除，以使添加或删除的用户反映在该参数的POST中。在JQuery中，单击“添加”按钮后，ajax调用将返回UserModel变量，但是简单的.append不会添加到列表中。

我在此问题上看到的其他问题涉及部分视图，但是这种情况不需要部分视图即可更新UserModel表。似乎应该有一种简单的方法可以做到这一点。有谁知道如何将返回的UserModel添加到JQuery中的列表中，以便将列表与添加的模型一起返回到Post中？

<script>
    $("#bUser").on('click', function () {
            var $addedRecipient = $("#AddedRecipient");
            if ($addedRecipient.val() != null && $addedRecipient.val() != "") {
                $.ajax({
                    type: "GET",
                    url: '@Url.Action("GetFullRecipient", "Message")',
                    data: { CompanyID: $("#CompanyID").val(), Employee: $addedRecipient.val() },
                    success: function (data) {
                        $("#Recipients").append(data);//Not adding to Recipients (Model.List<UserModel>) - is there a simple solution like this?
                        var bRow = $('<tr></tr>'),
                            bCell = $('<td style="display:none"></td>').append(data.UserID);
                        bRow.append(bCell);
                        bCell = $('<td align="center"></td>').append(data.UserFirstName);
                        bRow.append(bCell);
                        bCell = $('<td align="center"></td>').append(data.UserEmail);
                        bRow.append(bCell);
                        bCell = $('<td align="center"><input type="button" class="btn btn-info removeRecipient" value="Remove"></td>');
                        bRow.append(bCell);
                        $("#bTable tbody").append(bRow);//Works with returned data
                        $addedRecipient.val("");
                    },
                    error: function () {
                        alert("Recipient could not be added.");
                    }
                });
            }
        });
</script>

Answer 1

这段代码对我来说是完美的，您只需要遍历此列表，显然您必须放置@model指令和类型列表收件人。

@model List<...Models.Recipient>    
<input type="button" id="btnAdd" class="btn btn-primary" value="Add" 
     onclick="myfunction()"/>

        <script>

        function myfunction() {
            $.ajax({
                type: 'GET',
                contentType:"application/json; charset=utf-8",
                url: '@Url.Action("GetFullRecipient","Message")',
                data: { CompanyID: $("#CompanyID").val(), Employee: 
                $addedRecipient.val()},
                success: function (response) {  

                    $("#containerData").html(response);          
                },
                error: function (result) {
                    alert(result);
                }
            });
        }

    </script>



    <div id="containerData"> 

      <table class="table table-striped table-hover table-bordered">

        <thead>
            <tr>
                <th>Id</th>
                <th>Desc_Prod</th>
                <th>Cantidad</th>



            </tr>
        </thead>
        <tbody>

            @if (Model != null)
            {
                foreach (var item in Model)
                {
                    <tr>
                        <td>@item.UserID</td>
                        <td>@item.UserFirstName</td>
                        <td>@item.UserEmail</td>
                        <td><a class="btn btn-danger" href="@Url.Action("DeleteRow","Message", new {item.UserID})">Delete</a></td>
                    </tr>

                }


            }

        </tbody>
    </table>

    </div>

Answer 2

这里的答案是跟随在freedom-m的评论中的链接。使用for循环遍历Razor表，然后将HiddenFor与模型参数的ID一起使用，并将CheckBoxFor作为模型参数的选择字段，并使用带有唯一名称和值的Submit按钮。单击按钮输入并且该值适合给定的字符串时，请遍历模型并添加一个不存在的用户，或者减去一个不存在的用户，然后返回视图。

 <div class="row">
     <div class="col-lg-12">
         <table class="table table-bordered" id="bTable">
             <thead>
                 <tr>
                     <th style="display:none"></th>
                     <th style="display:none"></th>
                     <th class="text-center">Recipient</th>
                     <th class="text-center">E-mail</th>
                     <th class="text-center">Select</th>
                 </tr>
             </thead>
             <tbody>
                 @if (Model.Recipients.Any())
                 {
                     for (var i = 0; i < Model.Recipients.Count; i++)
                     {
                         <tr>
                             <td style="display:none">@Html.HiddenFor(m => m.Recipients[i].RecipientUserID)</td>
                             <td style="display:none">@Html.HiddenFor(m => m.Recipients[i].RecipientCorporateID)</td>
                             <td align="center">@Model.Recipients[i].RecipientName</td>
                             <td align="center">@Model.Recipients[i].RecipientEmail</td>
                             <td align="center">@Html.CheckBoxFor(m => m.Recipients[i].RemoveRecipient)</td>
                         </tr>
                     }
                 }
             </tbody>
         </table>
     </div>
 </div>

使用JQuery添加到List <model>

2 个答案: