Добавление в список <Model>с использованием JQuery

Question

У меня есть ViewModel с параметром List.В представлении пользователь должен иметь возможность добавлять или удалять из этого списка таким образом, чтобы добавленные или удаленные пользователи отражались в POST для этого параметра.В JQuery после нажатия кнопки «Добавить» вызов ajax возвращает переменную UserModel, но простой .append не добавляет в список.

Другие вопросы, с которыми я сталкивался по этой проблеме, касаютсяЧастичные представления, но эта ситуация обновляет таблицу UserModel без необходимости частичного просмотра.Кажется, должен быть простой способ сделать это.Кто-нибудь знает, как добавить возвращенную UserModel в список в JQuery, чтобы список был возвращен в пост с добавленными моделями?

<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

Ответ здесь последовал по ссылке в комментарии Libern-M.Выполните итерацию по таблице Razor с помощью цикла for, затем используйте HiddenFor с идентификатором параметра модели и CheckBoxFor в качестве поля выбора параметра модели, а также кнопку отправки с уникальным именем и значением.Когда нажата кнопка ввода и значение соответствует заданной строке, переберите модель и добавьте пользователя, которого там нет, или вычтите пользователя, который там есть, и вернитесь в представление.

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

Answer 2

этот код работал отлично для меня, вам просто нужно пройти через этот список, очевидно, вы должны поместить директиву @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>