asp.net-mvc - 动态加载局部 View

Question

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

这是我需要的功能:

用户输入表格。显示一个下拉列表，并使用一些输入控件呈现通用局部 View 。

用户在下拉列表中选择不同的值

局部 View 刷新。根据下拉列表的值，它应该加载部分 View 。一些值具有与之关联的自定义 View (例如，我可以用主键命名它们)，而另一些则没有。当没有自定义 View 时；它应该加载默认值。当有一个时，它当然应该加载自定义的。

如果可能，这一切都应该被 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 请求发送到 Controller 操作，该操作将返回部分并将结果注入(inject) DOM:

<script type="text/javascript">

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

</script>

并在您希望在主机 View 中呈现局部 View 的位置放置一个 DIV 标记:

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

在 Foo Action 中，您可以返回部分 View :

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