Display different forms on Index page depending upon link clicked in ASP.NET MVC

Question

I have a menu control on Index page rendered as <% Html.RenderPartial("MenuUserControl"); %> where MenuUserControl is something like

  <li><%= Html.ActionLink("Link1","Index") %></li>
  <li><%= Html.ActionLink("Link2", "Index")%></li>
  <li><%= Html.ActionLink("Link3", "Index")%></li>

Now I wan to load three different form in Index page itself onclick of these links, with first form being loaded on Page load. How can I do this. Any help is appreciated.

Answer 1

If you need to pass information about links to RenderPartial

<% Html.RenderPartial("MenuUserControl", new[]{"link", "link"}); %>

however it's better to pass a custom model (class object) rather than array of strings.

Use Ajax.ActionLink to load form without page reload.

To load first form either do this in the Index page itself (add HTML tags or call RenderPartial to render form, or use RenderAction), or add script to the menu partial like this

<script type="text/javascript">
   $(function(){ $("a").eq(0).click(); }
</script>

This requires jQuery, though.

If you don't know what I'm talking about then you better prepare to learn a lot.

Answer 2

You will need some sort of JavaScript library like jQuery to do this, the rest is imagination:

-You can pre-load the 3 forms on pageload and then hide the last two on DOM ready (PageLoad). i ll wrap this in div just for convenience.

<script type="text/javascript">
        $(document).ready(function () { //This is like DOM ready
            //here we hide the the last 2 forms
            $('#div_id_form2').hide();
            $('#div_id_form3').hide();

            //Next set the events for the links (on click show form)
            //on link 2 click
            $('#link2').click(function(){
            //show the second form
            $('#div_id_form2').show();
            });


            //on link 3 click
            $('#link3').click(function(){
            //show the third form
            $('#div_id_form3').show();
            });
        });
        </script>

The other option is go the Ajax way but requires more code and knowledge in jQuery. If you are interested refer to http://docs.jquery.com/ thats the API reference for jQuery.

If you are moving to MVC, I recomend you to learn any JavaScript library to help you with this kind of behaviors that some call DHMTL (Dynamic HTML).

Answer 3

First do the Non Ajax Version.

Have 1 page Index with 3 partials in it. Each partial has only the html for the form to display in it.

In your actions set the ViewModel (here Action Link1)

model.IsForm1Visible = true;

In your View use the model to display partials

<div id="linkContainer">
<% if(Model.IsForm1Visible){%>
<%= Html.RenderPartial("Form1")%>
<%}%>
<% if(Model.IsForm2Visible){%>
<%= Html.RenderPartial("Form2")%>
<%}%>
<% if(Model.IsForm3Visible){%>
<%= Html.RenderPartial("Form3")%>
<%}%>
</div>

If you need Ajax you can continue from there.