MVC Post Form using Ajax (from partial view) but without any redirect (remain on same main view page)

Question

I am new to MVC and need help in it. I have a main view (index.vbhtml) and this page is rendered successfully. I have a partial view (test.vbhtml) and this partial view is added to the index.vbhtml dynamically using jquery get method on occurring of an event.

$.get('@Url.Action("test", "abc")', function (data) {
                $('#partialViewRender').html(data);
            });

I am able to render this partial view successfully. I am adding partial view in this way because i have multiple partial views which will be rendered in similar fashion, like on occurrence of an event. all these partial views will be rendered in a same tag, partialViewRender, only one at a time.

inside these partial views, i need to form post occurs. Like clicking submit button on test partial view, form post occurs and post controller action is called. inside the action method, on the basis of selected value of drop down relevant data is fetched and need to be displayed to the user. this is the point where i am stuck. I don't want my main view to be redirected, i want same main view with partial view rendered with updated data. In other words i want to achieve similar behavior as we have in classic asp applications on code behind event.

i have tried both html submit button and Ajax.ActionLink for this purpose. but both of them redirects to the partialview url. i.e. localhost/test inside action method i have tried return with PartialView, View, RedirectToAction, Json but no success. all of them redirects to a new url.

here is the code from controller

<HttpGet>
    Function test() As ActionResult 'this is called on jquery get method

       'do some intializing data stuff
        Return PartialView("test")

    End Function

    <HttpPost>
    Function test(id As String) As ActionResult

        'fetch data on basis of id, this data needs to be shown in a grid

    End Function

any help will be a great deed. I am totally stuck here.

Are you trying to avoid a full page reload when the form in the test partial view is POSTed? Or are you happy with a full page reload, as long as the resulting page is the main View, with the correct partial inside it? — Matt Sach

Matt Sach Matt Sach · Accepted Answer · 2014-07-07T10:44:02

You could maintain the main view by using AJAX to post the form in the partial. The form's action would be the route to the controller action which handles it (which in your case would route to test(id as String)). That you've used $.get() means you should be able to adapt the code you already have to do $.post() instead.

You would need to use jQuery to attach an event handler to the form's submit event. In that handler, you can pick out the form's action attribute as the URL for the POST, read the form element values for the body of the POST, and your callback can be just as you've already used:

function (data) {
    $('#partialViewRender').html(data);
}

The handler can make the POST, the controller Action can return the partial View, and that content will be injected into the #partialViewRender element as on page load.

The alternative puts the emphasis on VB code. The original call to generate the partial content would have to specify which main View it is being called from, so that it can create a hidden field in the form containing that information. Then the Action which handles the POST from the form would need to read that hidden-field value to work out which main View to return, and how to write the dynamic $.get() statement in such a way that the test partial View will be generated as you want.

MVC Post Form using Ajax (from partial view) but without any redirect (remain on same main view page)

2 Answers