动态加载局部视图答案

【问题标题】：Dynamically load Partial Views动态加载局部视图
【发布时间】：2012-07-03 14:46:53
【问题描述】：

如何动态加载局部视图？

我的意思是我有这个视图，比如说ListProducts，在那里我选择了一些带有产品等的下拉列表，并从我想要填充部分视图的那些中选择的值，这将在一个不可见但不可见的 div 中在onchange() 事件之后将变得可见并带有来自特定选定项目的数据。

【问题讨论】：

标签： asp.net-mvc-3 razor

【解决方案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>
}

【讨论】：

Ty，它的工作.. 我只是在传递一些数据时遇到问题抛出@Url.Action()，现在传递参数的语法是什么，仍然使用来自 jQuery 的负载

【解决方案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);

    });

}

希望对你有帮助

【讨论】：

【解决方案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。

【讨论】：

【解决方案4】：

使用 Ajax :)

http://api.jquery.com/jQuery.ajax/

例子：

$.post(window.gRootPath + "Customer/PartialView", { Question: questionId})
.done(function (data) {
    $('#partialDiv').html(data.responceText);
});

【讨论】：

【解决方案5】：

您可以使用 ajax 调用操作，然后使用 jQuery 将 html 字符串插入您希望它出现的页面：

服务器端：

Render partial view to string 将服务器上的部分视图呈现为 html 字符串，当您需要通过 AJAX 将部分视图添加到 ASP.NET MVC 页面时很有用。

客户端：

$('#yourDdl').change(function()
{
  $.get('/InsertPartialViewUsingAjax', function (data) 
  {
     $('#container').html(data);
  });
});

【讨论】：

【解决方案6】：

下面的文章告诉你如何用最少的 javascript 来做到这一点。基本上，您向响应对象返回 html 而不是 JSON。

https://www.simple-talk.com/content/article.aspx?article=2118

【讨论】：