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

时间:2016-07-29 23:50:42

标签: jquery asp.net json ajax

我在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"}

在浏览器中

1 个答案:

答案 0 :(得分:0)

要在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中,单击工具 - &gt; NuGet包管理器 - &gt;包管理器控制台

2.2键入Install-Package Microsoft.jQuery.Unobtrusive.Ajax并按Enter键。

2.3将jquery.unobtrusive-ajax.js文件从Visual Studio Solution Explorer拖放到您的网页中以创建参考