Question

有人能帮助我吗？真的很想让它发挥作用。这是我的完整母版页代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>IslandGas</title>
    <link href="/css/bootstrap.css" rel="stylesheet" />
    <link href="/css/font-awesome.min.css" rel="stylesheet" />
    <script src ="/js/bootstrap.js" type = "text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server" class="form-horizontal">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="AdminUpdatePanel" runat="server">

    <ContentTemplate>
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a id="home" href="~/Admin/dash.aspx" runat="server" class="navbar-brand">Island Gas Admin</a>
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-main">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse" id="navbar-main" style="height: 1px;">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="products" href="#"><i class="fa fa-fw fa-wrench"></i>Products <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A1" href="ViewProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Products</a></li>
                            <li><a id="A2" href="AddNewProduct.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add a Product</a></li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="suppliers" href="#"><i class="fa fa-fw fa-wrench"></i>Category <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A29" href="ViewCategory.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Product Categories</a></li>
                            <li><a id="A6" href="AddCategory.aspx" runat="server"><i class="fa fa-fw fa-edit"></i>Add Product Category</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="orders" href="#"><i class="fa fa-fw fa-table"></i>Customer Orders <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A10" href="CustomerOrder.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Orders</a></li>

                        </ul>
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="reports" href="#"><i class="fa fa-fw fa-table"></i>Income Reports <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A17" href="IncomeReports.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Report</a></li>
                            <li><a id="A3" href="ReportCustomerTrack.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Customer Track Report</a></li>
                            <li><a id="A7" href="ReportProducts.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Products Report</a></li>

                            <li><a id="A9" href="ReportRegisteredCustomers.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Registered Customer</a></li>
                            <li><a id="A4" href="ReportsGR.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>Return Goods Requests</a></li>
                        </ul>
                    </li><li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="A5" href="#"><i class="fa fa-fw fa-table"></i>Audit Trail <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a id="A8" href="AuditTrail.aspx" runat="server"><i class="fa fa-fw fa-eye"></i>View Audit Trail</a></li>

                        </ul>
                    </li>

                </ul>
                <ul class="nav navbar-nav pull-right">
                    <li id="user" runat="server" class="dropdown" visible="true">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <asp:Literal ID="ltUser" runat="server" Text="Administrator" /> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">

                            <li class="divider"></li>
                            <asp:linkbutton ID="linkLogout" runat="server" onclick="link_Logout_Click" CausesValidation="False" >[Log Out]</asp:linkbutton>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="clearfix">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-12">
                        <h1><asp:ContentPlaceHolder ID="title" runat="server" /></h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <asp:ContentPlaceHolder ID="content" runat="server" />
            </div>
        </div>
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Made by <a href="#">Duhaylungsod, Paolo</a></p>
                </div>
            </div>
        </footer>
    </div>
    <script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.11.3.min.js") %>'></script>
    <script type="text/javascript" src='<%= Page.ResolveUrl("~/js/bootstrap.min.js") %>'></script>
    </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

我正在努力使datepicker工作。我找到了一个很好的代码，它在没有母版页，更新面板，脚本管理器等的页面中工作得很好。头码：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

内容：

  $(document).ready(function () {

      $('[id$=txtExpiry]').datepicker({ showAnim: 'slideDown' });

  });

文本框：

<div class ="form-group">
        <label class ="control-label col-lg-4"> Expiry Date</label> 
        <div class = "col-lg-8">  
        <asp:TextBox ID="txtExpiry" runat="server" class="form-control"></asp:TextBox>
</div>

真的非常渴望能够做到这一点。请帮帮我

Answer 1

 <asp:TextBox ID="datepicker" runat="server" class="form-control">

当带有ID datepicker 的服务器控件将在html中呈现时，结果html元素将自动生成包含基于母版服务器控件的前缀的id，即
ID =＆＃34; ctl100_main_datepicker＆＃34;

$( "#datepicker" ).datepicker();

jquery选择器搜索ID等于＆＃34; datepicker＆＃34;的html元素。您可以使用元素css类作为选择器：

  <script>
  $(function() {
    $( ".datepicker" ).datepicker();
  });
  </script>

<asp:TextBox ID="datepicker" runat="server" class="datepicker form-control"></asp:TextBox>

Answer 2

尝试更改此行

<asp:TextBox ID="datepicker" runat="server" class="form-control"></asp:TextBox>

到这个

<asp:TextBox ID="datepicker" runat="server" class="datepicker, form-control"></asp:TextBox>

除了'form-control'之外，还要注意名为“Datepicker”的额外类。这应该允许jquery找到表单元素并对其应用datepicker

Answer 3

试试这个：

如果您不想使用css选择器并继续按ID选择，请尝试以下操作：

$('#<%= datepicker.ClientID %>').datepicker();

这样您就可以获得ASP.NET生成的id。

MasterPage为控件提供了另一个ID。请参阅此参考http://www.asp.net/web-forms/overview/older-versions-getting-started/master-pages/control-id-naming-in-content-pages-cs

Answer 4

当您使用母版页时，为了避免页面中的相同ID，asp.net本身会更改文本框ID，实际上它会将占位符的名称添加到控件的ID中。

例如：具有“txtExpiry”id的TextBox在具有“content”id的占位符中，在呈现时变为：“content_txtExpiry”。

所以javascripts和jquery代码可能无法找到输入！并且解决方案是定义不使用类或旧id的datepicker，使用最终呈现的名称作为“content_txtExpiry”，因此将代码更改为：

$（'[id $ = content_txtExpiry]'）。datepicker（{showAnim：'slideDown'}）;

如果datepicker在母版页内，则不起作用

4 个答案: