Как использовать JQuery, выберите элемент идентификатором и ASP.NET, не помещая ctl00_ везде в код

Вы можете сделать что-то вроде этого:

$("input[id*=eliteUser]").html()

Но если у вас несколько элементы управления заканчивают свои идентификаторы на eliteUser - это не сработает.

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

Это проблема, которая, как я понимаю, будет решена в следующей версии Visual Studio, однако я понимаю, что это вам не поможет.

То, как мы решили ее в нашем проекте было что-то такое:

$.extend({
    clientID: function(id) {
        return $("[id$='_" + id + "']");
    }
});

И код, который его использовал:

statusBar = $.clientID("MSS_MESS_LINE_Static")

У меня есть использовал класс, расширяющий WebControl, чтобы по существу делать то же самое, что и предложение RedSquare . Я прочитал предложение в этом блоге

/// <summary>
/// Custom Web control that renders two JavaScript functions out into the page 
/// so that defined control IDs can be used to get a reference to HTML DOM elements
/// </summary>
[DefaultProperty("Text")]
[ToolboxData("<{0}:ClientIdHandler runat=\"server\"></{0}:ClientIdHandler>")]
public class ClientIdHandler : WebControl
{
    private StringBuilder _builder = new StringBuilder();

public ClientIdHandler(){}


/// <summary>
/// Renders the ClientID of the control in JavaScript function "clientId" to the specified writer.
/// </summary>
/// <param name="output">A <see cref="Control"/> whose ClientID will be included 
/// in the rendered HTML output.</param>
public void AddControl(Control c)
{
    _builder.AppendFormat("    case '{0}': return '{1}'; break;" + Environment.NewLine, c.ID, c.ClientID);
}

/// <summary>
/// Overrides the Render method to prevent a Start and End <see cref="HtmlTextWriterTag"/>
/// being rendered in the HTML for the control.
/// </summary>
/// <param name="output">A <see cref="HtmlTextWriter"/> that represents 
/// the output stream to render HTML content on the client.</param>
protected override void Render(HtmlTextWriter writer)
{       
    RenderContents(writer);
}


/// <summary>
/// Renders the contents of the control to the specified writer.
/// </summary>
/// <param name="output">A <see cref="HtmlTextWriter"/> that represents 
/// the output stream to render HTML content on the client.</param>
protected override void RenderContents(HtmlTextWriter output)
{
    output.Write("<script type=\"text/javascript\"> " + Environment.NewLine);
    output.Write("function clientId(id) {" + Environment.NewLine);
    output.Write("switch (id) {" + Environment.NewLine);
    output.Write(_builder.ToString());
    output.Write("     }" + Environment.NewLine);
    output.Write("}" + Environment.NewLine);
    output.Write("function getElementByClientId(id) {" + Environment.NewLine);
    output.Write("    return document.getElementById(clientId(id));" + Environment.NewLine);
    output.Write("}" + Environment.NewLine);
    output.Write("</script>" + Environment.NewLine);
}
}

. Затем вы можете использовать его на странице aspx или в коде программной части

 protected override void OnInit(EventArgs e)
    {
        ClientIdHandler clientIds = new ClientIdHandler();
        clientIds.AddControl(myControl);

        this.Controls.Add(clientIds);

        base.OnInit(e);
    }

, который отобразит следующее на странице

<script type="text/javascript"> 
function clientId(id) {
switch (id) {
    case 'myControl': return 'ctl00_Main_myControl'; break;
     }
}
function getElementByClientId(id) {
    return document.getElementById(clientId(id));
}
</script>

. Итак, во внешнем файле JavaScript вы можете использовать следующие

// for jQuery selectors
var myControl = $('#' + clientId('myControl'));

// for vanilla JavaScript
 var myControl = getElementByClientId('myControl'));

Один из способов - использовать объект переменных js, который записывается вверху каждой страницы. Затем ваш внешний js может ссылаться на объект настройки с желаемым свойством. Таким образом, вы можете изменить идентификатор на своих страницах aspx без жесткого кодирования чего-либо во внешних файлах js.

Затем вы можете открыть метод materpage или base page, который позволяет каждой странице добавлять элементы идентификатора элемента управления в список. Затем базовый метод должен записать сценарий pageVars в верхней части каждой страницы.

Рик Стрел говорит об этом здесь

Я предпочитаю этот метод, поскольку вы по-прежнему получаете преимущества быстрых селекторов.

Например,

Если вы получите aspx для записи следующего скрипта.

var pageVars = {
    idList: {
        eliteUser : 'ctl00_ContentMainPane_eliteUser',
        normalUser : 'ctl00_ContentMainPane_normalUser', 
        powerUser : 'ctl00_ContentMainPane_powerUser', 
        .....
    }
};

Затем в вашем внешнем js

$('#' + pageVars.idList.eliteUser)
$('#' + pageVars.idList.powerUser)....etc

Я использую ScriptManager.RegisterStartupScript , чтобы получить все необходимые мне ClientID.

1. Определите переменные javascript в «шапке» страницы для хранения идентификаторов.
2. ] Используйте RegisterStartupScript в Page_Load для присвоения значений переменным следующим образом:

строка myScript = String.Format ("window.onload = function () {id1 = {0}, id2 = {1}, id3 = {2} } ", Control1.ClientID, Control2.ClientID, Control3.ClientID);

ScriptManager.RegisterStartupScript (Page, Page.GetType (), «SomeKey», myScript, true);