在ASP.MVC中包含多個局部視圖的復雜視圖

Question

我有以下表格：

編輯是一些局部視圖_Edit，具有稱為EditVM的單獨視圖模型。

搜索是_Search的局部視圖，分為兩個其他局部模型-過濾器（_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。 我希望搜索是通用的，在視圖之間共享，所以我不能將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>
}

問題在於后操作正在獲取SearchVM實例，而且僅設置了查詢字段。 是否可以使用UpdateVM僅在兩個動作（get和post）之間拆分圖片中顯示的整個視圖？ 是否可以不丟失已經存儲在模型中的信息（搜索具有某些設置，例如小或大模式）？

或者，也許還有其他方法可以以一種健壯的方式來實現所提到的視圖？ 也許我正在嘗試不采用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事件觸發該類。 如果您有任何疑問，請告訴我。