包含ASP.MVC中的多个部分视图的复杂视图

Question

我有以下表格：

Edit是一个部分视图_Edit，带有名为EditVM的单独视图模型。

搜索是局部视图_搜索在另外两个部分模型之间拆分 - 过滤（_SearchFilter）和搜索结果（_SearchResults）。所有这些视图共享一个视图模型SearchVM。

最后，我正在尝试创建一个代表图片内容的UpdateVM。它包含EditVM和SearchVM实例。

我的问题是丢失有关UpdateVM的信息。

首先，我正在调用get action Update。

[HttpGet]
public virtual ActionResult Update()
{
    var model = new UpdateVM();

    var searchVM = new SearchVM();
    model.searchVM = searchVM;

    var editVM = new EditVM();
    model.editVM = editVM;

    return View(model);
}

视图看起来像这样：

@model UpdateVM

@Html.Partial(MVC.Shared.Views._Search, Model.searchVM)

@Html.Partial(MVC.Shared.Views._Edit, Model.editVM)

问题始于搜索过滤器。正如您在_Search部分视图中看到的那样，只传递了SearchVM。我希望Search是通用的，在视图之间共享，所以我不能将它传递给UpdateVM。

过滤视图_SearchFilter如下所示：

@using (Html.BeginForm(Model.SearchButtonAction, Model.SearchButtonController, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="frm_row">
        @Html.TextBoxFor(model => model.Query)
        <input type="submit" value="Search" />
    </div>
}

问题是post post获取了SearchVM实例，而且只设置了Query字段。是否有可能只在两个动作之间分割图片上显示的整个视图，获取和发布，使用UpdateVM？是否可以不丢失已存储在模型中的信息（搜索有一些设置，例如模式是小还是大）？

或许还有其他方法可以强有力地实现上述视图？也许我试图不是以MVC风格来做呢？

Answer 1

您不想将部分视图加载到主视图中。您希望根据搜索参数动态加载它们。为此，请使用ajax调用

$(document).on('click', '.btnSearch', function(){
    $.ajax({
        url: '@Url.Action("Search", "Controller")',
        type: 'post',
        cache: false,
        async: true,
        data: { id: $("#Query").val() },
        success: function(result){
            $(".divSearch").html(result);
        } 
    });
});

你的控制器看起来像这样

public PartialViewResult Search(int id){
    var Model = //populate the model based on the selected id
    return PartialView("_partialName", Model);
}

并将搜索按钮更改为

<input type="button" value="Search" class="btnSearch" />

您不想提交表单，因此您需要一个按钮而不是提交，并且您需要在脚本可以为click事件触发的按钮中添加一个类。如果您有任何问题，请告诉我。