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.