2015-10-26 66 views
0

我對使用jquery的ajax調用很陌生。我試圖綁定來自數據庫的值。我在數據集中返回數據的位置有一個數據訪問層。我試圖將這個數據集綁定到我的.aspx頁面中的gridview。我在.aspx頁面中寫了ajax jquery調用,但是我收到了一個「未定義」的錯誤。使用jQuery進行Ajax調用

請指導我哪裏錯了。

我的代碼是

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-2.1.4.js"></script> 
    <script src="Scripts/jquery.validate.js"></script> 
    <script> 

     $(function() { 


      $("#form1").validate({ 


       rules: { 
        txtName: "required", 
        txtCity: "required", 
        ddlDepName: "required", 
        txtSalary: { 
         required: true, 
         number: true 
        }, 

       }, 


       messages: { 
        txtName: "Please enter your Name", 
        txtCity: "Please enter your City", 
        ddlDepName: "Please select a department Name from the dropdown list", 
        txtSalary: { 
         required: "Please enter the Salary", 
         number: "Only Numbers are allowed" 
        } 
       }, 

       submitHandler: function (form) { 
        form.submit(); 
       } 
      }); 
      $('#btnInsertEmployee').click(function() { 

       if ($("#form1").valid()) { 

       } 
      }); 
     }); 

     $(function() { 
      GetEmployees(); 
     }); 

     function GetEmployees() { 
      debugger; 
      $.ajax({ 
       type: "POST", 
       url: "DataAccessLayer.cs/GetEmployees", 
       //data: '{pageIndex: ' + pageIndex + '}', 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: OnSuccess, 
       failure: function (response) { 
        alert(response.d); 
       }, 
       error: function (response) { 
        alert(response.d); 
       } 
      }); 
     } 

     function OnSuccess(response) { 
      var xmlDoc = $.parseXML(response.d); 
      var xml = $(xmlDoc); 
      var customers = xml.find("EmployeesList"); 
      var row = $("[id*=GridView1] tr:last-child").clone(true); 
      $("[id*=GridView1] tr").not($("[id*=GridView1] tr:first-child")).remove(); 
      $.each(EmployeesList, function() { 
       var customer = $(this); 
       $("td", row).eq(0).html($(this).find("EmployeeId").text()); 
       $("td", row).eq(1).html($(this).find("Name").text()); 
       $("td", row).eq(2).html($(this).find("City").text()); 
       $("td", row).eq(2).html($(this).find("DepartmentId").text()); 
       $("td", row).eq(2).html($(this).find("Salary").text()); 
       $("[id*=GridView1]").append(row); 
       row = $("[id*=GridView1] tr:last-child").clone(true); 
      }); 
      var pager = xml.find("Pager"); 
      $(".Pager").ASPSnippets_Pager({ 
       ActiveCssClass: "current", 
       PagerCssClass: "pager", 
       PageIndex: parseInt(pager.find("PageIndex").text()), 
       PageSize: parseInt(pager.find("PageSize").text()), 
       RecordCount: parseInt(pager.find("RecordCount").text()) 
      }); 
     }; 

    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
      <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
       <ContentTemplate> 

        <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal" > 
         <AlternatingRowStyle BackColor="#F7F7F7" /> 
         <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> 
         <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> 
         <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" /> 
         <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" /> 
         <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" /> 
         <SortedAscendingCellStyle BackColor="#F4F4FD" /> 
         <SortedAscendingHeaderStyle BackColor="#5A4C9D" /> 
         <SortedDescendingCellStyle BackColor="#D8D8F0" /> 
         <SortedDescendingHeaderStyle BackColor="#3E3277" /> 
        </asp:GridView> 
       </ContentTemplate> 
      </asp:UpdatePanel> 

    <table class="auto-style1"> 
        <tr> 
         <td class="auto-style3"> 
          <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label> 
         </td> 
         <td class="auto-style4"> 
          <asp:TextBox ID="txtName" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td class="auto-style2">&nbsp;</td> 
         <td>&nbsp;</td> 
        </tr> 
        <tr> 
         <td class="auto-style2"> 
          <asp:Label ID="lblCity" runat="server" Text="City"></asp:Label> 
         </td> 
         <td> 
          <asp:TextBox ID="txtCity" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td class="auto-style2">&nbsp;</td> 
         <td>&nbsp;</td> 
        </tr> 
        <tr> 
         <td class="auto-style2"> 
          <asp:Label ID="lblDepName" runat="server" Text="Department Name"></asp:Label> 
         </td> 
         <td> 
          <asp:DropDownList ID="ddlDepName" runat="server" AutoPostBack="True" Height="16px" Width="122px"> 
          </asp:DropDownList> 
         </td> 
        </tr> 
        <tr> 
         <td class="auto-style2">&nbsp;</td> 
         <td>&nbsp;</td> 
        </tr> 
        <tr> 
         <td class="auto-style2"> 
          <asp:Label ID="lblSalary" runat="server" Text="Salary"></asp:Label> 
         </td> 
         <td> 
          <asp:TextBox ID="txtSalary" runat="server"></asp:TextBox> 
         </td> 
        </tr> 
        <tr> 
         <td class="auto-style2">&nbsp;</td> 
         <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          <asp:Button ID="btnInsertEmployee" runat="server" OnClick="btnInsertEmployee_Click" Text="Insert Employee" OnClientClick="return validate()" /> 
          &nbsp;</td> 
        </tr> 
        <tr> 
         <td class="auto-style2" colspan="2"> 
          <asp:Label ID="lblMessage" runat="server" ForeColor="Red"></asp:Label> 
         </td> 
        </tr> 
       </table> 
    </div> 
    </form> 
</body> 
</html> 
+0

什麼是錯誤? – Rayon

+0

「未定義」警報我越來越。 –

+0

意味着要麼'失敗:'或'錯誤:'處理程序被調用。請警惕如alert(響應);''不帶'.d',看看你得到了什麼錯誤。 – vijayP

回答

0
  1. 確保您的服務器返回數據:你已經使用'POST''GET'數據...

  2. DataAccessLayer.cs/GetEmployees是不是有效的URL。調用網頁(.aspx)或調用web方法,但不要在瀏覽器中調用DAL中的C#文件(.cs)...

+0

感謝您的澄清,我可以在ajax調用的url中使用代理類的對象調用web方法嗎? –

+0

我認爲這將解釋你的程序... http://stackoverflow.com/a/10688997/4619012 –