动态加载部分视图

Question

如何动态加载部分视图？

我的意思是，我有这个视图，比方说 ListProducts，我在那里选择一些产品下拉列表等等，使用这些选择的值来填充一个部分视图，这个部分视图将位于一个不可见的 div 中，在 onchange() 事件后变为可见，并根据所选项目的具体数据进行数据呈现。

- Hélder Gonçalves

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>
}

- Chris S

---

谢谢，它正在工作。我只是在通过@Url.Action()传递一些数据时遇到了麻烦，现在仍然使用jQuery加载，传递参数的语法是什么？ - Hélder Gonçalves

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);

    });

}

希望这可以帮助到您。

- lopezbertoni

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对象，则可以参考此示例。

- ab_732

Answer 4

以下文章告诉您如何使用最少的JavaScript来完成。基本上，您需要返回HTML而不是JSON到您的响应对象中。

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

- Kara Kartal

Answer 5

使用 Ajax :)

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

例子：

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

- Ihor Shubin

Answer 6

您可以使用ajax调用操作，然后使用jQuery将html字符串插入到要显示的页面中：

服务器端：

将部分视图呈现为字符串 在服务器上呈现部分视图以获取html字符串，在通过AJAX添加部分视图到ASP.NET MVC页面时非常有用。

客户端：

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

- formatc