Thursday, February 21, 2013

How to Fetch data from database using jquery c#

product.js
===================
$(document).ready(function () {
    $.ajax({
        type: "POST",
        url: "productget.aspx/binddata",
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            for (var i = 0; i < data.d.length; i++) {
                $("#dresult").append("<tr><td><input id=txtname type=text value=" + (data.d[i].id) + "></td><td>" + (data.d[i].name) + "</td><td>" + (data.d[i].age) + "</td><td><input type=button value=Submit /></td></tr>");
            }
        }
    });
});
====================
productget.aspx(For Fetch data from  aspx.cs with  database or self table)
====================
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
public partial class productget : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        { }
    }
    public class Details
    {
        public int id { get; set; }
        public string name { get; set; }
        public int age { get; set; }
    }
    [WebMethod]
    public static Details[] binddata()
    {
        DataTable dtt = new DataTable("Table");
        dtt.Columns.Add(new DataColumn("id", Type.GetType("System.Int32")));
        dtt.Columns.Add(new DataColumn("name", Type.GetType("System.String")));
        dtt.Columns.Add(new DataColumn("age", Type.GetType("System.Int32")));
        dtt.Rows.Add(1, "A", 12);
        dtt.Rows.Add(2, "B", 11);
        dtt.Rows.Add(3, "C", 10);
        dtt.Rows.Add(4, "D", 09);
        List<Details> detail = new List<Details>();
//here You can  used  database
//==========
        foreach (DataRow dt_row in dtt.Rows)
        {
            Details usr = new Details();
            usr.id = Convert.ToInt32(dt_row["id"]);
            usr.name = dt_row["name"].ToString();
            usr.age = Convert.ToInt32(dt_row["age"]);
            detail.Add(usr);
        }
        return detail.ToArray();
    }
}
===============================

USR UI (productdetails.aspx)


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="productdetails.aspx.cs" Inherits="productdetails" %>
<!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 runat="server">
    <title></title>     
        <script src="Script/jquery-1.4.1.min.js" type="text/javascript" ></script>
        <script src="Script/product.js" type="text/javascript" ></script>
      
</head>
<body >
    <form id="form1" runat="server">
    <div>
<span class="result" id="dresult" runat="server"></span>
  </div>
    </div>
    </form>
</body>
</html>
 

1 comment:

  1. also see onclick button
    ===============

    < id=txtname" + i + " type=text value=" + (data.d[i].id) + ">

    < type=button onclick=pp('txtname" + i + "') value=Submit />


    function pp(p) {
    alert(document.getElementById(p).value);

    }

    ReplyDelete