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 = ""; 
}