如何獲取從jQuery到ASP.NET MVC的傳入數據（登錄名，密碼），然后比較並返回答案？

Question

我對jQuery很陌生，正在尋找建議。 如何獲取數據，從jQuery模式（登錄/密碼）框到controllers方法，並與數據庫中的數據進行比較並返回響應？

有我的登錄模型。

public class LoginViewModel
{
    [Required]
    [Display(Name = "Email")]
    [EmailAddress]
    public string Email { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [Display(Name = "Remember me?")]
    public bool RememberMe { get; set; }
}

控制器方法，我可能必須從模態jQuery中獲取數據。

    [HttpGet]
    public ActionResult Login(string returnUrl)
    {
        ViewBag.ReturnUrl = returnUrl;
        return View();
    }

    [HttpPost]    
    public async Task<ActionResult> Login(LoginViewModel model, string returnUrl)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }
        var result = await SignInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, shouldLockout: false);
        switch (result)
        {
            case SignInStatus.Success:
                return RedirectToLocal(returnUrl);
            case SignInStatus.LockedOut:
                return View("Lockout");
            case SignInStatus.RequiresVerification:
                return RedirectToAction("SendCode", new { ReturnUrl = returnUrl, RememberMe = model.RememberMe });
            case SignInStatus.Failure:
            default:
                ModelState.AddModelError("", "Invalid login attempt.");
                return View(model);
        }
    }

這是模態窗口：

  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <div class="modal-content">
    <div class="modal-header" style="padding:35px 50px;">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
    </div>
    <div class="modal-body" style="padding:40px 50px;">
      <form role="form">
        <div class="form-group">
          <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
          <input type="text" class="form-control" id="usrname" placeholder="Enter email">
        </div>
        <div class="form-group">
          <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
          <input type="text" class="form-control" id="psw" placeholder="Enter password">
        </div>
        <div class="checkbox">
          <label><input type="checkbox" value="" checked>Remember me</label>
        </div>
          <button type="submit" class="btn btn-success btn-block" id="confirmPassword"><span class="glyphicon glyphicon-off"></span> Login</button>
      </form>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
      <p>Not a member? <a href="#">Sign Up</a></p>
      <p>Forgot <a href="#">Password?</a></p>
    </div>
  </div>    
</div>

和jQuery代碼，必須從模態框中獲取數據，但它不起作用：

$(document).ready(function(){
    $("#myBtn").click(function () {
        $("#myModal").modal();
    });

}）;

$('#confirmPassword').on('click',
function (e) {
    var password = $('.confirmPassword').val();
    $.ajax({
        url: 'Account/Login',
        type: 'GET',
        data: { "password": password },
        contentType: 'application/json',
        dataType: "json",
    });
}

感謝您的任何建議。

Answer 1

嘗試將其用於HTML，看看它是否有效...這是我為使其正常工作所做的事情。

• 在輸入中添加名稱（名稱，電子郵件，RememberMe）以匹配ViewModel
• 在表單標簽上添加了操作（〜/帳戶/登錄）和方法（發布）
• 更改了按鈕類型以提交

希望這將有助於將模型傳遞給MVC控制器。 在控制器Post登錄方法的第一行中設置一個斷點，並查看是否在Model填寫時命中了斷點。

 <div class="modal-content"> <div class="modal-header" style="padding:35px 50px;"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4><span class="glyphicon glyphicon-lock"></span> Login</h4> </div> <div class="modal-body" style="padding:40px 50px;"> <form role="form" action="~/Account/Login" method="post"> <div class="form-group"> <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label> <input name="Email" type="text" class="form-control" id="usrname" placeholder="Enter email" > </div> <div class="form-group"> <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label> <input name="Password" type="text" class="form-control" id="psw" placeholder="Enter password" > </div> <div class="checkbox"> <label><input name="RememberMe" type="checkbox" value="" checked>Remember me</label> </div> <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <p>Not a member? <a href="#">Sign Up</a></p> <p>Forgot <a href="#">Password?</a></p> </div> </div> </div>