两个部分视图，将数据发布到导致问题的操作答案

【问题标题】：Two Partial Views, posting data to actions causing issue两个部分视图，将数据发布到导致问题的操作
【发布时间】：2013-03-08 22:05:44
【问题描述】：

我正在为一个项目使用 MVC 4。我的一个观点有两个部分观点：

<div id="fPassword">
      @Html.Partial("_ForgotPassword",new UserForgotPasswordModel())
</div>
<div id="aLink">
      @Html.Partial("_ActivationLink", new UserActivationLinkModel())
</div>

部分视图如下：

@model Me2Everyone.Web.UI.Models.User.UserForgotPasswordModel
@using (Html.BeginForm("ForgotPassword", "Home", FormMethod.Post, new { id = "personal-form" }))
{
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="padding: 0px 0 20px 0;">
    <tbody>
        <tr>
            <td width="375">
                <div class="text-problem">
                    @Html.EditorFor(model => model.Email)
                </div>
            </td>
            <td width="80" valign="bottom">
                <input type="submit" value="Send" />
            </td>
        </tr>
    </tbody>
</table>
}

第二个和上面差不多，唯一不同的是Form的模型类型和动作方法。

在 Home Controller 中，ForgotPassword 操作如下：

[HttpPost]
public ActionResult ForgotPassword(UserForgotPasswordModel model)
{
    if (ModelState.IsValid)
    {
        // Search email in database.
        if(emailNotFound)
        {
            model.ErrorMessage = "Email not found.";
        }
    }
    else
    {
         model.ErrorMessage = "Email address not found.";
    }
    return PartialView("_ForgotPassword", model);
}

现在，当我将数据发布到服务器时，它返回的部分视图是独立的，而不是在主视图中，所以我在网上环顾四周，发现我需要为它发送 ajax 调用，所以我这样做了父视图为：

<script type="text/javascript">
    $(function () {
        $("form").submit(function () {
            if ($(this).valid()) {
                var dataToSend = { model: { Email: $("#Email").val() } };
                var serializedForm = $(this).serialize();
                var isForgotPassword = true;
                if ($(this).attr('action').indexOf("ForgotPassword") < 0)
                    isForgotPassword = false;
                $.ajax({
                url: $(this).attr('action'),
                data: serializedForm,
                type: 'POST',
                success: function (data, textStatus, request) {
                    if (isForgotPassword == true)
                        $("#fPassword").html(data);
                    else
                        $("#aLink").html(data);
                },
                error: function (xhr, ajaxOptions, thrownError)
                {
                    alert('error')
                }
            });
            return false;
        }
    });
});

在我的父母看来，我有：

@if(Model.ErrorMessage != "")
{
     <script type="text/javascript">
          alert(@Model.ErrorMessage);
     </script>
}

问题是当我提供一个有效的电子邮件地址时，它可以正常工作，但是当我提供一个数据库中不存在的电子邮件地址时，我收到电子邮件未找到的警报，但是当我再次单击提交按钮时，部分视图是在浏览器中独立创建的，而不是在父视图中。

我尝试将我的父视图更改为：

 <div id="fPassword">
      @{Html.RenderAction("ForgotPassword");}
 </div>
 <div id="aLink">
       @{Html.RenderAction("ActivationLink");}
</div>

但它仍然无法正常工作，有什么想法或帮助吗？

【问题讨论】：

标签： asp.net-mvc-4 partial-views

【解决方案1】：

替换：

$("form").submit(function () {

与：

$(document).on('submit', 'form', function () {

这将确保您的提交处理程序以活泼的方式注册。这意味着在您使用来自 AJAX 调用的内容刷新 DOM 后，您注册的提交处理程序将继续与这个新表单相关联。您可以在文档中阅读有关 .on() 方法的更多信息。 .on() 替换了已弃用（甚至在 jQuery 1.9 中删除）的 .live() 方法，它允许您完成相同的任务。在.live() 方法被弃用后，他们引入了具有相同语义的.delegate() 方法。因此，根据您使用的 jQuery 版本，您应该选择正确的方法。

【讨论】：