How to call a partial view through ajax in MVC3

Question

I am developing an application in MVC3 I need to show a partail view on click of a dropdown For that i wrote an ajax,

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

and i wrote a function in controller as:

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

From here it goes in the partial view there i can also see the data
But while it comes in the frontend i am not able to see the data.
Please Help me maybe my ajax may be wrong please tell me where i am goin wrong.

this is my Main View:

@model HobbyHomesWebApp.ViewModel.LearnerAssociationViewModel
@{
    Layout = "~/Views/Shared/_LayoutPostLogin.cshtml";
}

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post))
{
     @Html.ValidationSummary(true)
     <table>
         <div>
             @{Html.RenderPartial("_LearnerAssociationWebPartial", Model.learner);}
         </div> 
     </table>
     <table>
         <div id="result">
             @{Html.RenderPartial("_LearnerAssociationGridPartial", Model.LearnerList);}
         </div>
     </table>
}

The ajax function is written in the first view and the dropdown is in the first view.
Now onclick of dropdown in first view i want the data to be displayed in a grid which is in the second view.

My first View is:

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post))
{
  <table>
    <tr>
        <td>
            @Html.Label(@Resources.selectusername)
        </td>
        <td>:</td>
        <td>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.Loginaccount.LoginAccountID, new SelectList(ViewBag.UserName, "LoginAccount.LoginAccountID", "FirstName"), "--Select UserName--", new { @id = "UserName" })
        </div>
        </td>
    </tr>
            </table>

}

Answer 1

Edit: OK so if I understand correctly, your view should look like this:

@model HobbyHomesWebApp.ViewModel.LearnerAssociationViewModel
@{
    Layout = "~/Views/Shared/_LayoutPostLogin.cshtml";
}

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post))
{
     @Html.ValidationSummary(true)
     <table>
         <tr>
         <td>
            <div>
                 @{Html.RenderPartial("_LearnerAssociationWebPartial", Model.learner);}
            </div> 
         </td>
         </tr>
     </table>
     <table>
         <tr>
         <td> 
             <div id="result">

            </div>
         </td>
         </tr>
     </table>
}

This means when you first load the page, nothing is displayed in the second div.

You then want to load a partial view in to the div based on the value selected. Firstly, add the javascript to call the action you have already described.

$('#NameOfYourDropDownList').change(function () {
    var userid = $('#NameOfYourDropDownList').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) {
            $('#result').html(data);
        }
    });
});

The ActionResult will return the HTML. In your success function, you are assigning this to be the HTML of the div.

Answer 2

I hope I understood what you wanted (don't shoot me if I didn't)

Let's assume for a minute that you have a tag

<div id="Returned-Content-Container">
</div>

I'll make 2 suggestion (choose what you like)

Razor engine, MVC style:

When you create the form with the code:

@using (Html.BeginForm("LearnerAssociation", "Registration", FormMethod.Post))

Replace the FormMethod.Post with

@using (Html.BeginForm("LearnerAssociation", "Registration", 
        new AjaxOptions() 
                            {
                                HttpMethod = "POST",
                                UpdateTargetId = "Returned-Content-Container",
                                InsertionMode = InsertionMode.Replace
                            })
        {
              // Your form fields go here
        }

What this does is upon return of the data it replaces the defined tag with the data returned from the ajax call. Automatically.

This way is to do it with the razor engine.

If you want to do it the jquery way just do the following:

$("#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) {
             // This places all data returned into the defined DOM element
             $('#Returned-Content-Container').html(data);
        }
    });
});

Hope this helps,

Good luck !