Javascript或jquery不能在asp.net頁面中工作

Question

我在子頁面的子頁面上使用母版頁時，我的客戶端腳本無法正常工作。請幫我解決這個問題。

<%@ Page Title="" Language="C#" MasterPageFile="~/Store.Master" AutoEventWireup="true" CodeBehind="NewStockEntry.aspx.cs" Inherits="StoreManagement.Admin.NewStockEntry" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
<script type="text/javascript"> 
    function resetDataEntryForm() 
    { 
     document.getElementById('txtProductName').value = ""; 
     document.getElementById('txtModelNumber').value = ""; 
     document.getElementById('txtBrandName').value = ""; 
     document.getElementById('txtPrice').value = ""; 
    } 
</script> 
<div> 
    <center> 
     <table width="100%"> 
      <tr> 
       <td width="100px" valign="top">Enter Bill No: </td> 

       <td align="left" width="200px"> 
        <asp:TextBox ID="txtBillNumber" runat="server" CssClass="textbox" Width="100px" required="true"/><br /> 
        <asp:RequiredFieldValidator Font-Bold="true" ID="rfvBillNumber" runat="server" ErrorMessage="*Required" ControlToValidate="txtBillNumber" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator> 
        <br /> 
        <asp:RegularExpressionValidator ID="revBillNumber" runat="server" 
        ControlToValidate="txtBillNumber" 
        ErrorMessage="Only numeric allowed." ForeColor="Red" 
        ValidationExpression="^[0-9]*$" ValidationGroup="val"> 
        </asp:RegularExpressionValidator> 
       </td> 

       <td width="90px" valign="top">Merchant </td> 
       <td align="left" valign="top" width="150px"> 
        <asp:TextBox ID="txtMerchantName" runat="server" CssClass="textbox" Width="150px" required="true"/><br /> 
        <asp:RequiredFieldValidator ID="rfvMerchantName" runat="server" ErrorMessage="*Required" ValidationGroup="val" ControlToValidate="txtMerchantName" ForeColor="Red"></asp:RequiredFieldValidator>&nbsp 
        <br /> 
       </td> 
       <td align="left" valign="top" width="300px"> 
        Date Of Purchase 
        <asp:TextBox ID="txtPurchaseDate" runat="server" CssClass="textbox" type="date" Width="150px" required="true"/> 
       </td> 
       <td align="right" width="100px"> 

        <asp:Button ID="btnSaveDataToDataBase" runat="server" Text="Save" CssClass="button" OnClick="btnSave_Click" CausesValidation="true" ValidationGroup="val" /></td> 

      </tr> 

     </table> 
     <table Class="CSS_Table_Example"> 
      <tr> 
       <td>Type</td> 
       <td>Value</td> 
       <td width="180px">&nbsp;</td> 
      </tr> 
      <tr height="20px"> 
       <td >Product Name</td> 
       <td> 
        <asp:DropDownList ID="ddlProductName" runat="server" CssClass="textbox" AutoPostBack="True" OnSelectedIndexChanged="ddlProductName_SelectedIndexChanged"/> 
        <asp:TextBox ID="txtProductName" runat="server" CssClass="textbox" Visible="false" required="true"/> 
       </td> 
       <td> 
        <asp:RequiredFieldValidator ID="rfvProductName" runat="server" ErrorMessage="Enter Product Name" ControlToValidate="txtProductName" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator> 
       </td> 
      </tr> 
      <tr hight="20px"> 
       <td>Model Number</td> 
       <td><asp:TextBox ID="txtModelNumber" runat="server" CssClass="textbox" required="true"/></td> 
       <td> 
        <asp:RequiredFieldValidator ID="rfvModelNumber" runat="server" ErrorMessage="Enter Model Number" ControlToValidate="txtModelNumber" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator> 
        <asp:RegularExpressionValidator ID="revModelNumber" runat="server" 
        ControlToValidate="txtModelNumber" 
        ErrorMessage="Neumeric Only" ForeColor="Red" 
        ValidationExpression="^[0-9]*$" ValidationGroup="val" /> 
       </td> 
      </tr> 
      <tr> 
       <td>Brand/Company Name</td> 
       <td><asp:TextBox ID="txtBrandName" runat="server" CssClass="textbox" required="true"/></td> 
       <td > 
        <asp:RequiredFieldValidator ID="rfvBrandName" runat="server" ErrorMessage="Enter Brand Name" ControlToValidate="txtBrandName" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator> 
       </td> 
      </tr> 
      <tr> 
       <td>Prcie</td> 
       <td><asp:TextBox ID="txtPrice" runat="server" CssClass="textbox" required="true"/></td> 
       <td> 
        <asp:RequiredFieldValidator ID="rfvPrice" runat="server" ErrorMessage="Enter Price" ControlToValidate="txtPrice" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator> 
        <asp:RegularExpressionValidator ID="revPrice" runat="server" 
        ControlToValidate="txtPrice" 
        ErrorMessage="Neumeric Only" ForeColor="Red" 
        ValidationExpression="^[0-9]*$" ValidationGroup="val"/> 
       </td> 
      </tr> 
      <tr> 
       <td>New Quantity</td> 
       <td><asp:TextBox ID="txtQuantity" runat="server" CssClass="textbox" required="true"/> 
       </td> 
       <td> 
        <asp:RequiredFieldValidator ID="rfvQuantity" runat="server" ErrorMessage="Enter Quantity" ControlToValidate="txtQuantity" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator> 
        <asp:RegularExpressionValidator ID="revQuantity" runat="server" 
        ControlToValidate="txtQuantity" 
        ErrorMessage="Neumeric Only" ForeColor="Red" 
        ValidationExpression="^[0-9]*$" ValidationGroup="val"/> 
       </td> 
      </tr> 
      <tr> 
       <td>Tax</td> 
       <td> 
        <asp:DropDownList ID="ddlTax" runat="server" CssClass="textbox" AutoPostBack="True" OnSelectedIndexChanged="ddlTax_SelectedIndexChanged"/> 
        <asp:TextBox ID="txtTax" runat="server" CssClass="textbox" Visible="false" required="true"/> 
       </td> 
       <td> 
        &nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
        <asp:Button ID="btnClear" runat="server" Text="Clear" CssClass="button" OnClick="btnClear_Click" OnClientClick="resetDataEntryForm()" /> 
        &nbsp&nbsp 
        <asp:Button ID="btnAdd" runat="server" Text="Add" CssClass="button" OnClick="btnAdd_Click" Enabled="False" CausesValidation="true" ValidationGroup="val" /> 
       </td> 
       <td> 
        &nbsp;</td> 
      </tr> 
     </table> 
     <br /> 
     <div class="divContent" style="background-color:#59a5dd"> 
      <asp:Label ID="lblPoster" runat="server" Text="New Stock Items" Font-Size="20px" ForeColor="Black" Font-Bold="true"/> 
     </div> 

Answer 1

當然，它不會工作，因爲您試圖找出的元素ID不存在於DOM中。在提問的時候，你已經提到你默認使用母版頁，當創建母版頁時，asp.net會創建一個像這樣的內容佔位符標籤。

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder> 

現在，當一個頁面與母版頁創建那麼無論服務器控件被創建

<asp:TextBox ID="txtProductName" runat="server" CssClass="textbox" Visible="false" required="true"/> 

當它被渲染成HTML 所有其ID最終將得到改變。 Like txtProductName將變爲ContentPlaceHolder1_txtProductName並且它的名稱屬性將變爲ctl00 $ ContentPlaceHolder1 $ txtProductName。因此，您完成的方式不會爲您提供輸出，因爲在DOM中沒有名爲txtProductName的id。因此，您需要添加ClientID以使其在嵌入代碼塊中正常工作。

function resetDataEntryForm() { 
    document.getElementById('<%= txtProductName.ClientID%>').value = ""; 
    document.getElementById('<%= txtModelNumber.ClientID%>').value = ""; 
    document.getElementById('<%= txtBrandName.ClientID%>').value = ""; 
    document.getElementById('<%= txtPrice.ClientID%>').value = ""; 
}