asp.net+css+jQuery - 它们是如何协同工作的？

Question

我想了解如何使用 jQuery 来处理 asp.net 和 css。当我编写 asp.net 代码时，例如，我要添加到页面 DropDownList，当我在 Web 浏览器中打开页面的源代码时，我无法在源代码中看到它。我可以看到选择标签，而不是下拉列表。什么时候才能完成更改 asp.net 标签选择的“魔法”？更重要的是，我看不到添加到 asp.net 标记中的 CSS 类名称。有一些不同的 CSS 类名称。但是当我在 IE 中打开开发人员工具时，我可以看到 CSS 类名称，它们与我的定义中的相同。最后一件事。我应该在 jQuery 中使用什么标签名称来遍历在 asp.net 中开发的页面。我应该使用在浏览器页面的源代码中看到的标签，还是可以向 jQuery 询问有关 asp.net 标签的信息？ CSS 类怎么样？为什么我在浏览器的页面源中看不到它们？可以在 jQuery 查询下使用我的 CCS 类名称吗？请问有人可以解释一下这三种技术如何协同工作吗？

Answer 1

When does the "magic" is done to change asp.net tag to select?

您想知道的大部分“魔法”都是由 ASP.NET 控件完成的，这些控件旨在生成发送到浏览器的标记。

收到请求后，应用程序会迭代每个控件，调用其 Render 方法(继承自 Control 类)，该方法允许每个控件生成它们所代表的标记。

按照您的示例，DropDownList控件生成 <select>标签。作为ListControl ，它使用ListItem控件来创建 <option>内的标签。

另一个是 GridView ，生成 <table>使用GridViewRow控制<tr>以及各种 HTML 控件，例如 TableCell对于 <td>和<th> ，创建其余的标记。

Shoud I use a tags which I see in the source code of a page in a browser or can I ask jQuery about asp.net tags?

不，jQuery/JavaScript 不知道服务器端控件名称，只知道它们生成的标记。因此，不要搜索 $('DropDownList') ，您会搜索 $('select') .

What is more I can't see my CSS classes names added to asp.net tags. There are some kind of differen CSS class names.

“CSS 名称”是指 ID 吗？很抱歉问，但是CssClass属性的值从服务器端到客户端不应更改，而应仅更改名称 -- CssClass到只是class .

另一方面，ID 带有前缀，以确保其在整个页面中的唯一性，包括 MasterPage 和 ContentPlaceHolder 名称的前缀(如果使用)。因此，我会避免尝试使用 ID 将 CSS 应用到服务器端控件，而是使用类。

现在，ID 的末尾应该保留为您在服务器端提供的 ID，因此您仍然应该能够使用 Attribute Ends With Selector [name$='value'] 在 jQuery 中找到该元素。 :

# ASP
<asp:DropDownList ID="AnyGivenDropDown" runat="server" />

# HTML (generated)
<select id="ctl00_PageContents_AnyGivenDropDown"></select>

# JavaScript
$('select[id$="_AnyGivenDropDown"]');

否则，我会坚持使用类来查找您正在寻找的控件:

# ASP
<asp:DropDownList ID="AnyGivenDropDown" CssClass="anygiven" runat="server" />

# HTML (generated)
<select id="ctl00_PageContents_AnyGivenDropDown" class="anygiven"></select>

# JavaScript
$('select.anygiven');

# CSS
.anygiven { }