0

プロジェクトに MVC 4 を使用しています。私のビューの1つには、次のように2つの部分ビューがあります。

<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>
}

2つ目は上記とほぼ同じですが、フォームのモデルタイプとアクション方法が違うだけです。

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()後、同じセマンティクスを持つメソッドが導入されました。したがって、使用している jQuery のバージョンに応じて、適切な方法を選択する必要があります。.live().delegate()

于 2013-03-08T14:05:44.987 に答える