取决于MVC3下拉选择加载局部视图(Load partial view depending on d

2019-06-26 16:51发布

我试着去使用asp.net MVC3创建。

我有一些选项的下拉列表。 我要的是,根据在下拉列表中选择要插入到页面的不同部分景色。

但。 我不想这要靠提交操作。 它应该发挥作用,这样,局部视图,只要你从选择列表中选择加载。

我有这样的代码:

@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>
}

但我无法弄清楚如何触发这个局部视图负载的下拉列表中选择更改时。

这一点是形式是不同的“实体类型”不同。 所以会出现取决于下拉选择加载的不同局部视图。

任何人有任何指针?

Answer 1:

比方说,以下是您要插入您的局部视图。

<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>

在您的下拉列表的变化情况,获得通过jQuery ajax调用部分并加载到占位符。

/* 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,返回您的局部视图。

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


Answer 2:

下面的代码添加到项目(布局)的报头。 “组合框”添加到您想要触发被周围的任何形式的组合框(选择框)。

$(document).ready(function () {
    $('.formcombo').change(function () {
        /* submit the parent form */
        $(this).parents("form").submit();
    });
});


文章来源: Load partial view depending on dropdown selection in MVC3