MVC asp.net Ajax 表单动作返回 Json 结果答案

【问题标题】：MVC asp.net Ajax form action return Json resultMVC asp.net Ajax 表单动作返回 Json 结果
【发布时间】：2016-12-04 18:30:31
【问题描述】：

我在 MVC asp.net 中遇到了 Ajax 表单的问题。当我发布表单并尝试从操作返回 json 结果时，我的 Onsuccess 方法不会触发并且视图不会显示。只有 json 对象显示为好像 jquery.unobtrusive-ajax.js 不起作用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery.form.js" type="text/javascript"></script>

    <script type="text/javascript">
        function OnSuccess(response) {
            alert("oki");
            if (response.success == true) {
               
                $(location).attr('href', response.ReturnUrl);
            }
            else {
                $('form').clearForm();
                $("#message").css("display", "block");
            }
        }
    </script>
    <title>Login</title>
</head>
<body>
    
        @using (Ajax.BeginForm("login2",new {ReturnUrl=Request.QueryString["ReturnUrl"]}, new AjaxOptions
        {
            OnSuccess = "OnSuccess"
            
        }))
        {
           
            @Html.Label("Nom :", new { @class = "monlabel" })
            @Html.TextBoxFor(m => m.Login, new { placeHolder = "Nom", @class = "tb" })
            @Html.ValidationMessageFor(m => m.Login)
           
            @Html.Label("Mot de passe :", new { @class = "monlabel" })
            @Html.TextBoxFor(m => m.Password, new { placeHolder = "Mot de passe", @class = "tb" })
            @Html.ValidationMessageFor(m => m.Password)
            <input id="bouton" type="submit" value="Valider" /><br />
               
        
            
        }
    <div><p style="display:none" id="message">Authentification erronée</p></div>


</body>
</html>

 public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }


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

    public JsonResult login2(Models.Utilisateur utilisateur, string ReturnUrl)
    {


        Models.LoginDataContext MyDb = new Models.LoginDataContext();

        Models.Utilisateur tmpUser = null;
        ViewBag.result = "oki";
        tmpUser = MyDb.ValidateUser(utilisateur.Login, utilisateur.Password).FirstOrDefault();
        if (tmpUser != null)
        {
            Session["User"] = tmpUser;
            FormsAuthentication.SetAuthCookie(tmpUser.Login, false);
            //return RedirectToAction("AccesValider");
            if (ReturnUrl != null) return Json(new {success=true,@ReturnUrl=ReturnUrl},JsonRequestBehavior.AllowGet);
            else return Json(new {success=true,@ReturnUrl=FormsAuthentication.DefaultUrl },JsonRequestBehavior.AllowGet);
        }

        return Json(new {success=false,@ReturnUrl =""},JsonRequestBehavior.AllowGet);
    }

}

我得到这个结果：

{"success":true,"ReturnUrl":"/Home/Index"}

在浏览器中

【问题讨论】：

您的jquery.unobtrusive-ajax.js 未加载。有关任何错误，请参阅浏览器 console.log。以及该文件的文件路径。如有错误请指出谢谢。
或者UnobtrusiveJavaScriptEnabled在你的配置文件中没有设置为true。

标签： jquery asp.net json ajax

【解决方案1】：

要在 ASP.NET MVC 中使用任何 @Ajax 功能，您需要对 jquery.unobtrusive 库的有效引用。如果您收到 {"success":true,"ReturnUrl":"/Home/Index"} 作为响应，则说明您没有引用 jquery .unobtrusive 库正确。

您有两种选择：

1.在你的代码中替换这一行：

<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

有了这个：

<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>

2.如果不想使用CDN，可以安装jquery.unobtrusive nuget包。

2.1 在 Visual Studio 中点击工具 -> NuGet 包管理器 -> 包管理器控制台

2.2 输入Install-Package Microsoft.jQuery.Unobtrusive.Ajax 并回车。

2.3 将 jquery.unobtrusive-ajax.js 文件从 Visual Studio 解决方案资源管理器拖放到您的网页中以创建引用

【讨论】：