Render ASP.NET MVC partial view based on a condition on client side

Question

In our ASP.NET MVC 4 app, we have four partial views: View1, View2, View3, View4. When user selects a number, say, 2, from a dropdown and click on a submit button we want to render only partial views View2. Likewise, when 3 is selected we want to render View3 and so on. I tried the following but it does not render View2. I assume we cannot do this from inside script tag.

<div id="v2">
    <script>
        if (n==2) {
            @{Html.RenderPartial("View2");}
        }
    </script>
</div>

How can we achieve the above?

Shyju · Accepted Answer · 2014-03-20 15:39:01Z

2

Load it asynchronously using jQuery load method on the click event of the button. Something like this.

$(function(){

  $(document).on("click","#btnItem1",function() {
     var val=$("#YourDropDownID").val();     
     if(val==2)
     {
        $("#DivContainerForCustForm").load("@Url.Action("CustomerForm","Home")");
     }
  });  

});

Assuming you have the CustomerForm action method in HomeController returns the relevant html markup you need.This action could return a partial view.

You may update your jQuery selectors & HTML markup to make it more generic to work with more than one control/div's.

answered Mar 20, 2014 at 15:39

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nam Over a year ago

Thanks to @Shyju for his help.

Collectives™ on Stack Overflow

Render ASP.NET MVC partial view based on a condition on client side

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related