在MVC中使用json对象返回视图

时间:2016-09-08 19:16:15

标签: jquery json asp.net-mvc

我在MVC Controller中有一个登录用户的方法。我需要返回Json Object,所以当它成功时它应该重定向到另一个动作(搜索动作),否则它需要保持同一页面并显示登录失败消息。 这是控制器代码:

        <?php
            if(isset($_SESSION['wrong'])) {
                echo "<p class='error'>Authentication failed.</p>";
                session_destroy();
            }
        ?>

在我看来:

    [HttpPost]
    [Route("login")]
    public JsonResult Login(LogInRequest logInRequest)
    {
        LogInResponse response = new LogInResponse();
        response.ReturnUrl = Url.Action  ("Search", "ContreollerName");             
 try
        {
            if (ModelState.IsValid)
            {
               .....
                if (logInRequest.UserName == "test")
                {
                    response.IsSuccessfull = true;
                }
                else
                {
                    response.IsSuccessfull = false;
                    response.ErrorDescription = MessageStrings.IncorrectUserName;
                }
            }
        }
        catch (Exception exception)
        {
            response.ErrorDescription = MessageStrings.ServerError;
            response.IsSuccessfull = false;
        }
        return Json(response, JsonRequestBehavior.AllowGet);
    }

    [Route("Search")]
    public ActionResult Search()
    {
     ......
        return View();
    }

但是我尝试的任何东西都是返回json对象而不是视图,我尝试在jquery中放入一些代码但是它甚至不用于jquery方法并且只显示这样的屏幕:

  @model CarFinance.Garage.Web.Models.LogInRequest
 <script src="~/Scripts/Login/login.js"></script>
 @using (Html.BeginForm("Login", "ContreollerName", FormMethod.Post))
{
    @Html.AntiForgeryToken()
        <table>
        <tr>
            <td><label>UserName:</label></td>
            <td>
                <input name="UserName" type="text" placeholder="UserName" title="UserName" class="span_12" />
            </td>
        </tr>
        <tr>
            <td><label>Password:</label></td>
            <td>
                <input name="Password" type="password" placeholder="Password" title="password" class="span_12" />
            </td>
        </tr>
        <tr>
            <td colspan="2"><input id="btnLogin" type="submit" value="Log In" /></td>
        </tr>
    </table>
}

我尝试在jquery中使用一些代码,但即使它没有进入:

{
 ReturnUrl: "/Search",
 IsSuccessfull: true,
 ErrorDescription: 
 ValidationErrors: [ ]
 }

.......

1 个答案:

答案 0 :(得分:1)

您的Login方法仅返回JSON数据。所以你应该解析响应json并根据IsSuccessful属性值重定向到新的URL

您需要确保您的表单是通过ajax提交的。您可以使用jQuery serialize方法和$.post来执行此操作。

$(function(){

    //Listen to the form submit event
    $("form").submit(function(e){
      // Prevent the default form submit behavior since we are doing ajax submit
      e.preventDefault();  

      //Get the url to which form should be submitted
      var url =$(this).closest("form").attr("action");
      //do an ajax post with serialized for data

      $.post(url,$(this).closest("form").serialize(),function(response){
          //Check the response and do needful.
          if(response.IsSuccessfull)
          {
             window.location.href=response.ReturnUrl;
          }
          else
          {
            alert("Login failed");
          }
      });   

    });
});

假设您没有任何其他js代码劫持表单提交且页面中没有js错误,这应该可以正常工作。