Как передать динамическую измененную модель в частичное представление?

Question

У меня есть список «рабочих книг», отображаемых в таблице.Каждая книга имеет кнопку «Поделиться» рядом с названием книги.Когда пользователь нажимает кнопку «Поделиться», появляется модальное диалоговое окно с формой.

Форма позволяет пользователю вводить список электронных писем получателя, разделенных запятой, которая проверяется на стороне клиента.

Поскольку диалоговое окно находится в частичном представлении _ShareView.cshtml, которое позволяет мне передать модальное значение WorkbookShareModel, которое имеет некоторые поля, такие как WorkbookId и Title.Цель здесь состоит в том, чтобы передать детали каждой рабочей книги, когда пользователь нажимает кнопку «Поделиться» (т. Е. Построить модальное и передать его уже отрендеренной модели).

Я не уверен, как передать модель в уже отрендеренное представление?

Решение должно быть сделано на клиенте (т.е. не включать действия на сервере, которые возвращают предоставленное частичное представление).параметры переданы).Я хочу избежать ненужных обращений к серверу - у нас есть все данные на клиенте относительно рабочей книги, и мне нужно сделать POST, когда пользователь вводит в список электронных писем.

Это мой index.cshtml:

@section BodyFill
{
<div id="shareFormContainer">
    @{ await Html.RenderPartialAsync("_ShareView", new WorkbookShareModel());}
</div>

<div class="landing-container">
    <div class="workbook-container">

            <table class="table">
                <tbody>
                @foreach (var workbook in Model.Workbooks)
                {
                    string trClassName, linkText;
                    if (workbook.Metadata.SharedBy == null)
                    {
                        trClassName = "saved-workbooks";
                        linkText = workbook.Name;
                    } else {
                        trClassName = "shared-with-me";
                        linkText = string.Format(
                            BaseLanguage.SharedWithMeWorkbook, 
                            workbook.Name, 
                            workbook.Metadata.SharedBy,
                            workbook.Metadata.SharedDate.ToShortDateString()
                        );
                    }

                    <tr class="@trClassName">
                        <td>@Html.ActionLink(linkText, "Open", "OpenAnalytics", new { id = Model.Id, workbook = workbook.Name })</td>
                        <td class="last-modified-date" title="Last Modified Date">@workbook.ModifiedDate.ToShortDateString()</td>
                        <td class="share">
                            <button title="Share" class="share-button" onclick='showSharingView("@workbook.Name", "@workbook.Id", "@Model.Id")'>&nbsp;</button>
                        </td>
                    </tr>
                }
                </tbody>
            </table>
        </div>
    </div>
</div>
}

@section Scripts
    {
    <!--Load JQuery 'unobtrusive' validation -->
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script type="text/javascript">

    // hide the modal as soon as the page loads
    $('#shareFormModal').modal("hide");

        function showSharingView(title, workbookId, id) {
            $('#shareFormModal').modal("show");

            // how to pass a WorkbookShareModel to my partial view from here?
        }

        function hideDialog() {
            var form = $("#partialform");
            // only hide the dialog if the form is valid
            if (form.valid()) {
                activateShareButtons();
                $('#shareFormModal').modal("hide");
            }
        }


        // Helper method that validates list of emails
        function IsEmailValid(emailList, element, parameters) {
            var SPLIT_REGEXP = /[,;\s]\s*/;
            var EMAIL_REGEXP =
                /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@@[a-z0-9](?:[a-z0-9-]*[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)+$/i;

            var emails = emailList.split(SPLIT_REGEXP);
            for (var i = emails.length; i--;) {
                if (!EMAIL_REGEXP.test(emails[i].trim())) {
                    return false;
                }
            }

            return true;
        }
    </script>
}

Это мой диалог:

@using DNAAnalysisCore.Resources
@model DNAAnalysisCore.Models.WorkbookShareModel
@* Partial view that contains the 'Share Workbook dialog' modal *@

<!-- Modal -->
<div onclick="activateShareButtons()" class="modal fade" id="shareFormModal" role="dialog">
    <div class="modal-dialog modal-md">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Share Workbook - @Model.Title</h4>

            </div>

            @using (Html.BeginForm("ShareWorkbook", "Home", FormMethod.Post, new { @id = "partialform" }))
            {
                <div class="modal-body">

                    <label>@BaseLanguage.Share_workbook_Instruction_text</label>
                    <div class="form-group">
                        <textarea class="form-control" asp-for="Emails" rows="4" cols="50" placeholder="@BaseLanguage.ShareDialogPlaceholder"></textarea>
                        <span asp-validation-for="Emails" class="text-danger"></span>
                    </div>

                    <input asp-for="Title" />
                    <input asp-for="Id" />
                    <input asp-for="WorkbookId"/>
                </div>
                <div class="modal-footer">
                    <button onclick="hideDialog()" type="submit" class="btn btn-primary">Share</button>
                    <button onclick="activateShareButtons()" id="btnCancelDialog" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            }

        </div>
    </div>
</div>

Answer 1

Есть два варианта решения вашей проблемы:

Вариант 1:

Поскольку у вас есть параметры (title, workbookId, id), вы можете вызвать функцию на стороне сервера, используя AJAX для рендеринга частичного представления, а затем заменить DIV, содержащийся в частичном представлении, на обновленное содержимое в функции обратного вызова AJAX. ,

Вы можете нажать здесь для примера кода.

Вариант 2:

Непосредственное обновление соответствующего ввода / области с помощью Jquery. Например, вспомогательный тег ввода:

<input asp-for="<Expression Name>">

создает атрибуты HTML id и name для имени выражения, указанного в атрибуте asp-for. Таким образом, вы можете установить значение, используя Jquery, например:

$("#Title").val("Title")

Пожалуйста, нажмите здесь для помощников тегов в формах в ASP.NET Core

В варианте 2 вам необходимо сначала очистить область Emails после того, как пользователь нажмет кнопку «Поделиться»; С вариантом 1 вам не нужно заботиться об этом, поскольку HTML полностью заменится.