动态加载局部视图

Question

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

这是我需要的功能:

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

在可能的情况下,这应该都是ajaxified.

我已经阅读了有关动态加载partials的一些内容,但我想重新发布完整的案例,以便为这个特定案例找到最佳解决方案.

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