如何在MVC3中通过ajax调用部分视图

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,

我在MVC3中开发一个应用我需要在下拉菜单上显示partail视图我写了一个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:

我在controller中写了一个函数:

 [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.

ajax函数写在第一个视图中，下拉菜单写在第一个视图中。现在，在第一个视图中，单击下拉菜单，我希望数据显示在第二个视图中的网格中。

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>

}

}

2 个解决方案

#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.

这意味着当您第一次加载页面时，第二个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.

然后，您希望根据所选的值将部分视图加载到div中。首先，添加javascript来调用已经描述的操作。

$('#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.

ActionResult将返回HTML。在您的success函数中，您将其分配为div的HTML。

#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:

剃须刀引擎,MVC风格:

When you create the form with the code:

当您用代码创建表单时:

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

Replace the FormMethod.Post with

取代FormMethod。文章与

@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.

它的作用是在返回数据时，用ajax调用返回的数据替换已定义的标记。自动。

This way is to do it with the razor engine.

这种方法就是用剃须刀引擎。

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

如果你想用jquery的方法来做下面的事情:

$("#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 !

祝你好运!