Идентификаторы управления asp.net в отдельном файле JS

Question

У меня есть пользовательский элемент управления с кучей кнопок и входов. У меня также есть файл JS, в котором весь мой код идет для простой отладки.

Как я могу получить ClientIDs элементов управления в файле JS?

Мой обходной путь на данный момент заключается в том, чтобы иметь блок скриптов в верхней части элемента управления и поместить туда все JS. Я хотел бы хоть немного расстаться.

Большое спасибо

Answer 1

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

В вашем пользовательском элементе управления, странице или пользовательском элементе управления:

string script = "<script>var myButtonID = '" + myButton.ClientID + "';</script>";
if (!Page.ClientScript.IsClientScriptBlockRegistered("myGlobalVariables"))
{
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "myGlobalVariables", script);
}

И в вашем внешнем файле JS:

var myButton = document.getElementById(myButtonID);
//var myButton = $('#' + myButtonID);

РЕДАКТИРОВАНИЕ: Вот способ визуализации ваших controlID в ваших файлах aspx / ascx:

<script language="javascript">
     var myButtonID = '<%= muButton.ClientID %>';
</script>

Answer 2

Или есть другой подход, который определяет, что объект ожидает объект json, подобный этому

this.Collection  = {'controlName': '<%= controlId.ClientID %>' } ; 

Поместите это в конец вашей страницы asp, первая часть будет ссылаться на любую строку, чтобы запомнить ваше имя элемента управления, а вторая часть - это действительный идентификатор клиента.

Внутри вашего javascript-файла все, что вам нужно сделать, это вызвать вашу коллекцию с присвоенным вами именем элемента управления

alert(Collection['controlName']) ; // the result will be the clientid for the server side control 

надеюсь, что это сработает с тобой, потому что мне это кажется простым

Answer 3

Я обычно передаю литерал объекта в качестве аргумента своим функциям. Этот подход устраняет необходимость использования глобальных переменных и делает процесс отключения от элементов управления ASP.NET / функций JavaScript менее сложным и более подробным:

JavaScript:

function fn(ids)
{
    var controlOne = ids.controlOne,
        controlTwo = ids.controlTwo,
        controlThree = ids.controlThree;
}

ASP.NET:

fn({
    controlOne: "<%= ControlOne.ClientID %>",
    controlTwo: "<%= ControlTwo.ClientID %>",
    controlThree: "<%= ControlThree.ClientID %>"
});

Другой подход заключается в нацеливании ваших входных данных по именам классов:

ASP.NET:

<asp:TextBox ... CssClass="controlone" />
<asp:TextBox ... CssClass="controltwo" />
<asp:TextBox ... CssClass="controlthree" />

JavaScript:

function fn()
{
    var controlOne = document.getElementsByClassName("controlone"),
        controlTwo = document.getElementsByClassName("controltwo"),
        controlThree = document.getElementsByClassName("controlthree");
}

Все это можно значительно упростить с помощью jQuery или другого JavaScript-фреймворка.

Answer 4

Если разделение действительно важно для вас, двигаясь вперед, вы можете рассмотреть jQuery, у которого есть множество способов найти ваши элементы управления.