Введите ключевое слово

Question

Я использую шаблон мастера asp.net, и у меня есть требование, например, когда пользователь нажимает . Введите. Он будет таким же, как следующая кнопка, Некоторые другие формы, которыми я могу управлять с помощью кнопки по умолчанию в панели . Но этот случай - мастер и кнопка создаются во время запуска, поэтому я пытаюсь реализовать с помощью jquery, но все же он не работает, как когда пользователь нажимает . Введите Кнопка кнопки назад уволена, поэтому мой вопрос: как я могу измените это поведение на следующую кнопку insted of back.

<CustomNavigationTemplate> 
          <table border="0" cellspacing="5" cellpadding="5" > 
          <tr align="right"> 
          <td align="right" colspan="0"> 
          <asp:Button ID="StepPrevButton" runat="server" data-button="true" UseSubmitBehavior="False" CommandName="MovePrevious" Text="Back" /> 
          </td> 
          <td align="right" > 
           <asp:Button ID="StepNextButton" runat="server" data-button="true" style= "width:120px" 
               CommandName="MoveNext" Text="Request User" 
               ValidationGroup="CreateUserWizard1" />        
          </td> 
          </tr> 
          </table> 
         </CustomNavigationTemplate> 

это как кнопка заселена

$(document).keyup(function (e) { 
     if (e.which == 13) { 
      if ($('#ctl00_MainContent_CreateUserWizard1_StartNavigationTemplateContainerID_StartNextButton').length > 0) { 
       $("#ctl00_MainContent_CreateUserWizard1_StartNavigationTemplateContainerID_StartNextButton").trigger('click'); 
      } 
      else if ($('#ctl00_MainContent_CreateUserWizard1_StepNavigationTemplateContainerID_StepNextButton').length > 0) { 
       $("#ctl00_MainContent_CreateUserWizard1_StepNavigationTemplateContainerID_StepNextButton").trigger('click'); 
      } 
      else if ($('#ctl00_MainContent_CreateUserWizard1___CustomNav2_StepNextButton').length > 0) { 
       $("#ctl00_MainContent_CreateUserWizard1___CustomNav2_StepNextButton").trigger('click'); 
      } 
     } 
    }); 

есть 3 страницы в моем мастере

Благодаря Alex

Answer 1

Без некоторого кода это довольно трудно ответить и большинство перед цели совсем разные.

Теперь, принимая удар, можно предположить, что вы используете стандартное управление <asp:Wizard />. Этот элемент управления имеет возможность устанавливать классы css для трех разных кнопок, которые отображаются в формах, используя свойство CssClass.

План реализации логики для перемещения мастера вперед, когда Enter нажата клавиша будет использовать jQuery селекторов класса и triggers имитировать щелчок мыши по кнопке Start, Next и Finish.

Сначала мы начинаем с присоединения общего css class к каждому из типов кнопок, которые мы хотели бы присоединить к событиям jQuery. Свойства интересующие нас являются

1. StartNextButtonStyle -> Устанавливает стиль для кнопки StartNext в элементе управления мастером.
2. StepNextButtonStyle -> Стандартная StepNext кнопка, используемая для передовой навигации по средним этапам вашего волшебника.
3. FinishCompleteButtonStyle -> Наконец, это завершающая кнопка завершения, которая появляется в конце.

Ниже приведен пример основного элемента управления мастером с общим классом css wizard-step-button. Обратите внимание, что этот класс не должен существовать ни в каких css-файлах, поскольку он используется только (в данном случае) как селектор jQuery.

<asp:Wizard ID="wizard1" runat="server"> 
    <StartNextButtonStyle CssClass="wizard-step-btn" /> 
    <StepNextButtonStyle CssClass="wizard-step-btn" /> 
    <FinishCompleteButtonStyle CssClass="wizard-step-btn" /> 
</asp:Wizard> 

Вы отметите свойство CssClass устанавливается в wizard-step-button для каждого из этих свойств.

Теперь забавная часть подключается к jQuery, чтобы выполнить работу по запуску кнопки Next, когда вы нажимаете кнопку . Введите ключ.

Вот фрагмент jQuery, чтобы сделать именно это. (Читайте ниже для пояснения).

$(function() { 
    $(document).keyup(function (e) { 
     if (e.keyCode == 13) { 
      $('.wizard-step-btn:first').trigger('click'); 
      e.preventDefault(); 
      return false; 
     } 
    }); 
}); 

В фрагменте выше случае нагрузки JQuery обжигают (на каждом PostBack [ненавижу этот термин]) и прикрепляется к keyup на document объекта. Это позволяет вам нажать в любом месте документа (страницы), чтобы вызвать событие.

Теперь заявление e.keyCode == 13 проверяет, чтобы вы нажали . Введите, а не любой другой ключ. Наконец оператор

$('.wizard-step-btn:first').trigger('click');

будет найти первую кнопку, которая имеет класс CSS wizard-step-btn и вызовет click событие этой кнопки.

Это, по сути, будет выполнять навигацию по переходу вперед.

Надеюсь, это поможет.

Update:

После размещен код для пользовательского шаблона навигации просто добавить CSS класс wizard-step-btn к StepNextButton так, чтобы все ваши последующие кнопки.

<asp:Button ID="StepNextButton" 
      runat="server" 
      CssClass="wizard-step-btn" 
      data-button="true" 
      style= "width:120px" 
      CommandName="MoveNext" 
      Text="Request User" 
      ValidationGroup="CreateUserWizard1" />