在部分视图之间传递视图模型MVC5
问题描述:
我有一个主视图和两个局部视图。我需要能够使用我的第一个局部视图中的值填充视图模型,并在单击按钮时将视图模型传递到第二个局部视图。该按钮位于第二个局部视图中。我已经写了一个JavaScript函数来做到这一点,但当我检查控制器方法时,viewmodel是空的。正如你可以在下面的服务框中的截图中看到的是第二部分视图在部分视图之间传递视图模型MVC5
第一部分视图
第二部分视图
@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);
}
答
这是我给你的建议如何解决你的任务:
- 你必须改变你的按钮的类型,第二部分视图形式按钮类型上:
<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); } }); }
因此,提供你的第一部分的形式有相同的领域,你将能够填补你想要的第二种形式。
答
1)为您的局部视图创建一个get或post操作。这会将您的发布模型作为参数并返回第二个局部视图。
2)修改局部视图的BeginForm字段在UI和添加的onSuccess事件。(例如Handel OnSuccess)
3)创建的Jquery方法来获得成功请求和替换第二个在UI第一局部视图内容(例如:$('#PartialView1Container')。html(result);)
发出AJAX请求是一个*完全独立的请求 - 响应循环,与初始视图呈现期间发生的事件完全脱离了。如果您需要信息,您必须将其与AJAX请求一起发布或在那里重建。 –
对不起克里斯。我不明白你。例如,你给我一个例子 – Tom
我可以看到控制器中的视图模型值,但是在客户端,当我做一个警报来检查它显示的模型数据为空时 – Tom