Как запустить функцию JavaScript после успешного запроса jQuery Ajax к контроллеру ASP.NET MVC? - PullRequest
Новая
       3

Как запустить функцию JavaScript после успешного запроса jQuery Ajax к контроллеру ASP.NET MVC?

0 голосов
/ 12 февраля 2019

Я работаю на простом веб-сайте, который имеет функцию входа в систему / регистрации.Я просто хочу позволить пользователю получить сообщение после того, как он успешно войдет или зарегистрируется.

Вот мой метод входа

Контроллер: 

[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>

И я проверил функцию по нажатию кнопки, и она работает, я новичок в этом, и мне интересно, как вызвать эту функцию после входа пользователя.

Я уже проверил эти ссылки, но не смогполучить любую помощь.

Вызов функции javascript после успешного выполнения ajax

Запуск функции javascript после обратной передачи

Спасибо.

Ответы [ 4 ]

0 голосов
/ 12 февраля 2019

Добро пожаловать в переполнение стека.Вам не нужно использовать это 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>
0 голосов
/ 12 февраля 2019

Вы можете использовать: 

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

В вашем JS: 

function onSuccess(result) {
   //return your message here
}
0 голосов
/ 12 февраля 2019

Используйте этот метод 

@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
        }
    }
0 голосов
/ 12 февраля 2019

Существует несколько способов показать предупреждение или любое сообщение после перенаправления.

  1. Вы можете установить некоторый флаг в строке запроса при перенаправлении пользователя.В своем коде java-скрипта проверьте, существует ли флаг, покажите пользователю сообщение.
  2. Установите переменную java-script во время рендеринга представления и отметьте эту переменную, чтобы показать сообщение или нет.
  3. Вы также можете использовать локальное хранилище или создать cookie, но это никогда не является предпочтительным.

В своем заявлении на перенаправление используйте следующий код 

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

В вашем успехе ajax,используйте приведенный ниже код, он будет работать 

if(window.location.href.indexOf("login_success=1")){
//call your function
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...