ログインフォームにポストバックなしでユーザー名とパスワードを検証するASP.NET MVC

Question

ポストバック/更新なしのフォームにあるテキストボックスに入力された入力ユーザー名とパスワードを検証します。私はこの目的のためにJavascriptやAJAXが必要だと知っていますが、チュートリアルを参照したり、ここにコードを教えてください。 この機能のない私の現在のコードは次のようになります。

@using(Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    @Html.TextBoxFor(u => u.PPNumber, new { @class = "form-control", type = "number", placeholder = "Enter Number",@min="1" }) 
    @Html.ValidationMessageFor(u => u.PPNumber) 
    @Html.TextBoxFor(u => u.Password, new { @class = "form-control", type = "Password", placeholder = "Password" }) 
    @Html.ValidationMessageFor(u => u.Password) 
    <input type="submit" value="Login" class="btn btn-primary btn-block" /> 
} 

Answer 1

あなたは、AJAXを使用することができます。

ユーザーがフォームを送信するときに、そのイベントをjavascriptでハイジャックして停止する必要があります（通常のフルページフォームの送信を防ぐ）代わりにフォームデータを使用してアクションメソッドにajaxを呼び出します。このアクションメソッドにはユーザーの資格情報を検証するコードが必要で、資格情報の検証が成功するかどうかを示すstatusプロパティを持つJSONデータ構造体を返すことができます。あなたはajaxコールの成功/ doneコールバックでこの応答を調べ、それに従って行動することができます。

jQuery $.postメソッドを使用したクイックサンプルです。

あなたのフォームにIDを付けて送信イベントを送信します。

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id="loginForm")) 
{ 
    @Html.TextBoxFor(u => u.PPNumber) 
    @Html.TextBoxFor(u => u.Password, new { @class = "form-control", type = "Password"}) 
    <input type="submit" value="Login" class="btn btn-primary btn-block" /> 
} 

とサブミットイベントをハイジャックし、代わりにajax投稿を行うためのjavascriptコード。

$(function() { 

    $("#loginForm").submit(function(e) { 
     e.preventDefault(); 
     $.post($(this).attr("action"), $(this).serialize()) 
      .done(function(response) { 
       if (response.status === 'success') { 
        alert("Login successful.Do something else now"); 
       } else { 
        alert("Login failed"); 
       } 
      }); 
    }); 
}); 

AccountControllerのログインアクションメソッドは、ステータスプロパティを持つJsonレスポンスを返します。

public ActionResult Login(string PPNumber,string password) 
{ 
    if(PPNumber=="thisIsDemo" && password=="ButDoTheActualCheck") 
    { 
     return Json(new { status = "success" }); 
    } 
    return Json(new { status = "failed" }); 
} 

ここで私はusrename/passwordチェックを2つの静的値にハードコードしました。これを変更して、dbテーブル/資格のチェックメカニズムが何であれ、それをチェックすることができます。