Question

我正在使用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>

但仍然无效，有任何想法或帮助吗？

Answer 1

替换：

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

使用：

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

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

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

1 个答案: