在部分视图 MVC5 之间传递视图模型答案

【问题标题】：Passing viewmodel between partial views MVC5在部分视图 MVC5 之间传递视图模型
【发布时间】：2017-09-02 23:33:28
【问题描述】：

我有一个主视图和两个部分视图。我需要能够使用我的第一个局部视图中的值填充视图模型，并在单击按钮时将视图模型传递给第二个局部视图。该按钮位于第二个局部视图中。我已经编写了一个 javascript 函数来做到这一点，但是当我检查控制器方法时视图模型是空的。正如您在下面的屏幕截图中看到的，服务框是第二个局部视图

第一部分视图

第二部分视图

@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);
}

【问题讨论】：

发出 AJAX 请求是一个完全独立的请求-响应周期，完全脱离了初始视图呈现期间服务器端发生的情况。如果您需要那里的信息，您必须将其与 AJAX 请求一起发布或在那里重建。
对不起，克里斯。我没听懂你。能给我举个例子吗
我可以在控制器中看到视图模型值，但是在客户端，当我发出警报以检查它显示为空白的模型数据时
我注意到的另一件事是我的视图中没有任何称为表单的元素。你认为这是原因吗
你的表单元素应该被包裹在整个页面上，也就是视图本身，而不是单独在部分视图中。那是除非您的部分视图正在执行某种提交。此外，您可以在视图本身中设置模型，然后使用相同的模型向下渗透到每个部分视图中。

标签： c# asp.net asp.net-mvc-5

【解决方案1】：

这是我对您如何解决任务的建议：

您必须将第二个局部视图表单上的按钮类型更改为按钮类型：<input type="button" value="Save" class="btn btn-default" onclick="mapInit()" /> 当原始提交事件在您的 ajax 方法之后发生时，此步骤是必要的，不要清理您的表单。李>

在您的 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);
        }
    });
}

因此，只要您的第一个部分表单具有相同的字段，您就可以用您想要的内容填写第二个表单。

【讨论】：

【解决方案2】：

1) 为您的局部视图创建一个获取或发布操作。这将获取您发布的模型作为参数并返回第二个局部视图。

2) 修改UI部分视图的BeginForm字段，增加OnSuccess事件。（如Handel OnSuccess）

3) 创建 Jquery 方法以获取成功请求，并在 UI 中将第一个部分视图内容替换为第二个。（例如：$('#PartialView1Container').html(result);)

【讨论】：