jQuery的不工作在我的ASP网页 [英] jquery not working on my asp page

问题描述

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

 ＆LT;％@页标题=测试LANGUAGE =C＃的MasterPageFile =〜/ Site.master母AutoEventWireup =真正的codeFILE =Test.aspx的的.cs继承=测试％＆GT;

＆LT;％@ previousPageType VirtualPath =〜/ Top.aspx％＆GT;

＆LT; ASP：内容ID =内容1ContentPlaceHolderID =HeadContent=服务器＆GT;
    ＆LT;风格＆GT;
        #pagediv {宽度：1500px重要的; }
    ＆LT; /风格＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（＃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（）;
            }
        }）;
    }）;
＆LT; / SCRIPT＆GT;
＆LT; / ASP：内容＆GT;
 

仍然不知道现在。

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

解决方案

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

例如添加的CssClass 您的GridView 和的DropDownList

 ＆LT; ASP：DropDownList的ID =ddModel=服务器的DataSourceID =ddmodelsourceDataTextField =列1DataValueField =列1的CssClass =下拉列表中＆GT;
＆LT; / ASP：DropDownList的＆GT;

＆LT; ASP：GridView控件ID =gvTop=服务器的cellpadding =2CELLSPACING =2
        网格线=垂直的CssClass =网格＆GT;
    ＆LT; / ASP：GridView控件＆GT;
 

现在从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();
        }
    });
});

这篇关于jQuery的不工作在我的ASP网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！