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

Posted 2023-03-27

【中文标题】在部分视图 MVC5 之间传递视图模型

【英文标题】：Passing viewmodel between partial views 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 请求一起发布或在那里重建。

对不起，克里斯。我没听懂你。能给我举个例子吗

我可以在控制器中看到视图模型值，但是在客户端，当我发出警报以检查它显示为空白的模型数据时

我注意到的另一件事是我的视图中没有任何称为表单的元素。你认为这是原因吗

你的表单元素应该被包裹在整个页面上，也就是视图本身，而不是单独在部分视图中。那是除非您的部分视图正在执行某种提交。此外，您可以在视图本身中设置模型，然后使用相同的模型向下渗透到每个部分视图中。

【参考方案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);)