Introduction:
In this article, we will delve into the process of retrieving user details from a database using user IDs and displaying the information on an ASP.NET webpage through JSON. We will cover the fundamentals of JSON, create a users table, design the HTML layout, and implement the necessary JSON code and C# logic.
JSON Basics:
JSON, or JavaScript Object Notation, is a lightweight data-interchange format that is both language-independent and easy to understand. It is widely used for exchanging data between a server and a web application.
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')
HTML Markup: Designing the Webpage:
We'll design a simple HTML webpage with a textbox to input the user ID and a button to trigger the data retrieval. The retrieved user details will be displayed in a <div> tag.
<%@ 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">
<div>
<table>
<tr>
<td>Enter User ID :</td>
<td>
<asp:TextBox ID="txtuserid" runat="server"></asp:TextBox>
</td>
<td>
<asp:Button ID="b1" runat="server" Text="Get User Details" />
</td>
</tr>
</table>
</div><br />
<div id="divdisplay"></div>
<br />
</form>
</body>
</html>
JSON Code:
To fetch and display user details using JSON, we'll utilize jQuery. The following script makes an AJAX call to the server-side method and dynamically updates the <div> with the retrieved information.
<script src="jquery-2.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#b1').click(function () {
var uid = $('#txtuserid').val();
$.ajax({
contentType: 'application/json; charset=utf-8',
url: 'WebForm2.aspx/GetUser',
data: JSON.stringify({ uid: uid }),
dataType: 'json',
method: 'post',
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#divdisplay").empty();
$("#divdisplay").append("<table border='0'>" + "<tr>" + "<td>Username :</td>" + "<td>" + data.d[i].Username + "</td>" + "</tr>" + "<tr>" + "<td>Name :</td>" + "<td>" + data.d[i].Name + "</td>" + "</tr>" + "</table>");
}
},
error: function (result) {
alert('Error');
}
});
return false;
});
</script>
C# Coding: Retrieving User Details:
In the code-behind (WebForm2.aspx.cs), we define a WebMethod called GetUser that takes a user ID as input, queries the database, and returns the user details as a list.
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<User> GetUser(int uid)
{
List<User> listUser = new List<User>();
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ConnectionString);
SqlDataAdapter da = new SqlDataAdapter("select username, name from users where uid='" + uid + "'", con);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
{
User _user = new User();
_user.Username = ds.Tables[0].Rows[0]["username"].ToString();
_user.Name = ds.Tables[0].Rows[0]["name"].ToString();
listUser.Add(_user);
}
return listUser;
}
}
}
Conclusion:
This article demonstrates the step-by-step process of using JSON to retrieve user details based on user IDs in an ASP.NET application. By combining HTML, jQuery, and C#, developers can create dynamic and interactive webpages that enhance the user experience.
0 Comments