Question

对于一个项目，我需要一种加载部分视图的动态方式，最好是通过jquery / ajax。

这是我需要的功能：

用户输入表格。显示一个下拉列表，并使用一些输入控件呈现通用局部视图。
用户在下拉列表中选择其他值
部分视图刷新。根据下拉列表的值，它应该加载局部视图。某些值具有与之关联的自定义视图（例如，我可以使用主键命名），而其他值则不然。当没有自定义视图时;它应该加载默认值。当有一个时，它当然应该加载自定义的。

如果可能的话，这应该都是ajaxified。

我已经阅读了一些关于动态加载部分内容的内容，但我想重新发布完整的案例，以便为这个特定情况找到最佳解决方案。

Answer 1

假设你有一个下拉列表：

@Html.DropDownListFor(
    x => x.ItemId,
    new SelectList(Model.Items, "Value", "Text"),
    new { 
        id = "myddl", 
        data_url = Url.Action("Foo", "SomeController")
    }
)

您可以订阅此下拉列表的.change()事件，并向控制器操作发送一个AJAX请求，该操作将返回部分并将结果注入DOM：

<script type="text/javascript">

$(function() {
   $('#myddl').change(function() {
       var url = $(this).data('url');
       var value = $(this).val();
       $('#result').load(url, { value: value })
    });
});

</script>

并将DIV标记放在您希望在主视图中呈现局部视图的位置：

<div id="result"></div>

并且在Foo操作中你可以返回一个局部视图：

public ActionResult Foo(string value)
{
    SomeModel model = ...
    return PartialView(model);
}

Answer 2

您应该处理组合框的值更改事件，选择Id，然后使用ajax调用服务器操作，传递选定的Id。服务器操作将返回相应的视图。在客户端，您将返回的视图填充到页面上的区域。

例如服务器端操作：

public ActionResult GetView(int id)
{
    switch (id)
    {
        case 1:
            return View("View1", model1);
            break;
        case 2:
            return View("View2", model2);
            break;
        default:
            return View("Default", modelDefault);
    }
}

动态加载局部视图

2 个答案: