在成功向ASP.NET MVC控制器發送jQuery Ajax請求后，如何運行JavaScript函數？

Question

我正在使用一個具有登錄/注冊功能的簡單網站。 我只想讓用戶在成功登錄或注冊后收到一條消息。

這是我的登錄方法

控制器：

[HttpPost]
    public ActionResult Login(string username,string password)
    {
        User loginTest = DB.Users.Where(a => a.User_Name.Equals(username) && a.User_Password.Equals(password)).FirstOrDefault();
        if (loginTest != null)
        {


            //some code
        }
        else
        {
            return Redirect(Request.UrlReferrer.ToString());
        }
    }

我正在這樣調用登錄方法

 @using (Ajax.BeginForm("Login", "Home", new AjaxOptions() { UpdateTargetId = "logged-in", InsertionMode = InsertionMode.Replace }))
                        {
                         <input type="text" />
                         <input type="password" />
                         <input type="submit" value="login">
                         }

如果登錄成功，這是我要運行的javascript函數。

  <script type="text/javascript">
    function JSalert(){
swal("Logged in successfully");
     }
  </script>

我已經加了

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

我測試了按鈕單擊時的功能，該功能是否起作用，我對此還很陌生，我想知道在用戶登錄后如何調用此功能。

我已經檢查了這些鏈接，但無法獲得任何幫助。

Ajax成功后調用JavaScript函數

回發后運行javascript函數

謝謝。

Answer 1

重定向后，有幾種顯示警報或任何消息的方法。

您可以在重定向用戶時在查詢字符串中設置一些標志。 在您的Java腳本代碼中，檢查該標志是否存在，並向用戶顯示消息。
在渲染視圖時在其中設置一個Java腳本變量，然后檢查該變量是否顯示消息。
您也可以使用本地存儲或創建cookie，但這從來都不是首選。

在您的重定向語句中，使用以下代碼

return Redirect(Request.UrlReferrer.ToString()+"login_success=1");

在您的ajax成功中，使用以下代碼，它將起作用

if(window.location.href.indexOf("login_success=1")){
//call your function
}

Answer 2

您可以使用：

   using (Ajax.BeginForm("Login", "Home", new AjaxOptions { HttpMethod = "Post",  OnSuccess = "onSuccess" })){
       //your code
    }

在您的js中：

function onSuccess(result) {
   //return your message here
}

Answer 3

使用這個方法

@using (
Ajax.BeginForm("Register", "Account", null, new AjaxOptions(){
HttpMethod = "POST",OnSuccess = "OnSuccess" 
}, new { 
@class = "form-horizontal", role = "form" 
}))
{
}

JS功能：

 function OnSuccess(response) {
        if (response.status === 'validationerror') {
           //your code
        } else {
           //your code
        }
    }

Answer 4

歡迎使用堆棧溢出。 您不必使用該Ajax.BeginForm 。 您可以編寫一些純HTML。

<form>
    <input type="text" id="username" placeholder="login">
    <input type="text" id="password" placeholder="password">
    <input type="button" value="Log In" id="postIt">
</form>

為了進行Ajax調用，請將一些JavaScript / jQuery代碼添加到同一cshtml文件中。

<script>
$("#postIt").click(function() {
    postIt();
});
function postIt() {
    var usr = $("#username").val();
    var pwd = $("#password").val();
    $.ajax({
        type: "POST",
        url: "/Login/LogMeIn",
        data: { "Username": usr, "Password": pwd },
        success: function(data) {
            if (data.result) {// logged in
                JSalert(data.result);
            } else {// unauthorized
                JSalert(data.result);
            }
        }
    });
}
function JSalert(msgType) {
    if (msgType) {
        swal("Logged in successfully", "Welcome to StackOverflow", "success");
    } else {
        swal("You're not authorized", "Welcome to StackOverflow", "error");  
    }
}
</script>

然后，將簡單的登錄方法添加到控制器中。

[HttpPost]
public JsonResult LogMeIn(LoginModel data)
{
    if (data.Username == "rightUser" && data.Password == "rightPass")
    {
        return Json(new { result = true, message = "welcome" });
    }
    return Json(new { result = false, message = "unauthorized" });
}

LoginModel.cs

public class LoginModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
    @RenderBody()
</body>
</html>

在成功向ASP.NET MVC控制器發送jQuery Ajax請求后，如何運行JavaScript函數？

問題描述

4 個解決方案

解決方案1
0 2019-02-12 07:59:32

解決方案2
0 2019-02-12 08:11:08

解決方案3
0 2019-02-12 08:33:32

解決方案4
0 已采納 2019-02-12 08:39:44

在成功向ASP.NET MVC控制器發送jQuery Ajax請求后，如何運行JavaScript函數？

問題描述

4 個解決方案

解決方案1 0 2019-02-12 07:59:32

解決方案2 0 2019-02-12 08:11:08

解決方案3 0 2019-02-12 08:33:32

解決方案4 0 已采納 2019-02-12 08:39:44

解決方案1
0 2019-02-12 07:59:32

解決方案2
0 2019-02-12 08:11:08

解決方案3
0 2019-02-12 08:33:32

解決方案4
0 已采納 2019-02-12 08:39:44