Question

目标：我正在将我的多视图注册过程移动到由RenderPartial（）组成的单个视图中。这背后的原因是我想在创建帐户后重新使用我的个人资料编辑部分中的部分视图。我希望我的Register.aspx以这种方式运行：

<form id="myRegistrationForm">
    <div id="accountCreatePanel"><% Html.RenderPartial("AccountCreationPartial") %></div>
    <div id="personalInfoPanel"><% Html.RenderPartial("PersonalInfoPartial") %></div>
    <div id="goalsAccompsPanel"><% Html.RenderPartial("GoalsAndAccomplishmentsPartial") %></div>
    <div id="prefsPanel"><% Html.RenderPartial("PreferencesPartial") %></div>
</form>
<button id="nextButton" onclick="nextButtonClick();">Next >></button>
<button id="prevButton" onclick="prevButtonClick();"><< Previous</button>

所有这些部分都是对RegistrationViewModel.cs的强类型。我想在整个注册过程中逐个构建视图模型。每个渲染部分都包含视图模型属性的Html帮助器。我在每个Ajax帖子后用jQuery显示/隐藏面板。我已经使用以下方法进行了这项工作，但它太麻烦和冗长。

目前的解决方案有效，但我知道必须有更好的方法来实现：

部分包含：

<%=Html.LabelFor(m => m.Property1)%>
<%=Html.TextBoxFor(m => m.Property1, new {ID = "property1text"%>
<%=Html.LabelFor(m => m.Property2)%>
<%=Html.TextBoxFor(m => m.Property2, new {ID = "property2text"%>

jQuery Ajax：

var jqxhr;
var jsonResponse;
 jqxhr = $.post('/Account/Register', {
                  Property1: $('#property1text').val(),
                  Property2: $('#property2text').val()
                }, function() {
                }, 'json').fail(function () {
                    alert('Account creation failed');
                }).done(function() {
                    jsonResponse = jQuery.parseJSON(jqxhr.responseText);
                    if(!jsonResponse.CreationSuccess) alert('An account with this username already exists!');
                }).always(function () {

                });

控制器：

[HttpPost]
public JsonResult Register(RegistrationViewModel viewModel)
{
    ....do some stuff...
    ....save viewModel properties to DB...
    return Json(viewModel);
}

[HttpPost]
public JsonResult PersonalInfo(RegistrationViewModel viewModel)
{
    ...do some stuff...
    ...save viewModel properties to DB...
    return Json(viewModel);
}

此解决方案的问题： 在我的$ .post（）中，我必须在视图模型中物理地键入每个属性，并通过ID获取表单元素的val（）。我想使用 $（'。form'）。serialize（）将数据作为控制器方法中的视图模型参数传递。

为什么我不能让$（'。form'）。序列化（）工作以及发生了什么： 如果我只使用<form id="myForm">，则method属性为GET，并且所有视图模型内容都会在URL中进行编码（包括用户名和密码）。我在数据库中加密密码，但在初始视图模型中没有加密，我不想在网址中加密。当我更改<form method="POST">时，浏览器实际显示返回的JSON对象。我当前的解决方案允许我访问视图模型客户端的返回属性，异步发布而不刷新，我可以快速完成整个注册过程。我只知道在我的jQuery中输入视图模型中的所有内容都是不好的做法，如果/当我的视图模型发生变化时，很难管理。

任何建议都会提前得到很高兴。

在MVC 4中使用jquery ajax提交由部分视图组成的表单

0 个答案: