Load partial view depending on dropdown selection

2019-01-17 07:54发布

站内问答 / 移动开发
1040 2 4

Im trying to create a from using asp.net mvc3.

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.

I have this 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.

Anyone got any pointers?

2条回答
放我归山
2楼-- · 2019-01-17 08:39

add the following code to the header of the project (layout). Add "combobox" to any combo box (select box) which you want to trigger the form that is surrounding it.

$(document).ready(function () {
    $('.formcombo').change(function () {
        /* submit the parent form */
        $(this).parents("form").submit();
    });
});
查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-01-17 08:46

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>

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

});

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 );
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)