取决于MVC3下拉菜单选择加载局部视图 [英] Load partial view depending on dropdown selection in MVC3
问题描述
我试着从使用asp.net MVC3创建。
Im trying to create a from using asp.net mvc3.
我有一些选择一个DropDownList。
我要的是，这取决于在下拉列表中选择要插入到页面的不同部分景色。
I have a dropdownlist with some options. What i want is different partial views to be injected into the page, depending on the selection in the dropdown list.
不过。我不希望这种依靠提交操作。它应该发挥作用，这样，部分观点是，只要你从选择列表中选择加载。
But. i dont want this to rely on a submit action. It should function so that, the partial view is loaded as soon as you select from the select list.
我有这样的code：
@using (Ajax.BeginForm("Create_AddEntity", new AjaxOptions {
UpdateTargetId = "entity_attributes",
InsertionMode = InsertionMode.Replace
}
))
{
<div class="editor-label">
@Html.Label("Type")
</div>
<div class="editor-field">
@Html.DropDownList("EntityTypeList", (SelectList)ViewData["Types"])
</div>
<div id="entity_attributes"></div>
<p>
<input type="submit" value="Create" />
</p>
}
但我无法弄清楚如何触发这个局部视图时负载的下拉列表中选择更改。
But I can't figure out how to trigger this partial view load when the dropdown list selection changes.
这一点是形式是不同的实体类型不同。所以会被加载不同的局部视图，这取决于下拉菜单选项。
This point is that the form is different for the different "entity types". so there will be loaded a different partial view, depending on the dropdown selection.
任何人有任何指针？
推荐答案
假设下面是你要插入你的观点你的部分。
Let's say following is your view that you want to insert your partial.
<html>
<head><head>
<body>
<!-- Some stuff here. Dropdown and so on-->
....
<!-- Place where you will insert your partial -->
<div id="partialPlaceHolder" style="display:none;"> </div>
</body>
</html>
在你的DropDownList的变化时，获得通过jQuery ajax调用部分并加载到占位符。
On the change event of your dropdownlist, get partial via jquery ajax call and load it to place holder.
/* This is change event for your dropdownlist */
$('#myDropDown').change( function() {
/* Get the selected value of dropdownlist */
var selectedID = $(this).val();
/* Request the partial view with .get request. */
$.get('/Controller/MyAction/' + selectedID , function(data) {
/* data is the pure html returned from action method, load it to your page */
$('#partialPlaceHolder').html(data);
/* little fade in effect */
$('#partialPlaceHolder').fadeIn('fast');
});
});
而在你的控制器动作是/控制器/ MyActionin以上的jQuery，回报您的局部视图。
And in your controller action which is /Controller/MyActionin above jquery, return your partial view.
//
// GET: /Controller/MyAction/{id}
public ActionResult MyAction(int id)
{
var partialViewModel = new PartialViewModel();
// TODO: Populate the model (viewmodel) here using the id
return PartialView("_MyPartial", partialViewModel );
}
这篇关于取决于MVC3下拉菜单选择加载局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
