使用 RedirectToAction 但控制保留在同一页面中

Question

Here is my Index page code ie JS code I am able to jump on controller action method ie URL: '/UserAccount/Login' but in Login action method I am redirecting to other pages..but controls remain on the same page这是我的索引页面代码，即 JS 代码，我可以跳转到 controller 操作方法，即 URL: '/UserAccount/Login' 但在登录操作方法中，我重定向到其他页面..但控件保留在同一页面上

enter code here
  <script type="text/javascript">

    function UserLogin() {

        var username = $("#txtUsername").val();
        var passcode = $("#txtPassword").val();

        $.ajax({
            url: '/UserAccount/Login',
            type: "POST",
            data: { 'username': username, 'passcode': passcode },
            dataType : 'json',
            traditional: true,
            contentType: "application/x-www-form-urlencoded",
            success: function (data) {
                alert(data.username);
                
        }
    });
       
        };

</script>



    [HttpPost]
    public ActionResult Login(string username, string passcode)
    {
        if (IsValidUser(username, passcode))
        {
            MaintainLoginDetails(username);
            return RedirectToAction("AdminDashboard");

        }
        else
        {
            ModelState.AddModelError("", "Your Username or password is invalid");
            return View();

        }
        
    }
  

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

As suggested i have added my view code below.I have created login page here.on button click i am calling controller action method and on action i wanted to redirect to another action/view.正如建议的那样，我在下面添加了我的视图代码。我在这里创建了登录页面。单击按钮时，我正在调用 controller 操作方法，并且在操作时我想重定向到另一个操作/视图。

    @model Spark.Models.Users
    @{
        ViewData["Title"] = "Home Page";
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Login Here</title>
        <link rel="stylesheet" type="text/css" href="~/css/login.css" />
        <script src="~/lib/jquery/dist/jquery.js" type="text/javascript"></script>
        <script src="~/lib/jquery/dist/jquery.min.js" type="text/javascript"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
        <script type="text/javascript">
                function UserLogin() {
    
                    var username = $("#txtUsername").val();
                    var passcode = $("#txtPassword").val();
    
                    //$.post("/UserAccount/Login", { username, passcode }, function (data) {
                    //    alert(data);
                    //});
    
                    $.ajax({
    
                        url: '/UserAccount/Login',
                        type: "POST",
                        data: { 'username': username, 'passcode': passcode },
                        dataType: 'json',
                        traditional: true,
                        contentType: "application/x-www-form-urlencoded",
                        success: function (data) {
                            alert(data.username);
    
                        }
                    });
                          
                };
    
        </script>
    </head>
<body>
    <div id="login">
        <div class="nlite_logo">
            <ul>
                <li><img src="~/images/login.png" width="107" height="50" alt="" /></li>
            </ul>
        </div>
        <form action="">
            <fieldset>
                <div><input type="text" id="txtUsername" required value="Username" onBlur="if(this.value=='')this.value='Username'" onFocus="if(this.value=='Username')this.value='' "></div>
                <div><input type="password" id="txtPassword" required value="Password" onBlur="if(this.value=='')this.value='Password'" onFocus="if(this.value=='Password')this.value='' "></div>
                <div><input type="submit" value="Login" class="login_Button_Btn" onclick="UserLogin()"></div>
            </fieldset>
        </form>
    </div>
</body>
    </html>

Answer 1

Below is work demo, you can refer to it.下面是工作演示，你可以参考它。

In RedirectController, change your return method to Json.在 RedirectController 中，将您的返回方法更改为 Json。

public class RedirectController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Login(string username, string passcode)
        {
            //do your staff...
            return Json(new { redirectToUrl = Url.Action("Privacy", "Redirect") });

            
        }
        public IActionResult Privacy()
        {
            return View();
        }
    }

In Index view,in Ajax call use "window.location.href = response.redirectToUrl;"在 Index 视图中，在 Ajax 调用中使用 "window.location.href = response.redirectToUrl;" to redirect to a specific page in success method.在成功方法中重定向到特定页面。

 <div class="row">
    <div class="col-md-4">
        <form  id="myform" enctype="multipart/form-data">
            <div class="form-group">
                <label class="control-label">username</label>
                <input id="txtUsername" name="username" class="form-control" />
            </div>
            <div class="form-group">
                <label class="control-label">passcode</label>
                <input id="txtPassword" name="passcode" class="form-control" />
            </div>
            
            <div class="form-group">
                <input type="button" id="update" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
    </div>
    
    @section Scripts
    {
    <script>
    
    var update = $('#update');
        update.click(function (event) {
            //stop submit the form, we will post it manually.
            event.preventDefault();
    
            // Get form
            var form = $('#myform')[0];
    
            // Create an FormData object
            var formData = new FormData(form);  
            
            $.ajax({
                url: '/Redirect/Login',
                data: formData,
                contentType: false,
                processData: false,
                type: 'POST',
                success: function (response) {
                    window.location.href = response.redirectToUrl;
                   
                }
                //success: function (result) {
                //    alert(result);
                });
            });
    
    </script>
    }

Result:结果：

使用 RedirectToAction 但控制保留在同一页面中

问题描述

1 个解决方案

解决方案1
0 2022-04-29 02:35:59

使用 RedirectToAction 但控制保留在同一页面中

问题描述

1 个解决方案

解决方案1 0 2022-04-29 02:35:59

解决方案1
0 2022-04-29 02:35:59