how to display data from database into a html table using jquery and c#

Question

how to display data from database into a html table using jquery and c#. ..help me here i used one html page only which i need and webmethod(cs) and jquery. when i click that button it should display in html table with my database values which stored , using jquery and cs in html page(for client side only), here my app code

    wservice.cs
     ____________
      public class LeaveApplicationDisplay
             {
              public string Branch { get; set; }
              public string Id { get; set; }
              public string EmpName { get; set; }
               public string Reason { get; set; }            
           }

     public List<LeaveApplicationDisplay> GetLeaveApplicationDisplayInfo { get; set; }
         [WebMethod]
         public string GetLeaveApplicationDisplay(string id)
         {
             string strhtml = string.Empty;
            try
              {
                 strhtml = GetLeaveApplicationDisplay();
             }
             catch (Exception ex)
           {

            }
            return strhtml;
                }                
   public static string GetLeaveApplicationDisplay() {
   LeaveApplicationDisplay lad = new LeaveApplicationDisplay();
   DataTable table = new DataTable();
  using (SqlConnection con = new SqlConnection(@"server=.;uid=sa;password=password;database=SMS_WORK;")) {
 using (SqlDataAdapter sda = new SqlDataAdapter("SELECT U_Branch,U_empID,U_empName,U_Reason FROM SMS_LEAVE", con)) {
     con.Open();
        sda.Fill(table);
      }}
       DataSet ds = new DataSet();
         ds.Tables.Add(table);                  
      System.Text.StringBuilder HTML = new System.Text.StringBuilder();
       HTML.AppendLine("<table>");

       foreach(DataRow dr in ds.Tables[0].Rows){
        HTML.AppendLine("<tr>");
         HTML.AppendFormat("<td>{0}</td>\n", dr["U_Branch"]);
         HTML.AppendFormat("<td>{0}</td>\n", dr["U_empID"]);
         HTML.AppendFormat("<td>{0}</td>\n", dr["U_empName"]);
        HTML.AppendFormat("<td>{0}</td>\n", dr["U_Reason"]);
       HTML.AppendLine("</tr>");
         }
        HTML.AppendLine("</table>");
       return HTML.ToString();                               
     }

     leave.html
      __________

    <script type="text/javascript" language="javascript">
       $(document).ready(function () {
        LeaveApplicationDetails();
       });

     function LeaveApplicationDetails() {        
        $("#Button1").click(function () {          
      $.ajax({                     
      url: "wservice.asmx/GetLeaveApplicationDisplay",
     contentType: "application/json; charset=utf-8",
       data: "{}",
       dataType: "json",
     type: "POST",
       success: function (Result)
     { $("#displayLeaveInformation").html(Result.d); }
      });
      return false;
     });
      }
     </script>
      <body>
         ..
      <div id="displayLeaveInformation">
          ..
     </body>

Tunaki · Accepted Answer · 2016-01-08 10:00:40Z

1

$(document).ready(function () {

      $.ajax({

          url: "WebService2.asmx/GetLeaveApplicationDisplay",
          contentType: "application/json; charset=utf-8",
          data: "{ 'pMenuID': '" + getParameterByName('MenuID') + "'}",
          dataType: "json",
          type: "POST",
          success: function (result) {
              result = result.d;
              var ta = document.getElementById('dataTable');
              ta.innerHTML = result;

          }
      });
  });

<body>

  <div id="dataTable">

 </body>

edited Jan 8, 2016 at 10:00

Tunaki

138k46 gold badges370 silver badges443 bronze badges

answered Jan 8, 2016 at 9:59

Sreevardhan

672 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vnuuk · Accepted Answer · 2015-11-21 08:43:12Z

0

First of all I think you use callback argument incorrectly Result.d, in webmethod you return pure string without any complex fields, so please try invoke in your callback .html(Result) rather than .html(Result.d).

answered Nov 21, 2015 at 8:43

Vnuuk

6,60712 gold badges47 silver badges55 bronze badges

2 Comments

Vnuuk Over a year ago

Can you check from F12 dev tools what data server sends to you?

Vnuuk Over a year ago

Yes, press F12, go to Network tab, select request you want to monitor and then go to Response tab. Here is an example of what you need - screencast.com/t/ROR2Xswt4K

Collectives™ on Stack Overflow

how to display data from database into a html table using jquery and c#

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related