ASP .NET MVC问题与Ajax.BeginForm替换JSON数据视图的所有内容

问题描述

我在2015年VS创建了一个示例ASP.NET MVC的网站，并在视图中我使用的扩展Ajax.BeginForm后登录凭据控制器，并在回调的onSuccess我要检查服务器错误，如果任何演出错误用户一样 - 重定向到主页，这里是code（它返回错误总是故意测试回调）：

型号

  [必需]
公共字符串用户名{获得;组; }
[需要]
公共字符串密码{搞定;组; }
 

查看

 ＆LT;脚本＆GT;
    功能onLogInSuccess（结果）{
        / *
          而不是让这里从返回的结果后
          控制器（浏览器）将替换所有的观点：
          {地位：ERROR，消息：无效的电子邮件或密码，RETURNURL：/}
        * /
        如果（result.status ===OK）{
            window.location.href = result.returnUrl;
        }其他{
            警报（result.message）;
        }
    }    $（＃buttonLogIn）。在（'点击'，功能（E）{
        $（＃formLogIn）提交（）。
    }）;
＆LT; / SCRIPT＆GT;
＆lt;节ID =登录表单＆GT;
@using（Ajax.BeginForm（登录，自定义，空，新AjaxOptions {列举HTTPMethod =POST的onSuccess =onLogInSuccess}，{新@class =形横，角色=形式， ID =formLogIn}））
{
    @ Html.AntiForgeryToken（）
    ＆LT; H4＆GT;登录：LT; / H4＆GT;
    ＆LT;小时/＆GT;
    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT;标签ID =loginValidation级=COL-MD-12验证标签＆GT;＆LT; /标签＆gt;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT;标签类=COL-MD-12控制标签为=LogInUsername＆GT;用户名和LT; /标签＆gt;
        ＆LT; D​​IV CLASS =COL-MD-12＆GT;
            ＆LT;输入类=表格控ID =LogInUsernameNAME =用户名类型=文本值=/＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT;标签类=COL-MD-12控制标签为=LogInPassword＆GT;密码和LT; /标签＆gt;
        ＆LT; D​​IV CLASS =COL-MD-12＆GT;
            ＆LT;输入类=表格控ID =LogInUsernameNAME =密码TYPE =密码值=/＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT; D​​IV CLASS =COL-MD-偏移4 COL-MD-12＆GT;
            ＆LT;输入类型登陆级=按钮ID =buttonLogIn值= =BTN BTN-默认的/＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
}
＆LT; /节＆gt;
 

控制器

  [HttpPost]
[ValidateAntiForgeryToken]
公共JsonResult登录（LoginModel证书）
{
    字符串RETURNURL =/;
    字符串状态= AsyncRequestStatus.ResultError; //错误
    字符串消息=无效的电子邮件或密码。    返回JSON（新{状态=状态，消息=消息，RETURNURL = RETURNURL}）;
}
 

解决方案

如果您只显示你的登陆返回的JSON（）方法，那么它的，因为你有没有包括 jquery.unobtrusive-ajax.js 文件在您的视图。其结果是， Ajax.BeginForm（）回落到做一个正常的提交

I have created a sample ASP.NET MVC website in VS 2015 and in a view i am using the extension Ajax.BeginForm to post login credentials to controller, and on OnSuccess callback i want to check for server errors and if any show the error to user else - redirect to home page, here is the code (It returns always error intentionally to test the callback):

Model

[Required]
public string Username { get; set; }
[Required]
public string Password { get; set; }

View

<script>
    function onLogInSuccess(result) {
        /*
          Instead of getting here after returning the result from 
          Controller all the view(in the browser) is replaced with:
          {"status":"ERROR","message":"Invalid Email or Password.","returnUrl":"/"}
        */
        if (result.status === "OK") {
            window.location.href = result.returnUrl;
        } else {
            alert(result.message);
        }
    }

    $("#buttonLogIn").on('click', function (e) {
        $("#formLogIn").submit();
    });
</script>
<section id="loginForm">
@using (Ajax.BeginForm("LogIn", "Custom", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "onLogInSuccess" }, new { @class = "form-horizontal", role = "form", id = "formLogIn" }))
{
    @Html.AntiForgeryToken()
    <h4>Login:</h4>
    <hr />
    <div class="form-group">
        <label id="loginValidation" class="col-md-12 validation-label"></label>
    </div>
    <div class="form-group">
        <label class="col-md-12 control-label" for="LogInUsername">Username</label>
        <div class="col-md-12">
            <input class="form-control" id="LogInUsername" name="Username" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-12 control-label" for="LogInPassword">Password</label>
        <div class="col-md-12">
            <input class="form-control" id="LogInUsername" name="Password" type="password" value="" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-4 col-md-12">
            <input type="button" id="buttonLogIn" value="Log in" class="btn btn-default" />
        </div>
    </div>
}
</section>

Controller

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult LogIn(LoginModel Credentials)
{
    string returnUrl = "/";
    string status = AsyncRequestStatus.ResultError; //"ERROR"
    string message = "Invalid Email or Password.";

    return Json(new { status = status, message = message, returnUrl = returnUrl });
}

解决方案

If your displaying only the json returned by your LogIn() method, then its because you have not included jquery.unobtrusive-ajax.js file in your view. As a result, Ajax.BeginForm() falls back to making a normal submit

这篇关于ASP .NET MVC问题与Ajax.BeginForm替换JSON数据视图的所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！