在部分視圖MVC5之間傳遞視圖模型

Question

我有一個主視圖和兩個部分視圖。 我需要能夠使用我的第一個局部視圖中的值填充viewmodel，並在單擊按鈕時將viewmodel傳遞給第二個局部視圖。 該按鈕位於第二個局部視圖中。 我已經編寫了一個javascript函數來執行此操作，但是當我檢查控制器方法時，viewmodel是空的。 正如您在下面的屏幕截圖中看到的那樣，服務框是第二個局部視圖

第一部分視圖

第二部分觀點

@model CC.GRP.MCRequest.ViewModels.NewRequestViewModel

<div id="NewRequest">
    <h1>Services</h1>

    @using (Html.BeginForm())
    {

        @Html.LabelFor(model => model.ProjectName, htmlAttributes: new { @class = "control-label col-md-5" })
        @Html.EditorFor(model => model.ProjectName, new { htmlAttributes = new { @class = "form-control", style = "width:100%" } })

        <input type="submit" value="Save" class="btn btn-default" onclick="mapInit()" />
    }


</div>


<script type="text/javascript">

    function mapInit() {
        $.ajax({
            url: '@Url.Action("Service", "request")',
            // datatype: "json",
            data: $('form').serialize(), // update this
            type: "POST",
            // contentType: 'application/json; charset=utf-8'
        });
    }


</script>

調節器

[HttpPost]
public PartialViewResult Service(NewRequestViewModel model)
{
    return PartialView("_NewService", model);
}

Answer 1

以下是我對您如何解決任務的建議：

1. 您必須將第二個局部視圖表單上的按鈕類型更改為按鈕類型： <input type="button" value="Save" class="btn btn-default" onclick="mapInit()" />這個當ajax方法之后原始提交事件處理完畢時，有必要不清理表單。

2. 在mapInit函數中，您應該添加一個屬性success並在那里編寫一個函數來手動更新您的第二個部分表單：

    function mapInit() { $.ajax({ url: '@Url.Action("Service", "request")', // datatype: "json", data: $('form').serialize(), // update this type: "POST", success: function (data) { var html = $(data).find('form').html(); $('#NewRequest').find('form').html(html); } }); } 

因此，假設您的第一個部分表單具有相同的字段，您將能夠用您想要的內容填充您的第二個表單。

Answer 2

1）為部分視圖創建一個get或post動作。這會將您發布的模型作為參數並返回第二個局部視圖。

2）在UI中修改局部視圖的BeginForm字段並添加OnSuccess事件。（例如Handel OnSuccess ）

3）創建Jquery方法以獲取成功請求並將第一個局部視圖內容替換為UI中的第二個。（例如：$（'＃PartialView1Container'）。html（result）;）