Question

如何动态加载部分视图？

我的意思是我有这个观点，让我们说ListProducts，在那里我选择一些带产品的下拉列表，以及那些我想要填充局部视图的选定值，这将是一个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

我相信您可以执行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对象，则可能需要关注this example。

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字符串插入到您希望它出现的页面：

服务器侧

Render partial view to string 将服务器上的局部视图渲染为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

动态加载部分视图

6 个答案:

HTML

控制器

视图