MVC switch from partial view with select control

Asked

Viewed 32 times

2

I am making an application where the user chooses an option and a different form is shown for each of these options.

My problem is that when I change the option, I cannot change to the corresponding partial view.

In the Shared folder I created 4 Partial Views

  • _partialView1
  • _partialView2
  • _partialView3
  • _partialView4

I just entered a tag with the number!

In HTML + Jquery:

I also tried to make an append("@Html.Partial("_partialView1")") but it didn’t work...

<script>
        $(document).ready(function () {
            $("#dropdown").change(function () {
                var str = "";
                $("select option:selected").each(function () {
                    str = $(this).text();
                    if (str == "OP 1") {
                        $("#MyPartialView").load("/_partialView1");
                    }
                    else if (str == "OP 2") {
                        $("#MyPartialView").load("/_partialView2");
                    }
                    else if (str == "OP 3") {
                        $("#MyPartialView").load("/_partialView3");
                    }
                    else {
                        $("#MyPartialView").load("/_partialView4");
                    }
                });
            });
        });
</script>
<select id="dropdown" class="form-control col-sm-2 mb-5 mt-5" name="opcao">
    <option>OP 1</option>
    <option>OP 2</option>
    <option>OP 3</option>
    <option>OP 4</option>
</select>

<div id="MyPartialView">
    @Html.Partial("_partialView1")
</div>

javascript html jquery asp.net-mvc ajax

  • This is not how a partial view works, there is no way to load a partial view ( C# ) with Jquery. I suggest you bring all partial views and then control their visibility through Jquery will be more productive and simple to be done.

1 answer

0

I think it is easier to render all view partitals and control their visibility through Dropdown by Jquery. For example: ( https://jsfiddle.net/1mL94qu7/ )

Your code would look something like this:

Your HTML

<div id="MyPartialViewContainer">

    <div id="PartialView1">
        @Html.Partial("_partialView1")
    </div>
    
    <div id="PartialView2">
        @Html.Partial("_partialView2")
    </div>
    
    <div id="PartialView3">
        @Html.Partial("_partialView3")
    </div>
    
    <div id="PartialView4">
        @Html.Partial("_partialView4")
    </div>

</div>

Your Jquery script

$(document).ready(function () {

        // reseta as partials views como hide no carregamento da página
        $("#PartialView1").hide();
        $("#PartialView2").hide();
        $("#PartialView3").hide();
        $("#PartialView4").hide();

    $("#dropdown").change(function () {
        var str = "";
        $("select option:selected").each(function () {
            str = $(this).text();
            if (str == "OP 1") {
                $("#PartialView1").show();
                $("#PartialView2").hide();
                $("#PartialView3").hide();
                $("#PartialView4").hide();
            }
            else if (str == "OP 2") {
                $("#PartialView1").hide();
                $("#PartialView2").show();
                $("#PartialView3").hide();
                $("#PartialView4").hide();
            }
            else if (str == "OP 3") {
                $("#PartialView1").hide();
                $("#PartialView2").hide();
                $("#PartialView3").show();
                $("#PartialView4").hide();
            }
            else {
                $("#PartialView1").hide();
                $("#PartialView2").hide();
                $("#PartialView3").hide();
                $("#PartialView4").show();
            }
        });
    });
});

Browser other questions tagged javascript html jquery asp.net-mvc ajax

You are not signed in. Login or sign up in order to post.