Отображать различные формы на странице указателя в зависимости от ссылки, нажатой в ASP.NET MVC

Question

У меня есть элемент меню на странице индекса, отображаемый как <% Html.RenderPartial ("MenuUserControl"); %> где MenuUserControl - это что-то вроде

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

Теперь я хочу загрузить три разные формы на самой странице индекса по щелчку этих ссылок, при этом первая форма загружается при загрузке страницы. Как я могу это сделать. Любая помощь приветствуется.

Answer 1

Для этого вам понадобится какая-то библиотека JavaScript, например jQuery, остальное - воображение:

-Вы можете предварительно загрузить 3 формы при загрузке страницы, а затем скрыть последние две формы в DOM ready (PageLoad). я оберну это в div только для удобства.

<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>

Другой вариант - пойти по Ajax-пути, но требует больше кода и знаний в jQuery. Если вам интересно, обратитесь к http://docs.jquery.com/, это ссылка на API для jQuery.

Если вы переходите в MVC, я рекомендую вам изучить любую библиотеку JavaScript, которая поможет вам с такими видами поведения, которые некоторые называют DHMTL (динамический HTML).

Answer 2

Сначала сделайте версию без Ajax.

Индекс на 1 страницу с 3 частями. Каждый фрагмент имеет только HTML-код для отображения формы в нем.

В ваших действиях установите ViewModel (здесь Action Link1)

model.IsForm1Visible = true;

В вашем представлении используйте модель для отображения партиалов

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

Если вам нужен Ajax, вы можете продолжить оттуда.

Answer 3

Если вам нужно передать информацию о ссылках на RenderPartial

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

однако лучше передать пользовательскую модель (объект класса), а не массив строк.

Используйте Ajax.ActionLink для загрузки формы без перезагрузки страницы.

Чтобы загрузить первую форму, либо сделайте это на самой странице индекса (добавьте HTML-теги или вызовите RenderPartial для визуализации формы, либо используйте RenderAction ), либо добавьте скрипт в частичное меню, например

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

Для этого требуется jQuery.

Если вы не знаете, о чем я говорю, вам лучше подготовиться к тому, чтобы многому научиться.