Отображать различные формы на странице индекса в зависимости от ссылки, нажатой в 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> 

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

Answer 1

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

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

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

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

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

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

Это требует индексной страницы Однако jQuery.

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

Answer 2

Вам понадобится какой-то библиотеки JavaScript, как JQuery, чтобы это сделать, остальное воображение:

-Вы можете предварительно загрузить 3 формы на PageLoad, а затем скрыть последние два на DOM готов (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 3

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

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

В своих действиях установить ViewModel (здесь Действие LINK1)

model.IsForm1Visible = true; 

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

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

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