親ページにエラーが表示されたmvcの部分表示を表示

Question

私は部分的に複数のフォームを持つページを持っています。私は提出時に各部分を投稿したいと思います。エラーがある場合は、検証エラーをメインページの一部として部分的に表示する必要があります。つまり、エラーがある場合は、部分ページを自分のページに表示したくありません。私はこの動作がajax投稿でのみ可能であると言って正しいですか？どのように私はajaxのポスト、通常のフォームの投稿なしでモデル状態のエラーを返すだろうか？

編集： まだ

部分それ自身のページの部分を見て -

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "LoginForm" })) 
{ 
    @Html.ValidationMessage("InvalidUserNamePassword") 
    <fieldset class="fieldset"> 
     <div> 
      <label for="form-field-user_id">User ID</label> 
      <span> 
       @Html.TextBoxFor(x => x.Username, new { @class = "form-field__input form-field__input--text", @id = "form-field-user_id"})      
      </span> 
     </div> 
    </fieldset> 
    <div class="form-field__button"> 
     <button id="loginButton" type="submit" class="button button--primary">Login</button> 
    </div> 
} 

<script> 
    $('#loginButton').click(function() { 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("Login", "Account")', 
      data: $('form').serialize(), 
      success: function (result) { 
       if (result.redirectTo) { 
        window.location.href = result.redirectTo; 
       } else { 
        $("#LoginForm").html(result); 
       } 
      }, 
      error: function() { 
       $("#LoginForm").html(result); 
      } 
     }); 
    }); 
</script> 

コントローラ -

[HttpPost] 
public ActionResult Login(LoginModel model) 
{ 
    if (!ModelState.IsValid) 
    { 
     return PartialView("~/Views/Account/_Login.cshtml", model); 
    } 
    return Json(new { redirectTo = Url.Action("Index", "Profile") }); 
} 

Answer 1

はい、と言っても間違いありません。この動作はajax投稿でのみ可能です。

現在のスクリプトにはいくつか問題があり、目的の結果が得られないことを意味します。

まず、あなたのボタンは、スクリプトで最後のコード行としてreturn false;を追加することで、デフォルトのイベントをキャンセルしない限り、ajax呼び出しに加えて通常の送信を行うことを意味する送信ボタンです。しかし、それだけでAJAX呼び出しは、現在既存のページを更新しますtype="button"

<button id="loginButton" type="button" class="button button--primary">Login</button> 

にボタンの種類を変更するために容易になるだろう、しかし、それは無効なHTMLであるネストされた形で結果として既存の<form>要素内に返された部分を追加しますサポートされていません。 、

success: function (result) { 
    if (result.redirectTo) { 
     window.location.href = result.redirectTo; 
    } else { 
     $("#LoginFormContainer").html(result); // modify 
    } 
}, 

最後に、外側の要素のHTMLを更新するために、別の要素に

<div id="LoginFormContainer"> 
    @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "LoginForm" })) 
    { 
     .... 
     <button id="loginButton" type="button" class="button button--primary">Login</button> 
    } 
</div> 

をメインビューのフォームをラップして、スクリプトを変更するには、クライアント側の検証ので、あなたのレンダリングの動的なコンテンツをあなたのHTMLに変更されます。返されたフォームでは機能しません。あなたの特性は、（例えばUserame財産上の[Required]属性）を検証属性を持っていると仮定すると、あなたは、コンテンツ

var form = $('#LoginForm'); 
.... 
} else { 
    $("#LoginFormContainer").html(result); 
    // reparse validator 
    form.data('validator', null); 
    $.validator.unobtrusive.parse(form); 
} 

あなたはページ上の複数のフォームを持っていることに注意をロードした後にバリデータを再解析する必要があり、その場合、あなたの中にAjaxのオプションは、正しいフォームをシリアル化していることを確認するためにdata: form.serialize(),そして、上記のスニペットにつきとして

data: $('#LoginForm').serialize(), 

またはvar form = $('#LoginForm');あなた宣言した場合でなければなりません。

サイドノート：テキストボックスのid属性を変更する本当の必要はありません（これはデフォルトでid=Username"になり、あなたは単に財産の

@Html.LabelFor(x => x.UserName, "User ID") 
@Html.TextBoxFor(x => x.Username, new { @class = "form-field__input form-field__input--text" }) 

か、単に@Html.LabelFor(x => x.UserName)が[Display(Name = "User ID")]

で飾られている使用することができます