MVC驗證併發布到控制器與jquery ajax

Question

我是jquery ajax的新手。我很想學習客戶端jQuery驗證，而不使用DataAnnotations。當我按下登錄按鈕時，頁面刷新不會使用ajax帖子發佈到控制器的登錄（用戶x）方法。我不是專家任何意見和建議將不勝感激。

我的模型

public class User 
{ 
    public String UserName { get; set; } 
    public String Password { get; set; } 
} 

我控制器

public class LoginController : Controller 
{ 
    [HttpPost] 
    public bool Login(User x) 
    { 
     return false; 
    } 

    public ActionResult LoginTst() 
    { 
     return View(); 
    } 
} 

的觀點是LoginTst &腳本

$(document).ready(function() 
 
    { 
 
     $("#signin").click(function() 
 
     { 
 
      
 
       $("#loginForm").validate({ 
 
        rules: { 
 
         UserName: { 
 
          required: true, 
 
          minlength: 2, 
 
          maxlength: 15 
 
         }, 
 
         Password: { 
 
          required: true, 
 
          minlength: 5, 
 
          maxlength: 18 
 
         } 
 
        }, 
 
        messages: { 
 
         UserName: { 
 
          required: "username req", 
 
          minlength: "user is small", 
 
          maxlength: "user is long" 
 
         }, 
 
         Password: { 
 
          required: "pass req", 
 
          minlength: "pass is small", 
 
          maxlength: "pass is long" 
 
         } 
 
        }, 
 
        submitHandler: function (form) { 
 
         var form = $('#loginForm'); 
 
         $.ajax({ 
 
          cache: false, 
 
          async: true, 
 
          type: "POST", 
 
          url: form.attr('Login'), // the action it 
 
          data: form.serialize(), 
 
          success: function (data) { 
 
           if (data == false) { 
 
            alert("Username doesn't exist"); 
 
           } 
 
          } 
 
         }); 
 
        } 
 

 
       }); 
 

 
      }); 
 

 
     
 
    });

<form action="" name="loginForm" id="loginForm"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Username" id="UserName" name="UserName"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <input type="password" class="form-control" placeholder="Password" id="Password" name="Password"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <button class="btn btn-warning btn-block" type="submit" id="signin">login</button> 
 
     </div> 
 
    </form>

我在做什麼錯？

Answer 1

問題是您的操作未設置。你可以手動設置它，或者你可以用Html.BeginForm包裝你的輸入字段。後者允許您引用控制器以及控制器上的方法，而不用擔心相對路徑。

下面是一個例子：

@using (@Html.BeginForm("Login", "Login", FormMethod.Post, new {@id="loginForm"})) 
{ 
    <div class="form-group"> 
     <input type="text" class="form-control" placeholder="Username" id="UserName" name="UserName"> 
    </div> 
    <div class="form-group"> 
     <input type="password" class="form-control" placeholder="Password" id="Password" name="Password"> 
    </div> 
    <div class="form-group"> 
     <button class="btn btn-warning btn-block" type="submit" id="signin">login</button> 
    </div> 
} 

當然，你可以使用HTML Helpers用於輸入控制使用塊內爲好。

您還需要更新您的submitHandler在行動由拉的形式傭工所產生：

submitHandler: function(form) { 
    var form = $('#loginForm'); 
    $.ajax({ 
    cache: false, 
    async: true, 
    type: "POST", 
    url: form.attr('action'), // the action as defined in the <form> 
    data: form.serialize(), 
    success: function(data) { 
     if (data == false) { 
     alert("Username doesn't exist"); 
     } 
    } 
    }); 
} 

您可以在這裏找到一個工作dotnetfiddle例如：https://dotnetfiddle.net/kRfSnh

Answer 2

你設置的URL form.attr('Login')，但在您的HTML中，表單沒有「登錄」屬性。

你可能想要做的就是在表單上設置動作（到你想要的url），並改變javascript中的url以使用form.attr（'action'）。