MVC RedirectToAction through ajax jQuery call in knockoutjs not working

Question

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

SetUpNewCompanyController.cs

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

This is called by the function below when the button is pressed.

 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

 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); } 

URL generated

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

The Firebug console window displays

 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 lower than the one that has querystring

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

Answer 1

Since you use AJAX to call the RedirectToManageAccount action method, you are responsible for processing your response yourself, and since your success handler function is empty, you actually ignore everything that comes as an answer.

If you want to force redirect from an AJAX response handler, I suggest

• Modify 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 }); } 

• This way your AJAX call is updated

   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 () { } }); } 

Regarding your second question:

Also, how do I get the URL below, and not the one that has the request http://localhost:53897/ManageAccount/Index2/7e96b930-a786-44dd-8576-052ce608e38f

You just need to determine the appropriate route entry for this URL in your RegisterRoutes() function:

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

---

EDIT . Since the AJAX call serves only to call the action method that causes the redirection, you can simplify it as follows if you already know companyId at this moment (on the client side):

 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); }