2

我创建了一个简单的登录表单，我想通过 ajax 进行验证。

显示 MVC 产生的服务器端验证错误的最合适方法是什么？是否将错误转换为 JSON 结果并适当地删除错误消息？如果不是，那会是什么？

目前我所拥有的发布正确，但整个表格都回来了。目标只是在没有回发/刷新的情况下在表单上显示服务器端错误。在此先感谢...这是我的代码：

主视图 - Login.vbhtml

@ModelType UHCO_MVC_Agency.LoginModel

<div class="error-container">@Html.ValidationSummary(True)</div>
<div class="row-fluid">
    <div class="span12">
        <div id="login-form" class="span6">
            @Using Html.BeginForm()
               @<fieldset>
                  <legend>Log in to your account now</legend>
                  <div class="row-fluid">
                     <div class="span12">
                        @Html.LabelFor(Function(m) m.UserName)
                        @Html.TextBoxFor(Function(m) m.UserName, New With {.class = "span12", .placeholder = "Username"})
                        @Html.ValidationMessageFor(Function(m) m.UserName)
                     </div>
                  </div>
                  <div class="row-fluid">
                     <div class="span12">
                        <label for="Password">Your password</label>
                        @Html.PasswordFor(Function(m) m.Password, New With {.class = "span12", .placeholder = "Password", .type = "password"})
                        @Html.ValidationMessageFor(Function(m) m.Password)
                     </div>
                  </div>
                  <div class="row-fluid">
                     <div class="span12">
                        <label for="RememberMe" class="checkbox clearfix">
                           @Html.CheckBoxFor(Function(m) m.RememberMe)
                           Remember me next time I visit
                        </label>
                     </div>
                  </div>
                  <button type="submit" class="btn btn-primary input-small" value="submit">Log in</button>
               </fieldset>
            End Using
         </div>
      </div>
</div>

控制器 - AccountController.vb

<HttpPost()> _
Public Function Login(ByVal model As LoginModel, ByVal Username As String, ByVal Password As String, ByVal returnUrl As String) As ActionResult
   Dim res As New LoginResponse()
   Try
      'login here
   If Not String.IsNullOrEmpty(returnUrl) AndAlso Url.IsLocalUrl(returnUrl) Then
      res.Status = "Success"
      Return RedirectToAction("Welcome", "Account")
   End If
   Catch ex As Exception
      If Not HttpContext.Request.IsAjaxRequest() Then
         ModelState.AddModelError("", ExceptionWrapper.Wrap(ex).ExceptionMessage())
         Return View("Login", model)
      Else
         res.Status = "Failed"
         res.Errors.Add(ExceptionWrapper.Wrap(ex).ExceptionMessage())
         Return Json(res)
      End If
   End Try
   ' If we got this far, something failed, redisplay form
   Return View(model)
End Function

应用程序.js

$("#login-form form").live().submit(function (e) {
  e.preventDefault();
  alert("ok");
});
4

2 回答 2

1

这是解决方案的 C# 版本。我相信，转换成相应的VB.NET版本应该很容易

使用JSON绝对是一个很好的方法。

第一件事。我将更改POST操作方法来处理我对 Ajax 请求的请求并返回JSON响应。

为了保持我的错误响应，我将创建一个这样的类

public class LoginResponse
{
  public string Status { set;get;}
  public List<string> Errors { set;get;}

  public LoginResponse()
  {
    Errors=new List<string>();   
  }       
}

在我们的POST动作方法中

[HttpPost]
public ActionResult Login(LoginModel model)
{
  if(Request.Ajax)
  {
       var res=new LoginResponse();
     //Do your Validations, If everything is fine send Success JSON
        res.Status="Success";

     //else, Lets return a JSON with errors
        res.Status="Failed";
        res.Errors.Add("Email does not exist in Earth and Mars");
        res.Errors.Add("Password contain the word black magic");

     return Json (res);
  }
  else
  {
     //Do the normal Processing for Non Ajax requests here
  }
}

所以如果有一些错误你想返回给客户端，你会以这种格式发送 JSON

{
    "Status": "Failed",
    "Errors": [  "Email does not exist",  "Passoword is worse"  ]
}

如果一切正常，我们将像这样发送 JSON

{
    "Status": "Success"
}

现在在我们看来，我们将摆脱 Ajax 表单并使用带有一些纯 jQuery 的 Normal 表单标签。

@ModelType UHCO_MVC_Agency.LoginModel
@using(Html.BeginForm())
{
  //Here your for elements

  <input type="submit" id="btnSubmit"/>
}
<script type="text/javascript">

$(function(){
   $("#btnSubmit").click(function (e) {
      e.preventDefault();
     $.post("@Url.Action("Login","User")", $("form").serialize(), function (r) {
       if(r.Status=="Success")
       {
         //Login is success . do whatever you want.
       }
       else
       {
         //Lets get the Errors from our JSON
         $.each(r.Errors,function(index,item){
             //Lets show the error
              $("#errorSummary").append(item);
         }  
       }
     });

});    
</script>

编辑：像这样更改你的 js 代码，看看会发生什么

$("#login-form form").live('submit', function(e){
   e.preventDefault();
  //the code

});
于 2012-08-31T20:06:20.043 回答
0

无论如何，我不是一个 VB 人，但我认为你需要做的是：

1）在您的控制器中，您需要检查并查看您是否通过 AJAX 到达。您可以发送一条额外的信息以及数据来表明这一点，或者使用SERVER['HTTP_X_REQUESTED_WITH']并检查大多数常见库发送的 XMLHTTPRequest。

2) 如果页面实际上是通过 AJAX 请求的，那么您可以在打包输出时采用不同的过程。仅返回 JSON，然后在操作 DOM 的客户端解析它。

于 2012-08-31T20:07:23.133 回答