CODEWITHSUNDEEP
jqueryasp.netajaxasp.net-mvcasp.net-mvc-4
F11
F11

Reputation: 3806

load another view on ajax post

I have a view UserInformation where I am filling few user related information and posting those information to another View "AnotherView" using ajax post.

Now I want to take these inputs in action method "AnotherView" and load the view "AnotherView" with some datamodel.

When I am doing Ajax Post from view UserInformation to action method "AnotherView",It is going to action method "AnotherView",but it is still showing view UserInformation

Ajax call from view UserInformation

$.ajax({
    url: '/somecontroller/AnotherView/',
    data: {
        name: $.trim($('#mgr').val()),
        id: $('#id').val(),
        email: $.trim($('#hdnMgrmail').val())
    },
    cache: false,
    type: "POST",
    dataType: "html",
    success: function (data,
        textStatus, XMLHttpRequest) {
        alert('ok');
    }
});


[HttpPost]
public ActionResult AnotherView(few parametrs that is coming here)
{
      //create model using input params
      return View(with some model);
}

Upvotes: 1

Views: 2250

Answers (1)

Rion Williams
Rion Williams

Reputation: 76547

Since your target Controller Action is returning an ActionResult, then you can expect that it will be returning the rendered HTML (along with any data-binding that occurred).

So the data parameter of your success callback will actually contain this contents, so you can simply use a jQuery selector to determine where you want to output it using the html() function:

success: function (data, textStatus, XMLHttpRequest) {
    // data is your HTML content
    $(...).html(data);
}

It's worth noting that you may want to consider using the PartialView() method if you intend on this returning a small segment of content as opposed to any additional things (like the layout or other related views):

[HttpPost]
public ActionResult AnotherView(...)
{
     return PartialView(...);
}

Update

Since it was mentioned in the comments that it is preferred to have a complete refresh of the page, if that is the case, then you may consider simply submitting a form that posts to the target action and the submission event will handle navigating (and returning the entire action):

<form action='/somecontroller/AnotherView/' method='post'>
    <input id='mgr' name='name' />
    <input id='id' name='id' />
    <input id='hdnMgrmail' name='email' />
    <input type='submit' />
</form>

Upvotes: 1

Related Questions