Question

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

Answer 1

何时完成“魔术”以更改asp.net标签以进行选择？

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

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

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

另一个是GridView，它使用<table>的{{1}}控件和各种HTML控件生成GridViewRow，例如<tr> TableCell和} <td>，以创建标记的其余部分。

Shoud我使用的是我在浏览器页面的源代码中看到的标签，或者我可以问jQuery有关asp.net的标签吗？

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

更有甚者，我看不到我的CSS类名添加到asp.net标签中。有一些不同的CSS类名。

通过“ CSS名称”，您的意思是ID吗？我很抱歉，但$('select')属性的值不应从服务器端更改为客户端，只是名称 - CssClass到CssClass。

另一方面，

ID作为前缀以确保它们在整个页面中的唯一性，包括MasterPage和ContentPlaceHolder名称的前缀（如果使用它们）。出于这个原因，我不再试图使用ID将CSS应用于服务器端控件，而是使用类。

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

class

否则，我会坚持找到你正在寻找的控件：

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

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

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

Answer 2

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

使用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并使其漂亮。

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

我不确定这是不是你想要的，但听起来你可能想投资一些初学者的文献。

asp.net + css + jQuery - 它们如何一起工作？

3 个答案: