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调用服务器端函数以呈现部分视图，然后用AJAX回调函数中的更新内容替换部分视图中包含的DIV 。

您可以单击here以获得代码示例。

选项2：

使用Jquery直接更新相关的输入/区域。例如，输入标签帮助器：

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

为asp-for属性中指定的表达式名称生成id和name HTML属性。因此，您可以像这样使用Jquery设置值：

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

请单击here以获取ASP.NET Core中表单中的标记帮助器

对于选项2，您需要在用户单击“共享”按钮后首先清除Emails区域；使用选项1时，您不必担心，因为HTML会完全替换。

如何将动态更改的模型传递到局部视图？

1 个答案: