动态加载局部视图 [英] Dynamically loading partial view

问题描述

有关一个项目，我需要pferably的jQuery / AJAX加载的局部视图，$ P $的一个动态的方式。

For a project I need a dynamic way of loading partial views, preferably by jquery / ajax.

这是我需要的功能：

• 用户输入的形式。一个DropDownList显示和通用局部视图渲染一些输入控件。


• 用户在下拉
选择不同的值

• 局部视图刷新。基于所述下拉的值时，它应该加载局部视图。一些值与他们（我可以为实例的主键为它们命名）相关联的自定义视图，有的则没有。如果没有自定义视图;它应该载入默认。当有一个，它当然应该加载自定义的。

• User enters form. A dropdownlist is shown and a generic partial view is rendered with some input controls.
• User selects a different value in the dropdown
• The partial view refreshes. Based on the value of the dropdown, it should load the partial view. Some values have custom views associated with them (I could name them with the primary key for instance), others don't. When there's no custom view; it should load the default. When there is one, it should of course load the custom one.

而这都应该Ajax化时可能的。

And this should all be ajaxified when possible.

我看过一些东西约动态加载的谐音，但我想重新发布完整的情况下，这样我就可以找到这个特定的情况下，最好的解决方案。

I have read some things about dynamically loading partials, but I wanted to repost the complete case so I can find the best solution for this specific case.

推荐答案

假设你有一个下拉菜单：

Assuming you have a dropdown:

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

您可以订阅的 .change（）此下拉的事件，并发送一个AJAX请求到一个控制器动作，这将返回部分，注入的结果到DOM

you could subscribe for the .change() event of this dropdown and send an AJAX request to a controller action which will return a partial and inject the result into the 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标签：

And place a DIV tag where you want the partial view to render in your host view:

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

和Foo操作里面，你可以返回一个局部视图：

and inside the Foo action you could return a partial view:

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

这篇关于动态加载局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！