Альтернатива для использования $find и jquery selector для получения объекта в приложении ASP.net

Question

Я хотел бы вызвать метод элемента, который может быть возвращен из метода ASP.net Sys.Application "$find". В данном случае это элемент управления Telerik RadWindow (ID="MyWindow"), и я хотел бы вызвать метод.show().

Проблема заключается в том, чтобы получить правильный идентификатор клиента для элемента управления в отдельном файле JS, поскольку идентификаторы изменяются в среде ASP.net. Для этого я сейчас использую

$find($("[ID$=MyWindow]")[0].id).show();

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

Итак, мой вопрос: есть ли лучший способ получить объект элемента ASP.net в отдельном файле JS, кроме этой уродливой комбинации выбора $ find и выбора jquery?

Answer 1

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

<script>
var controls = new function () {
    return {
        radWinManagerMain: {
            ClientID: "<%= radWinManagerMain.ClientID %>"
        },
        radWinManagerSub: {
            ClientID: "<%= radWinManagerSub.ClientID %>"
        }
    };
}();
</script>

Я использовал два отдельных RadWindowManager, к которым я хотел обратиться во внешнем файле JS. GetRadWindowManager() всегда возвращал бы первый экземпляр RadWindowManager на странице. Поэтому я выбрал этот подход.

При вызове функции (которая реализована во внешнем JS) я передаю ссылку на элементы управления, которые возвращают идентификаторы.

<telerik:NavigationNode NavigateUrl="javascript:showWindow(controls.radWinManagerMain,'winSettings');" value="settings" Text="Settings" SpriteCssClass="fa fa-cog" runat="server" />

Во внешнем файле JS:

function showWindow(control, windowName) {
    $find(control.ClientID).open(null, windowName);
    some more code here...
}

Я нашел идею для этого на: http://www.telerik.com/blogs/simplify-javascript-control-references-in-asp.net-webforms

Answer 2

Единственное, о чем я могу думать, это использовать ClientIDMode либо preditable или же static,

Вот пример.

Даже в этом случае вы хотите быть осторожными при столкновении идентификаторов.

<telerik:RadWindowID="RadWindow1" runat="server" ClientIDMode="Static" ...>
</telerik:RadWindow>

// Separate JS File
function showForm(url) {
   var oWnd = $find("RadWindow1");
   oWnd.setUrl(url);
   oWnd.show();
}

ИЛИ другое применение - использовать RadWindowsManager.

RadWindowManager позволяет тебе позвонить RadWindow через идентификатор из JavaScript.

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" ...>
   <Windows>
     <telerik:RadWindow ID="RadWindow1" runat="server">
     </telerik:RadWindow>
   </Windows>
</telerik:RadWindowManager>

// Separate JS File
function showForm(url) {
   window.radopen(url, "RadWindow1");
   return false;
}

Answer 3

Другой подход заключается в создании объекта со всеми именами элементов управления в файле ASPX и доступе к нему из файла JS.

ASPX файл:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" ...>
   <Windows>
     <telerik:RadWindow ID="RadWindow1" runat="server">
     </telerik:RadWindow>
   </Windows>
</telerik:RadWindowManager>



<script type="text/javascript">
         var MyControls = {
                MyRadWindow: '<%= RadWindow1.ClientID %>'
         };
</script>

Файл JS:

$find(MyControls.MyRadWindow).show();