动态加载部分视图

Question

我需要一个动态加载局部视图的方法，最好使用jquery/ajax实现。

以下是所需的功能：

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

尽可能将所有内容ajax化。

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

- Jasper

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

- Darin Dimitrov

---

运行完美，谢谢。还有一个问题。如果我把所有的局部视图放在一个子文件夹中，那么我如何使用PartialView方法访问它们？ - Jasper

不用在意，这是个愚蠢的问题。只需使用 PartialView("folder/view")。 - Jasper

Darin，我怎样才能确保我有一个模型服务器端传递给局部视图？ - Jasper

嗨，当客户端禁用JavaScript时，这种方式无法工作。在我看来，设计Web应用程序需要考虑所有情况下禁用/启用JavaScript的情况。 - langtu

@langtu，这就是为什么你应该提供一个包含此下拉列表的表单的可能性，使其可以在没有JavaScript的情况下正常提交。显然，在更改ddl的值时执行此操作将是不可能的，但用户仍然可以提交表单并获得结果。 - Darin Dimitrov

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

- Quang Vo

---

这里不应该使用break，因为在到达break之前就已经返回了视图，所以break是无法到达的。只需使用return而不是break即可。 - Louise Eggleton