JSON : Display all User Details Data by using JSON in ASP.NET


Display all User Details Data by using JSON in ASP.NET

In this articles i'm going to explain how to retrieve data from database and display in webpage by using json in the form of table. as show in above image

JSON

  1. JSON stands for JavaScript Object Notation
  2. JSON is a lightweight data-interchange format
  3. JSON is language independent
  4. JSON is "self-describing" and easy to understand

Create Users Table in Master Database :

 Create Table users(
  @uid int,
  @username varchar(25),
  @name varchar(25)
 )

 Insert into users values('1','Username1','Name1')
 Insert into users values('2','Username2','Name2')
 Insert into users values('3','Username3','Name3')
 Insert into users values('4','Username4','Name4')
 Insert into users values('5','Username5','Name5')
 Insert into users values('6','Username6','Name6')
 Insert into users values('7','Username7','Name7')
 Insert into users values('8','Username8','Name8')
 Insert into users values('9','Username9','Name9')


Design HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="JsonWebApplication.WebForm2" %>

<!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>
    <!--  Add JQuery Script Code Here  -->
</head>
<body>
    <form id="form1" runat="server">
    
    <table id="tballUser" style="border-collapse:collapse;">
    <thead>
     <tr>
      <th style="background-color:#000000; color:#fff; border:1px solid #fafafa; padding:5px 10px;">ID</th>
      <th style="background-color:#000000; color:#fff; border:1px solid #fafafa; padding:5px 10px;">Username</th>
      <th style="background-color:#000000; color:#fff; border:1px solid #fafafa; padding:5px 10px;">Name</th>
     </tr>
     </thead>
     <tbody></tbody>
    </table>
     <br />
    </form>
</body>
</html>

JSON Code

<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
  $(function () {
                $.ajax({
                    contentType: 'application/json; charset=utf-8',
                    url: 'WebForm2.aspx/GetAllUser',
                    dataType: 'json',
                    method: 'post',
                    success: function (data) {
                        for (var i = 0; i < data.d.length; i++) {
                            var GetAllUser = $('#tballUser tbody');
                            //$("#divalluser").append("" + "" + "" + "" + "" + "" + "" + "" + "" + "
Username :" + data.d[i].Username + "
Name :" + data.d[i].Name + "
"); GetAllUser.append('' + data.d[i].UserID + '' + data.d[i].Username + '' + data.d[i].Name + ''); //$("#divdisplay").append("" + "" + "" + "" + "" + "" + "" + "" + "" + "
Username :" + data.d[i].Username + "
Name :" + data.d[i].Name + "
"); } }, error: function (result) { alert('Error'); } }); return false; }); }); </script>

C# Coding : GetAllUser

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

namespace JsonWebApplication
{
    public partial class WebForm2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static List GetAllUser()
        {
            List listUser = new List();
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ConnectionString);
            SqlDataAdapter da = new SqlDataAdapter("select * from users", con);
            DataSet ds = new DataSet();
            da.Fill(ds);
            if (ds.Tables[0].Rows.Count > 0)
            {
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    User _user = new User();
                    _user.UserID = Convert.ToInt16(ds.Tables[0].Rows[i]["uid"]);
                    _user.Username = ds.Tables[0].Rows[i]["username"].ToString();
                    _user.Name = ds.Tables[0].Rows[i]["name"].ToString();
                    listUser.Add(_user);
                }
            }
            return listUser;
        }
    }
}
0 Komentar untuk "JSON : Display all User Details Data by using JSON in ASP.NET"

Back To Top