How to call partial view through ajax in mvc3

Question

I need to call a partial view through ajax. I have tried the following, but I am not sure how to complete it.

$("#UserName").change(function () {
        var userid = $("#UserName").val();
        var ProvincialStateID = $("#State").val();
        var Hobbyid = $("#Hobby").val();
        var Districtid = $("#DistrictNames").val();
        var Homeid = $("#Hobbyhome_EstablishmentId").val();
        var urlperson = '@Url.Action("FetchPersonByUserName")';
        $.ajax({
            type: "POST",
            url: urlperson,
            data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid },
            success: function (data) { 
           //Dont know what to write here
        });
    });

Here is the function that I have written in my Controller:

 [HttpPost]
    public ActionResult FetchPersonByUserName(int userid,int stateid,int districtid,int homeid,int Hobbyid)
    {
      //Code to fetch the data in the partial using all parameters
      return PartialView("_LearnerAssociationGridPartial", list);
    }

When I click on a dropdown the ajax gets called and I want the function which is called through ajax to redirect it to the partial view. Please help me because currently I am not able to display my partial view

possible duplicate of [How to call a partial view through ajax in MVC3](http://stackoverflow.com/questions/10430269/how-to-call-a-partial-view-through-ajax-in-mvc3) — nemesv, May 03 '12 at 12:17
[This post][1] would most likely answer your question.. [1]: http://stackoverflow.com/questions/5248183/html-partial-vs-html-renderpartial-html-action-vs-html-renderaction — Sameer Anand, May 03 '12 at 12:20

cpoDesign · Accepted Answer · 2014-03-31T08:31:39.950

4

What you need is something like

$.ajax({
   type: "POST",
   url: urlperson,
   data: { userid: userid, 
           stateid: ProvincialStateID, 
           hobbyid: Hobbyid, 
           districtid: Districtid, 
           homeid: Homeid },
    success: function (data) { 
          var result = data; 
          $('targetLocation').html(result);
    }
   });

it is recomended to not use data straight from variable but you can. Now target location is where you want the result to be displayed to.

See more information in here:

http://api.jquery.com/jQuery.ajax/

As to slow fetching data, try optimalize your query

Update For nhibernate running slow, try http://www.hibernatingrhinos.com/products/nhprof which is nhibernate profiler, for paid version, or try sql profiler to see what is query is beeing executed, often you can get much more that you would expect and or really slow query due to complexity of the query.

edited Mar 31 '14 at 08:31

answered May 03 '12 at 12:26

cpoDesign

8,953
13
62
106

i did this wa u suggested but can u tell me what shal i write in contrller function(urlperson) – MVC_Nhibernate May 03 '12 at 12:44
@MVC_Nhibernate not sure what do you mean? – cpoDesign May 03 '12 at 18:17
het thanx it was working only that data ws gettin fetched slow – MVC_Nhibernate May 04 '12 at 09:14

score 3 · Answer 2 · answered May 03 '12 at 12:22

I dont understand what you mean by redirect to the parial view. Usually people use ajax and Partial views to get part of a page without a page refresh ( you might have seen this kind of behaviour in this site/facebook/twitter etc..) So i guess you probably want to show the data you are fetching asynchronosly to be shown in a part of your current page. you can do that in your success handler

$.ajax({
        type: "POST",
        url: urlperson,
        data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid },
        success: function (data) { 
          $("#divUserInfo".html(data);
        }
 });

Assumung you have a div with id divUserInfo in your current page.

If you really want to redirect after the ajax post, you can do it like this.

$.ajax({
        type: "POST",
        url: urlperson,
        data: { userid: userid, stateid: ProvincialStateID, hobbyid: Hobbyid, districtid: Districtid, homeid: Homeid },
        success: function (data) { 
          window.location.href="Why-I-need-Ajax-Then.php";
        }
 });

Personally, I dont use HttpPost (both in client and server) If it is a method to GET some data. I simpy use the jquery get or load.

$.get("yourUrl", { userid: userid, stateid: ProvincialStateID } ,function(data){
  $("#divUserInfo".html(data);
});

yai did what u suggested in the first ajax function and dats wat i m exactly looking for but can u tell u what shall i write in the controller function or shal i leave it as it is — MVC_Nhibernate, May 03 '12 at 12:42
@MVC_Nhibernate : I dont know what you want to do in your controller. If you are looking for changing the POST way to GET way for getting some info ( ex : GetUser), just take out the [HttpPost] verb above the method name. By default it is GET method. Remember that none of the HttpPost calls can access this mehod any more( both from ajax and normal form post) — Shyju, May 03 '12 at 12:47

How to call partial view through ajax in mvc3

2 Answers2

Linked