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

时间:2017-04-07 14:23:09

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

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

第一部分视图

enter image description here

第二部分视图

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

2 个答案:

答案 0 :(得分:0)

我建议你如何解决你的任务:

  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);
            }
        });
    }
    
  3. 因此,假设您的第一个部分表单具有相同的字段,您将能够用您想要的内容填充您的第二个表单。

答案 1 :(得分:0)

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

2)在UI中修改局部视图的BeginForm字段并添加OnSuccess事件。(例如Handel OnSuccess

3)创建Jquery方法以获取成功请求,并将第一个局部视图内容替换为UI中的第二个。(例如:$(&#39;#PartialView1Container&#39;)。html(result);)