Блог

Главная - Вопросы по программированию - сохранить только идентификатор клиентского элемента управления

сохранить только идентификатор клиентского элемента управления

#javascript #asp.net

#javascript #asp.net

Вопрос:

У меня ситуация, когда у меня есть несколько объектов, которые динамически создаются в коде. У каждого объекта есть несколько скрытых полей и кнопка с изображением.

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

Проблема, с которой я сталкиваюсь, заключается в том, что когда я нажимаю на кнопку, я получаю нулевую ссылку, поскольку getEmelementById не указывает, к какому объекту я ссылаюсь.

Вот страница ascx:

     <div style="position:relative;float:right;" visible="true">
    <asp:ImageButton ID="iconNarrative" visible="true" ImageUrl="/_layouts/images/osys/NarrativeIcon.gif" runat="server" Style="position:absolute; top:-28px; left:-25px; display:block;" onmouseout="hideNarrative()" onmouseover="showNarrative(this, document.getElementById(id))" />
    <asp:HiddenField ID="hfNarrative" runat="server" Visible="true" />        
</div>

Вот как это выглядит при визуализации. в этом экземпляре их 2:

и

         <div style="position:relative;float:right;" visible="true">
    <input type="image" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$iconNarrative" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_iconNarrative" onmouseout="hideNarrative()" onmouseover="showNarrative(this, document.getElementById(id))" src="/_layouts/images/osys/NarrativeIcon.gif" style="border-width:0px;position:absolute; top:-28px; left:-25px; display:block;" />
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrative" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrative" />        
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeDate" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeDate" />
    <input type="hidden" name="ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeBy" id="ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeBy" />
</div>

вот мой javascript

 var narrativeContainer = document.getElementById('narrative_container');
var narrative = document.getElementById('<%=hfNarrative.ClientID%>');
var narrativeBy = document.getElementById('<%=hfNarrativeBy.ClientID%>');
var narrativeDate = document.getElementById('<%=hfNarrativeDate.ClientID%>');  

narrative = document.getElementById('<%=hfNarrative.ClientID%>');

Итак, как мне теперь определить, какой набор скрытых полей где вызывается?
Единственное, что я мог придумать, это получить идентификатор и добавить его к различным полям, а затем использовать getElementById?

Комментарии:

1. Просто несколько полезных советов: 1) Никогда не используйте встроенный стиль. Возможно, здесь это было просто иллюстративно, но, похоже, это не имеет никакого отношения к вашему вопросу, так что спрячьте свой стыд. 🙂 2) Вы разместили это на jquery , поэтому я предполагаю, что вы знакомы с ненавязчивым JavaScript. Однако, похоже, вы его вообще не используете. Вы на самом деле используете библиотеку jQuery или просто JavaScript? Лучший ответ зависит от того, по какому маршруту вы идете (во всяком случае, в отношении специфики кода).

2. О, и visible="true" ничего не делает, когда ваш элемент управления не установлен на runat="server" .

3. Хорошая типизация — getEmelementById не существует. Попробуйте getElephantById вместо этого 😉 А если серьезно, то, что сказал @Adam Terlson. Если вы просто хотите показать некоторые элементы при переносе другого элемента, с jQuery это действительно просто.

Ответ №1:

Вот мой общий совет. Я предполагаю, что вы также используете jQuery.

Во-первых, всегда полезно, если вы устанавливаете для своих идентификаторов клиентов режим static , когда вы собираетесь получать доступ к элементам управления на стороне сервера из JavaScript.

Во-вторых, почему ваши данные передаются в скрытые поля? Он изменен и передан обратно? В противном случае стандарт HTML5 для хранения данных использует атрибуты формы data-attributeName="value" .

Вот ваш HTML в вашем .Страница ASCX:

 <div id="hfNarrative" class="narratives" runat="server">
   <!-- Stuff specific to this object, image, buttons, whatever -->
</div>

На .На стороне СЕТИ вы можете вызвать:

 hfNarrative.Attributes.Add("data-narrativeDate", SOME_DATE);
hfNarrative.Attributes.Add("data-narrativeBy", SOME_GUY);

Затем с помощью jQuery вы можете получить к ним доступ просто:

 $('div.narratives').each(function() {
    var $this = $(this);
    var narrBy = $this.attr('data-narrativeBy');
    var narrDat = $this.attr('data-narrativeDate');
    //Do stuff here with the data.
});

Я надеюсь, что это поможет вам идти по более чистому пути.

Ответ №2:

Использование jQuery:

 $('input[type=image]).hover(function() {
  var myElemID = $(this).attr('id'), inputJSON = {};
  $(this).parent().children('input').each(function(i) {
    inputJSON[$(this).attr('name')] = $(this).attr('id');
  });
});

Это даст вам переменную myElemID с идентификатором входного изображения и массивом JSON inputJSON = {'ctl00$m$g_90cae966_b430_4d11_8992_816553676250$ctl00$hfNarrativeBy':'ctl00_m_g_90cae966_b430_4d11_8992_816553676250_ctl00_hfNarrativeBy'}

Однако следует сказать, что эти имена и идентификаторы ужасны. Если возможно, вы должны сделать их более контекстуальными, семантическими и релевантными.