How to redirect to a new page (along with the model) on a JQuery ajax call in MVC3
I forgot the password where the user enters their username and clicks the "Check" button to check which group they are in. Based on the group, we need to display different partial views (for now, let's say it's a phone number) on the page. After filling in valid details on successful navigation to a new page where it will update its password, in case of failure I need to show an error message.
Now I'm having a hard time writing code for the highlighted.
Here is the code for the jquery ajax function that is triggered when the submit button is clicked
person = {UserName: $("#UserName").val(), Phone: $("#Phone").val() }
$.ajax({
type: 'POST',
url: '@Url.Action("ForgotPassword", "Customer")',
data: person,
dataType: 'json',
success: function (data) {
//This is the place I need help
if(data.IsDataValid){
// redirect to new page passing the model object
}
else{
//Show an error message without hiding the div
}
},
failure: function () {
}
});
Here is an example of a controller action
[HttpPost]
[ValidateInput(true)]
public ActionResult ForgotPassword(RegisterModel model)
{
if (Request.IsAjaxRequest())
{
Here is the logic which validates the user
return Json(new { regmodel = RegistrationModel })
}
//If it is not ajax call I want to return the view
if (isUsergroup1 == true)
{
return View("View1", RegistrationModel );
}
else if (isUsergroup2 == true)
{
return View("View2", RegistrationModel );
}
else
{
return View();
}
}
Please, help. thanks in advance
source to share
This is how we should do it. We cannot pass a model, we can only pass parameters in a link redirect. And we have to use link.replace as you can pass variables directly to Url.Action
person = {UserName: $("#UserName").val(), Phone: $("#Phone").val() }
$.ajax({
type: 'POST',
url: '@Url.Action("ForgotPassword", "Customer")',
data: person,
dataType: 'json',
success: function (data) {
//This is the place I need help
if(IsDataValid){
var link = "@Url.Action("Actionname", "Controllername", new { username = "1", phone ="2" })";
link = link.replace("1", data.username);
link = link.replace("2", data.phone);
alert(link);
window.location.href= link ;
}
else{
//Show an error message without hiding the div
}
},
failure: function () {
}
});
source to share
To address the part of your question that is answered right now:
if(IsDataValid){
// redirect to new page(
}
else{
//Show an error message without hiding the div
}
For redirection use window.location.replace('url to new page');
.
For the "error message" part, I would either use jQuery UI to display the dialog, or have a hidden div where you insert error messages, perhaps like this:
$('#errors').html(data.Errors).show();
It assumes you have some kind of property called Errors
that contains the validation messages for RegistrationModel
.
source to share