asp.net mvc 3 - Load partial view depending on dropdown selection in MVC3

Question

Welcome To Ask or Share your Answers For Others

asp.net mvc 3 - Load partial view depending on dropdown selection in MVC3

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

asp.net mvc 3 - Load partial view depending on dropdown selection in MVC3

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T17:46:43+0000

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

Categories

asp.net mvc 3 - Load partial view depending on dropdown selection in MVC3

asp.net mvc 3 - Load partial view depending on dropdown selection in MVC3

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags