如何动态加载部分视图?
我的意思是,我有这个视图,比方说 ListProducts
,我在那里选择一些产品下拉列表等等,使用这些选择的值来填充一个部分视图,这个部分视图将位于一个不可见的 div 中,在 onchange()
事件后变为可见,并根据所选项目的具体数据进行数据呈现。
如何动态加载部分视图?
我的意思是,我有这个视图,比方说 ListProducts
,我在那里选择一些产品下拉列表等等,使用这些选择的值来填充一个部分视图,这个部分视图将位于一个不可见的 div 中,在 onchange()
事件后变为可见,并根据所选项目的具体数据进行数据呈现。
使用jQuery的$.load()与返回局部视图的控制器操作配合使用。
例如:
<script type="text/javascript">
$(document).ready(function()
{
$("#yourselect").onchange(function()
{
// Home is your controller, Index is your action name
$("#yourdiv").load("@Url.Action("Index","Home")", { 'id' : '123' },
function (response, status, xhr)
{
if (status == "error")
{
alert("An error occurred while loading the results.");
}
});
});
});
</script>
<div id="yourdiv">
</div>
public virtual ActionResult Index(string id)
{
var myModel = GetSomeData();
return Partial(myModel);
}
@model IEnumerable<YourObjects>
@if (Model == null || Model.Count() == 0)
{
<p>No results found</p>
}
else
{
<ul>
@foreach (YourObjects myobject in Model)
{
<li>@myObject.Name</li>
}
</ul>
}
[HttpGet]
public virtual ActionResult LoadPartialViewDynamically()
{
var query = _repository.GetQuery();
return PartialView("_PartialViewName", query);
}
然后在视图中你有一个空的div
<div id="partialgoeshere"></div>
然后使用jQuery加载部分视图:
function LoadPartialView() {
$.get("@Url.Action(MVC.ControllerName.LoadPartialViewDynamically())", { null }, function (data) {
$("#partialgoeshere").empty();
$("#partialgoeshere").html(data);
});
}
我相信你可以做类似于this example的事情,只需使用下拉菜单上的更改事件即可。这是一个简单的jQuery调用,你可以在jQuery网站上找到更多信息。
$("#dropdown").change(function() {
$("#destination").load("/Products/GetProduct", $(this).val(),
function(result) {
// do what you need to do
});
});
第一个参数是您需要调用详细信息的视图。
第二个参数是所选值。
$.load函数的第三个参数是回调函数,在其中可以解析结果并执行所需操作。
如果您有多个选择$(this).val(),那么它将为您提供所选选项的数组。
如果您只想返回Json对象,则可以参考此示例。
https://www.simple-talk.com/content/article.aspx?article=2118
http://api.jquery.com/jQuery.ajax/
例子:
$.post(window.gRootPath + "Customer/PartialView", { Question: questionId})
.done(function (data) {
$('#partialDiv').html(data.responceText);
});
您可以使用ajax调用操作,然后使用jQuery将html字符串插入到要显示的页面中:
服务器端:
将部分视图呈现为字符串 在服务器上呈现部分视图以获取html字符串,在通过AJAX添加部分视图到ASP.NET MVC页面时非常有用。
客户端:
$('#yourDdl').change(function()
{
$.get('/InsertPartialViewUsingAjax', function (data)
{
$('#container').html(data);
});
});