我如何可以动态加载的局部视图？
我的意思是我有这种说法，可以说ListProducts ，有我选择一些dropdownlists与产品等，并与这些我想选择的填充值的局部图，这将是一个div，这是看不见的，但之后onchange()事件将变得可见，并与特定的所选项目的数据。
Answer 1:
使用jQuery的$ .load（）与返回的局部视图控制器动作。
例如：
HTML
<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>
}
Answer 2:
您可以通过以下步骤做到这一点。 在你的控制器，返回的局部视图。
[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);
});
}
希望这可以帮助
Answer 3:
我相信你能做到像这个例子 ，只是用你的下拉菜单中更改事件来代替。 这是一个简单的jQuery电话，你可以找到更多的jQuery的网站。
$("#dropdown").change(function() {
$("#destination").load("/Products/GetProduct", $(this).val(),
function(result) {
// do what you need to do
});
});
第一个参数是你要打电话的细节视图。
第二个参数是所选择的值。
在$ .load函数的第三个参数是回调函数，在那里你可以解析的结果，你需要做什么。
如果你有多个选择$（本）.VAL（），这将使你所选择的选项数组。
如果你只想要返回一个JSON对象，你可能要遵循这个例子 。
Answer 4:
使用AJAX :)
http://api.jquery.com/jQuery.ajax/
例：
$.post(window.gRootPath + "Customer/PartialView", { Question: questionId})
.done(function (data) {
$('#partialDiv').html(data.responceText);
});
Answer 5:
您可以使用Ajax调用操作的那么就使用jQuery，你想让它出现在页面中插入HTML字符串：
服务器端：
渲染局部视图串呈现在服务器上以HTML字符串局部视图，当你需要通过AJAX局部视图添加到ASP.NET MVC页面是有用的。
客户端：
$('#yourDdl').change(function()
{
$.get('/InsertPartialViewUsingAjax', function (data)
{
$('#container').html(data);
});
});
Answer 6:
下面的文章将告诉您如何以最小的JavaScript做到这一点。 基本上你返回HTML而不是JSON你的响应对象。
https://www.simple-talk.com/content/article.aspx?article=2118
文章来源: Dynamically load Partial Views
