jQuery的不工作在我的ASP网页我的、网页、工作、jQuery

2023-09-04 01:25:37 作者:撩妹一把手

我一直在试图找出什么不对的,在过去​​几分钟。

 <%@页标题=测试LANGUAGE =C#的MasterPageFile =〜/ Site.master母AutoEventWireup =真正的codeFILE =Test.aspx的的.cs继承=测试%>

<%@ previousPageType VirtualPath =〜/ Top.aspx%>

< ASP:内容ID =内容1ContentPlaceHolderID =HeadContent=服务器>
    <风格>
        #pagediv {宽度:1500px重要的; }
    < /风格>
    <脚本类型=文/ JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / SCRIPT>
    <脚本类型=文/ JavaScript的>
    $(文件)。就绪(函数(){
        $(#ddModel)。改变(函数(){
            。VAR selVal = $(本).find(:选择)文本();
            VAR行= $(#gvTop TR:GT(0));
            警报(selVal);
            如果(selVal ==ALL){
                $(#gvTop TR)显示()。
            }
            其他 {
                。变种rowToShow = rows.find(TD:当量(3))过滤(:含有(+ selVal +))接近的(TR);。
                。rows.show()否(rowToShow).hide();
            }
        });
    });
< / SCRIPT>
< / ASP:内容>
 

仍然不知道现在。

 < ASP:内容ID =内容2ContentPlaceHolderID =日程地址搜索Maincontent=服务器>
    < ASP:DropDownList的ID =ddModel=服务器的DataSourceID =ddmodelsourceDataTextField =列1DataValueField =列1>
    < / ASP:DropDownList的>
    < ASP:GridView控件ID =gvTop=服务器的cellpadding =2CELLSPACING =2网格线=垂直>
    < / ASP:GridView控件>
< / ASP:内容>
 

解决方案

那是因为在内容页中,ASP.NET改变分配的ID给别的东西。如果你查看​​页面源,你可以看到这一点。因此,另一种方法是使用的CssClass 访问控制。

jQuery插件库 汇集全球最有趣的网站 应用 小程序

例如添加的CssClass 的GridView 的DropDownList

 < ASP:DropDownList的ID =ddModel=服务器的DataSourceID =ddmodelsourceDataTextField =列1DataValueField =列1的CssClass =下拉列表中>
< / ASP:DropDownList的>

< ASP:GridView控件ID =gvTop=服务器的cellpadding =2CELLSPACING =2
        网格线=垂直的CssClass =网格>
    < / ASP:GridView控件>
 

现在从jQuery的访问是这样的。

  $(文件)。就绪(函数(){
    $(下拉列表中)。改变(函数(){
        。VAR selVal = $(本).find(:选择)文本();
        变种行= $(网格TR:GT(0));
        警报(selVal);
        如果(selVal ==ALL){
            $(电网潮流。)显示()。
        }
        其他 {
            。变种rowToShow = rows.find(TD:当量(3))过滤(:含有(+ selVal +))接近的(TR);。
            。rows.show()否(rowToShow).hide();
        }
    });
});
 

I've been trying to figure out what's wrong with this for the past few minutes..

<%@ Page Title="test" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<%@ PreviousPageType VirtualPath="~/Top.aspx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <style>
        #pagediv { width: 1500px !important; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#ddModel").change(function () {
            var selVal = $(this).find(":selected").text();
            var rows = $("#gvTop tr:gt(0)");
            alert(selVal);
            if (selVal == "ALL") {
                $("#gvTop tr").show();
            }
            else {
                var rowToShow = rows.find("td:eq(3)").filter(":contains(" + selVal + ")").closest("tr");
                rows.show().not(rowToShow).hide();
            }
        });
    });
</script>
</asp:Content>

Still have no idea right now.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:DropDownList ID="ddModel" runat="server" DataSourceID="ddmodelsource" DataTextField="Column1" DataValueField="Column1">
    </asp:DropDownList>
    <asp:GridView ID="gvTop" runat="server" CellPadding="2" CellSpacing="2" GridLines="Vertical">
    </asp:GridView>
</asp:Content>

解决方案

Thats because in a content page, ASP.NET changes the assigned ID to something else. If you View Source of the page you could see that. So, the alternative is to access the controls using CssClass.

For example add a CssClass to your GridView and DropDownList

<asp:DropDownList ID="ddModel" runat="server" DataSourceID="ddmodelsource" DataTextField="Column1" DataValueField="Column1" CssClass="dropdown">
</asp:DropDownList>

<asp:GridView ID="gvTop" runat="server" CellPadding="2" CellSpacing="2" 
        GridLines="Vertical" CssClass="grid">
    </asp:GridView>

Now access it from jquery like this.

$(document).ready(function () {
    $(".dropdown").change(function () {
        var selVal = $(this).find(":selected").text();
        var rows = $(".grid tr:gt(0)");
        alert(selVal);
        if (selVal == "ALL") {
            $(".grid tr").show();
        }
        else {
            var rowToShow = rows.find("td:eq(3)").filter(":contains(" + selVal + ")").closest("tr");
            rows.show().not(rowToShow).hide();
        }
    });
});