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

何时完成“魔法”来更改 asp.net 标记以进行选择？

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

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

按照您的示例，DropDownList 控件会生成一个 标记。作为 ListControl，它使用 ListItem 控件在其中创建标记。

另一个是 GridView，它使用 的 GridViewRow 控件生成 和各种 HTML 控件，例如用于

和	的 TableCell，用于创建标记的其余部分。

我应该使用在浏览器页面源代码中看到的标签，还是可以向 jQuery 询问有关 asp.net 标签的信息？

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

此外，我看不到添加到 asp.net 标记中的 CSS 类名称。有一些不同的 CSS 类名称。

“CSS 名称”是指 ID吗？抱歉，CssClass 属性的值不应从服务器端更改为客户端，而应仅更改名称 - CssClass 更改为 类。

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

现在，ID 的末尾应该保留为您在服务器端提供的 ID，因此您仍然应该能够使用 属性以选择器结尾[name$='value']：

# 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 { }

Answer 2

“魔法”发生在 ASP.NET 页面生命周期的渲染事件中。 Asp.net 服务器控制所有渲染为标准 html 元素。最重要的区别是您可以在服务器端访问它们及其值。 WebControls 还有一个 CssClass 属性，该属性在呈现时成为 HTML 元素的类属性。

使用 jQuery 和 CSS 时，id 可能有点棘手。这是因为根据控件层次结构，它们可能具有 clientID，例如 ctl100_containerID_myControl，而不是 myControl。为了在 jQuery 中克服这个问题，当您引用一个控件时，您可以通过其 ClientID 来引用它，如下所示：

$('#<%=myControlID.ClientID%>')

这是服务器端，它将在呈现后写入控件的客户端 ID。

Answer 3

ASP.NET：高级 Web 开发框架。当您在 .NET 中创建 Web 表单时，该框架将与 IIS 处理程序一起工作，并创建（希望如此）有效的 HTML，以便在回发期间与您的服务器端代码配合使用。

JQUERY：这将允许您执行客户端脚本，例如计算、验证，尤其是 AJAX 等。这基本上只是一个更简单且更易于阅读的 javascript 版本的包装器。

CSS：采用 HTML 并使其变得漂亮。

如果您知道自己在做什么，那么这三种技术可以很好地协同工作。

我不确定这是否是您正在寻找的内容，但听起来您可能想投资一些初学者文献。