如何通过AJAX在MVC3调用的局部视图 [英] How to call a partial view through ajax in MVC3
问题描述
我开发MVC3中的应用 我需要表现出点击下拉的partail视图 对于我写了一个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,
$("#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);
}
从这里进去的局部视图在那里,我也可以看到数据
但是,尽管它有前端我不能够看到的数据。
请帮我,也许我的ajax可能是错了,请告诉我在哪里,我要去错了。
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.
这是我的主要观点:
@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>
}
AJAX的功能是写在第一视图和下拉列表中的第一个视图。
现在的onclick下拉在第一视图的我想的要显示的数据,其中在所述第二视图中的网格。
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.
我的第一个观点是:
@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>
}
推荐答案
编辑:好,所以如果我理解正确的话,您认为应该是这样的:
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>
}
这意味着,当你第一次加载页面,没有显示在第二个 DIV
。
This means when you first load the page, nothing is displayed in the second div
.
您再要加载的局部视图中的 DIV
根据选择的值。首先,添加JavaScript调用你已经描述的动作。
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);
}
});
});
在的ActionResult
将返回HTML。在你的成功的功能,你指定这是的HTML的 DIV
。
The ActionResult
will return the HTML. In your success function, you are assigning this to be the HTML of the div
.
这篇关于如何通过AJAX在MVC3调用的局部视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!