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

【问题标题】：asp.net+css+jQuery - how does it all work together?asp.net+css+jQuery - 它们是如何协同工作的？
【发布时间】：2011-04-30 22:24:36
【问题描述】：

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

【问题讨论】：

建议：学习如何将句子分成段落，这样更容易阅读。
整个“DropDownList 神奇地变成了一个选择标签”这就是我坚持使用经典 asp 的原因。
@Martha 这没有任何意义。
@Martha：我建议尝试一下 ASP.NET MVC - 您可能喜欢表单、POST 等 Web 概念缺乏抽象。

标签： asp.net jquery css jquery-selectors

【解决方案1】：

什么时候做“魔术”把asp.net标签改成select？

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

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

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

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

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

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

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

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

【讨论】：

+1 很好地展示了沿途的每一步。我认为这应该可以帮助他们更轻松地理解这些概念。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

CSS：获取 HTML 并使其美观。

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

我不确定这是否是您要寻找的东西，但听起来您可能想投资一些初学者的文学作品。

【讨论】：