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

我有一个“工作手册”列表显示在一张表中。每个工作簿的标题旁边都有一个“共享”按钮。当用户单击共享按钮时，将显示包含表单的模式对话框

该表单允许用户输入收件人电子邮件列表，以逗号分隔，并在客户端验证

由于该对话框位于局部视图

\u ShareView.cshtml

中，允许我传递一个模态

WorkbookShareModel

，其中包含一些字段，如

WorkbookId

和

Title

。这里的目标是在用户按下“共享”按钮时传递每个工作簿的详细信息（即，构造一个模型并将其传递给已渲染的模型）

我不知道如何将模型传递给已渲染的视图

解决方案必须在客户机上完成（即，如果传递了参数，则不涉及服务器上返回部分视图的操作）。我想避免对服务器进行不必要的调用-我们在客户端有关于工作簿的所有数据，当用户在电子邮件列表中键入时，我需要发布一篇文章

这是我的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>
}

@节体填充
{
@{wait Html.RenderPartialAsync（“_ShareView”，new WorkbookShareModel（））；}
@foreach（Model.Workbooks中的var工作簿）
{
字符串trClassName，linkText；
if（workbook.Metadata.SharedBy==null）
{
trClassName=“保存的工作簿”；
linkText=workbook.Name；
}否则{
trClassName=“与我共享”；
linkText=string.Format(
BaseLanguage.SharedWithMe工作簿，
工作簿名称，
workbook.Metadata.SharedBy，
workbook.Metadata.SharedDate.ToShortDateString（）
);
}
@ActionLink（linkText，“Open”，“OpenAnalytics”，new{id=Model.id，workbook=workbook.Name}）
@workbook.ModifiedDate.ToShortDateString（）文件
}
}
@节脚本
{
@等待Html.PartialAsync（“验证脚本”）
//页面加载后立即隐藏模式
$（'#shareFormModal'）.modal（“隐藏”）；
函数showSharingView（标题、工作簿id、id）{
$（'shareFormModal'）.modal（“show”）；
//如何从这里将WorkbookShareModel传递到我的局部视图？
}
函数hideDialog（）{
变量形式=$（“#部分形式”）；
//仅当表单有效时才隐藏对话框
if（form.valid（））{
激活共享按钮（）；
$（'#shareFormModal'）.modal（“隐藏”）；
}
}
//验证电子邮件列表的助手方法
函数IsEmailValid（emailList、元素、参数）{
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]（？：[a-z0-9-]*[a-z0-9]）+$/i；
var emails=emailList.split（split_REGEXP）；
for（var i=emails.length；i--；）{
如果（！EMAIL_REGEXP.test（EMAIL[i].trim（）））{
返回false；
}
}
返回true；
}
}

这是我的对话：

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

@使用dnaanalysicscore.Resources
@模型DNAAnalysicScore.Models.WorkbookShareModel
@*包含“共享工作簿对话框”模式的局部视图*@
共享工作簿-@Model.Title
@使用（Html.BeginForm（“共享工作簿”、“主页”、FormMethod.Post、new{@id=“partialform”}））
{
@BaseLanguage.Share\u工作簿\u说明\u文本
分享
取消
}

有两种解决方案：

选项1:

由于已经获得了参数（title、workbookId、id），因此可以使用AJAX调用服务器端函数来呈现部分视图，然后用AJAX回调函数中更新的内容替换部分视图中包含的DIV

您可以单击以获取代码示例

选项2:

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

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

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

---

使用选项2，用户单击共享按钮后，需要首先清除

电子邮件

区域；对于选项1，您无需在意，因为HTML将完全替换

谢谢你的回答！我更喜欢选项2，因为我不需要对服务器进行两次调用。目前，我正在处理的项目已经实现了OP1，但我正在尝试摆脱呈现对话框的第一个调用。我将尝试它的OP2，看看我是否会设法让它工作

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