0

我正在为一个项目使用 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>

但它仍然不起作用，有什么想法或帮助吗？

4

1 回答 1

3

代替：

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

和：

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

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

于 2013-03-08T14:05:44.987 回答