Каков наилучший способ проверки JavaScript на странице ASP.Net с мастер-страницей?

Question

Я реализую Javascript Validation на странице ASP.Net, которая находится внутри мастер-страницы. Идентификаторы элементов управления меняются, поэтому я не могу использовать исходные идентификаторы элементов управления для проверки. Я посмотрел в сети и получил предложение динамически создать скрипт и добавить его на страницу с помощью RegisterStartupScript. Мне не нравится это решение, потому что оно не подлежит ремонту.

Как я могу выполнить проверку javascript на этой странице и настроить идентификаторы клиентов?

Другое решение просто попросило меня пойти дальше и использовать окончательные идентификаторы клиента, которые появляются в браузере. Это выполнимо, и я бы предпочел создать сценарий во время выполнения. Каково ваше мнение?

Answer 1

Лучшее решение зависит от вашей конкретной ситуации. Самый простой и удобный в обслуживании способ проверки в формах Asp.Net - это использование встроенных средств проверки. Они берут идентификатор элемента управления, который вы хотите проверить, а затем обеспечивают проверку на стороне клиента (javascript) и на стороне сервера для этого элемента управления. Они управляют автоматическим подключением и созданием javascript для вас.

Если по какой-то причине они не работают, и вы хотите написать свои собственные функции проверки в javascript, вам нужно будет использовать что-то похожее на решение Бранта выше. Как упомянул Брант, использование

<%= Control1.ClientID%>

в вашем javascript лучше, чем копирование окончательного визуализированного идентификатора элемента управления из источника браузера, поскольку окончательный идентификатор элемента управления изменяется в зависимости от ряда факторов, включая идентификатор элемента управления и идентификатор любого родителя. контролирует, что он может быть вложен внизу (пользовательские элементы управления, сетки, повторители и т. д.). .ClientID выведет окончательный визуализированный идентификатор элемента управления для каждого обстоятельства. Этот метод может казаться похожим на грязный хак, но на самом деле это довольно чистый подход для обработки перезаписи идентификаторов, встроенный в структуру для предотвращения конфликтов имен. Это стандартная техника, используемая на многих сайтах.

Answer 2

IMO, копирование окончательных значений ClientID, которые появляются в браузере, - это проблема с ожиданием. Если вы измените идентификатор элемента управления в своем коде и забудете изменить его в своем javascript, вы можете не заметить, пока проверка не перестанет работать. Динамически создавая его, вы по крайней мере получите выгоду от ошибок во время компиляции.

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

<script>
    var SomeControl = <%= Control1.ClientID %>;
    var AnotherControl = <%= Control2.ClientID %>;
    // etc, etc.
</script>

К сожалению, это все еще похоже на уродливый хак. Будущие версии ASP.NET предположительно будут учитывать этот сценарий.

Answer 3

Есть две вещи с кодом js, которые нужно удовлетворить: 1. Отредактируйте код JS в удобном редакторе JS. (VS например) 2. Безопасный несколько ваших экземпляров управления сосуществуют.

Существует общий подход к предоставлению этих двух вещей: отдельный

• общий код, который независим из идентификаторов клиентов
• код, который зависит от конкретные идентификаторы.

Общий код может быть сохранен в виде файла .js или веб-ресурса, если планируется редкое изменение. Код, зависящий от идентификаторов, можно расположить так же, как в ответе Бранта, например

   <script>
       var <%=c1.ClientID %> = new SomeJsClass(<%=c1.ClientID %>);
       var <%=c2.ClientID %> = document.getElementById('<%=c1.ClientID %>');
   </script>

Код, который обрабатывает эти переменные, может находиться в отдельном файле .js.

Answer 4

Другой способ, хотя и не такой эффективный, - использовать JQuery.

Поместите пользовательский класс CSS в каждый элемент управления, который вы хотите найти. Если это текстовое поле, оно может выглядеть так:

< asp:TextBox id="NameTextBox" runat="server" cssClass="NameTextBox" >

Это должно попасть в браузер так:

< input id="something_NameTextBox" type="text" class="NameTextBox" >

Затем, используя JQuery, вы можете найти элемент управления следующим образом:

$(".NameTextBox")

Вы можете получить значение текстового поля, используя: $(".NameTextBox").val()

Это не так эффективно, поиск элементов управления по их идентификатору происходит быстрее, но если страница не слишком велика, она будет работать нормально.

Answer 5

Вполне допустимо ссылаться на ClientID через встроенный код (например, теги <%%>). Однако приведенный пример не сработает; вам нужно получить доступ к DOM ...

<script language="javascript" type="text/javascript">
  var control = document.getElementById('<%= control.ClientID %>');
</script>

Answer 6

Вот 2 способа, которыми я пользуюсь:

в мастере:

Page.ClientScript.RegisterClientScriptInclude("somescript", ResolveUrl("some.js"));

programmically:

HtmlGenericControl JScript1 = new HtmlGenericControl("script");
JScript1.Attributes.Add("type", "text/javascript");
JScript1.Attributes.Add("src", ResolveUrl("some.js"));
this.Page.Header.Controls.Add(JScript1);