MVC RedirectToAction 通过 ajax jQuery 在knockoutjs 中调用不起作用

MVC RedirectToAction through ajax jQuery call in knockoutjs is not working

提问by shresthaal

I am building a MVC3 web application and I am using knockoutjs. There are two views in the application. SetUpNewCompany and ManageAccount. To Set up a new company the user first enters the account number and clicks search. If the account number already exists the user can click on a button to go to the ManageAccount view. In the SetUpNewCompanyController I redirect using the RedirectToAction method. However, when the Index2 action in ManageAccount is executed the view is not displayed. If I type in the complete URL the view is displayed.

我正在构建一个 MVC3 Web 应用程序，并且正在使用 Knockoutjs。应用程序中有两个视图。设置新公司和管理帐户。要建立新公司，用户首先输入帐号并单击搜索。如果帐号已经存在，用户可以单击按钮转到 ManageAccount 视图。在 SetUpNewCompanyController 中，我使用 RedirectToAction 方法重定向。但是，当执行 ManageAccount 中的 Index2 操作时，不会显示视图。如果我输入完整的 URL，就会显示视图。

SetUpNewCompanyController.cs

设置新公司控制器.cs

[HttpPost]
 public RedirectToRouteResult RedirectToManageAccount(string accountNumber)
 {
        return RedirectToAction("Index2", new RouteValueDictionary(new {controller=
            "ManageAccount", companyId = "7e96b930-a786-44dd-8576-052ce608e38f" }));
 }

This above is called by the function below when a button is clicked

当单击按钮时，上面的函数由下面的函数调用

self.redirectToManageAccount = function () {
        var accountNumber = "7e96b930-a786-44dd-8576-052ce608e38f";
        $.ajax({
            type: "POST",
            url: "/SetUpNewCompany/RedirectToManageAccount",
            data: { accountNumber: accountNumber },
            success: function (data) {
            },
            error: function () {
            }
        });
 }

ManageAccountController.cs

ManageAccountController.cs

public ActionResult Index2(String companyId)
    {
        var viewModel = new Models.Index();

        List<String> compList = new List<String>();
        compList.Add("MyCompany");

        List<String> usersList = new List<String>();
        usersList.Add("User1");

        viewModel.Users = usersList;
        viewModel.Companies = compList;
        viewModel.CompanyId = companyId;
        viewModel.Role = "Role1";

        return View("ManageAccount",viewModel);
    }

The URL that is generated is

生成的网址是

http://localhost:53897/ManageAccount/Index2?companyId=7e96b930-a786-44dd-8576-
052ce608e38f

The console window in Firebug shows

Firebug 中的控制台窗口显示

GET http://localhost:53897/ManageAccount/Index2?companyId=7e96b930-a786-44dd-8576-
052ce608e38f 200 OK and the spinner keeps spinng

Also, how do I get the URL below instead of the one with querystring

另外，如何获取下面的 URL 而不是带有查询字符串的 URL

http://localhost:53897/ManageAccount/Index2/7e96b930-a786-44dd-8576-052ce608e38f

回答by twoflower

Since you use AJAX to call the RedirectToManageAccountaction method, you are responsible for handling its response yourself and as your successhandler function is empty, you are effectively ignoring whatever arrives as a response.

由于您使用 AJAX 调用RedirectToManageAccountaction 方法，您负责自己处理它的响应，并且由于您的success处理程序函数为空，因此您实际上忽略了作为响应到达的任何内容。

If you want to force a redirect from within the AJAX response handler, I suggest

如果您想从 AJAX 响应处理程序中强制重定向，我建议

1. Modifying your action method as follows

   [HttpPost]
   public ActionResult RedirectToManageAccount(string accountNumber)
   {
       var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index2", "ManageAccount", new { companyId = "7e96b930-a786-44dd-8576-052ce608e38f" });
       return Json(new { Url = redirectUrl });
   }
   

2. Updating your AJAX call in this way

   self.redirectToManageAccount = function () {
     var accountNumber = "7e96b930-a786-44dd-8576-052ce608e38f";
     $.ajax({ type: "POST",
              url: "/SetUpNewCompany/RedirectToManageAccount",
              data: { accountNumber: accountNumber },
              dataType: 'json',
              success: function (response) {
                  window.location.href = response.Url;
              },
              error: function () {
              }
     });
   }
   

1. 修改您的操作方法如下

   [HttpPost]
   public ActionResult RedirectToManageAccount(string accountNumber)
   {
       var redirectUrl = new UrlHelper(Request.RequestContext).Action("Index2", "ManageAccount", new { companyId = "7e96b930-a786-44dd-8576-052ce608e38f" });
       return Json(new { Url = redirectUrl });
   }
   

2. 以这种方式更新您的 AJAX 调用

   self.redirectToManageAccount = function () {
     var accountNumber = "7e96b930-a786-44dd-8576-052ce608e38f";
     $.ajax({ type: "POST",
              url: "/SetUpNewCompany/RedirectToManageAccount",
              data: { accountNumber: accountNumber },
              dataType: 'json',
              success: function (response) {
                  window.location.href = response.Url;
              },
              error: function () {
              }
     });
   }
   

As for your second question:

至于你的第二个问题：

Also, how do I get the URL below instead of the one with querystring http://localhost:53897/ManageAccount/Index2/7e96b930-a786-44dd-8576-052ce608e38f

另外，如何获取下面的 URL 而不是带有查询字符串的 URL http://localhost:53897/ManageAccount/Index2/7e96b930-a786-44dd-8576-052ce608e38f

You just have to define an appropriate route entry for this URL in your RegisterRoutes()function:

你只需要在你的RegisterRoutes()函数中为这个 URL 定义一个合适的路由条目：

routes.MapRoute(null,
                "ManageAccount/Index2/{companyId}",
                new { controller = "ManageAccount",
                      action = "Index2" }                            
);

---

---

EDIT: As your AJAX call only serves to call an action method which causes a redirect, you can simplify it in a following way, provided you in this point (on the client side) know the companyIdalready:

编辑：由于您的 AJAX 调用仅用于调用导致重定向的操作方法，您可以通过以下方式简化它，前提是您在这一点上（在客户端）companyId已经知道：

self.redirectToManageAccount = function () {
    var companyId = "12345";
    window.location.href = '@(Html.ActionUri("Index2", "ManageAccount"))?companyId=' + companyId;
}

where I used this extension method

我在哪里使用了这个扩展方法

public static string ActionUri(this HtmlHelper html, string action, string controller)
{
    return new UrlHelper(html.ViewContext.RequestContext).Action(action, controller);
}