javascript - 如何在父 View 中访问局部 View 的模型？

Question

我有一个包含以下脚本的 View :

$(document).ready(function () {
    var messages = @Html.Raw(Json.Encode(Model.Messages)); // Accessing the Model here.
    $.each(messages, function (index, item) {
        addMessageRow(item, false);
    });
    $("#btnAddMessage").on("click", function () {
        addMessageRow();
    });
    // More code
});

..效果很好。然后，我将其转换为部分 View ，并在引导模式中显示。据我所知，脚本部分在模态/部分 View 中不起作用(而且确实没有)。因此，我将 javascript 代码移至父 View ，以便在调用 .modal 方法后立即执行:

$("a[data-modal]").on("click", function () {
    $("#childModalContent").load(this.href, function () {
        $("#childModal").modal({ keyboard: true }, "show");

        var messages = /*GetMessagesAsJson();*/          // How to get the Messages here?
        $.each(messages, function (index, item) {
            addMessageRow(item, false);
        });
        $("#btnAddMessage").on("click", function () {    // This works just fine.
            addMessageRow();
        });

    });
    return false;
});

..这有效，只是我现在不知道如何获取 Messages 集合，因为它属于部分 View 的模型。这就是部分 View 获取其模型的方式:

public ActionResult Edit(int? parentId, int? childId)
{
    if (parentId == null || childId == null) { /*BadRequest*/ }

    child child = GetChild(parentId, childId);
    if (child == null) { /*NotFound*/ }

    return PartialView("_Edit", child);
}

该操作的调用方式如下:

@Html.ActionLink("Edit", "Edit", "ControllerName", 
                 new {parentId = Model.ParentId, childId = item.Id },
                 new { @class = "btn btn-default", data_modal = "" })

如上面的 .on("click") 函数所示，单击此链接会将部分 View 加载为模型。为此，我在父 View 中有以下占位符:

<div id="childModal" class="modal fade in">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="childModalContent"></div>
        </div>
    </div>
</div>

我检查了this similar question 。那里的答案建议在 View 之间传递相关数据，但考虑到部分 View 是由 Controller 返回的，我不确定如何做到这一点，如上所示。

如何在访问其模型的部分(模态) View 上执行 JavaScript 代码？

Answer 1

场景 1 - 分部 View 内的数据是静态的，即分部 View 的数据模型在加载父 View 后不会改变

• 从操作方法中，返回 View 而不是部分 View
• 创建另一个局部 View ，它接受与局部 View 相同的模型。将所有 JS 代码放在这里
• 现在我们有两个部分 View 。一个使用 HTML，另一个使用 JS 代码。从父 View 中调用它们。 HTML 部分 View 将位于 HTML 内部，JS 代码部分 View 将位于脚本部分。
• 带有 JS 代码的分部 View 与任何其他分部 View 相同，但只有 JS 代码。请参阅下面的示例

这是 .net core 中的示例:

操作方法

 public async Task<IActionResult> Search(SearchModel model)
    {
        var vm = _someService.GetData(model);

        return View(vm);

    }

父 View

@model SomeViewModelOfYourChoice


<section class="filter-section">
   //Render HTML partial view
   @{ await Html.RenderPartialAsync("_SearchResultsFiltersPartial", Model); }
</section>

@section scripts{
    //Render JS code partial view
    @{ await Html.RenderPartialAsync("_SearchResultsScriptsPartial", Model); }

}

仅使用 JS 代码的部分 View

@model PartialViewModelOfYourChoice

<script>
 $(document).ready(function () {
     // Model is now available here e.g. @Model   
     //All your JS code here
 });
</script>

场景 2 - 部分 View 内的数据是动态的，即每次加载部分 View 时数据都会发生变化

• 从操作方法返回 JSON，而不是部分 View (请参见下面的示例)
• 不要在局部 View 内传递任何模型
• 在引导模式显示事件中从操作中获取数据并将结果(JSON)设置在变量中
• 使用结果(JSON)运行 JS 代码

这是一个例子

从操作方法返回 JSON

public ActionResult Edit(int? parentId, int? childId)
{
   if (parentId == null || childId == null) { /*BadRequest*/ }

   child child = GetChild(parentId, childId);
   if (child == null) { /*NotFound*/ }

   return Json(child,JsonRequestBehavior.AllowGet);
}

父 View

@model SomeViewModelOfYourChoice


<section class="filter-section">
   //Render HTML partial view. Note that model is not passed here
   @{ await Html.RenderPartialAsync("_SearchResultsFiltersPartial"); }
</section>        
}

在 anchor 上单击调用操作方法。

//Generate the URL
// I believe that Model.ParentId will remain the same but you need to dynamically pass the item.id
var url = '@Html.Raw(Url.Action("Edit", "ControllerName", new {parentId = Model.ParentId, childId = item.Id }))';
// Call action method
$.ajax({url: url,type: 'GET',contentType: 'application/json; charset=utf-8',
        success: function (result) {
            messages = result;
            //Run your rest of the JS code here   
         }
       });