Naresh LamGade
Naresh LamGadeWe are very much thankful to that ‘YouTube Video’ which made our module leader ‘Dhurba Sir’ emotional and forced him to extend our assignment deadline for 7 days. But still we were a lazy ass who did start the assignment just two days before our assignment submission (Yesterday, 26th April,2017).
You can’t stop thanking YouTube, if you are IT student for everything but right now, Video Tutorials. Must agree, with the help of tutorial, we completed the assignment. Thank you everyone who made those awesome and amazing tutorial videos.
Now, let’s get back to the main, today I want to share some of the few tips and tricks that I learned while using ASP.NET and Visual Studio in those short time period.
ASP.NET is an open-source server-side web application framework designed for web development to produce dynamic web sites, web application and web services. We will not be doing any rendering of any of their components ( Just dag and drop , should work ) but we will look into the server side section.
Today we will be learning to run dynamic codes ( which runs on the server) within html blocks on a page.
Dynamic code execution is a powerful feature that allows application to be extended with code that is not compiled into the application. They are mostly used to use customize and extend the web application and their features.
We will be using set of blocks to run dynamic code.
<% -- dynamic code --- %>
This is very similar to other web development technologies such as PHP, JSP.
Inorder to run a dynamic code, first we should import data provider.
<%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.SqlClient" %>
Now,
We have a table with a name ‘UserInfo‘ which has 7 columns.
which has :
Time to make some connection using local Connection String.
Here we will again use ‘<%‘ to begin and end the dynamic code.
<%
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand("SELECT * FROM TableName", con);
con.Open();
SqlDataReader data;
data = cmd.ExecuteReader();
while (data.Read()) // using while loop to get all the data from the table
{
// Since data holds the response data, so we will be using it to read the entire table column.
Response.Write(data["column_name"]);
%>
Now, we got the response from the database in data[].
Here, we will be using the ‘Response.Write(data[“column_name”])’ to place the data on the table.
Now, we will be placing the entire response from the data reader in the table data ‘<td>’.
<td class=" "><% Response.Write(data["user_id"]); %> </td>
<td class=" "><% Response.Write(data["name"]); %></td>
<td class=" "><% Response.Write(data["user_name"]); %></td>
<td class=" "><% Response.Write(data["user_pass"]); %></td>
<td class=" "><% Response.Write(data["user_email"]); %></td>
<td class=" "><% Response.Write(data["user_address"]); %></td>
<td class=" "><% Response.Write(data["user_role"]); %></td>
Here, we will be using the ‘Response.Write(data[“column_name”])’ to place the data on the table.
This is a normal table with a dynamic code used to retrive the database information from the database.
This table doesn’t make any spark when it comes to bootstrap.
Table with Bootstrap.
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>User List</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table class="table table-striped responsive-utilities jambo_table bulk_action">
<thead>
<tr class="headings">
<th>
<input type="checkbox" id="check-all" class="flat">
</th>
<th class="column-title">ID </th>
<th class="column-title"> NAME </th>
<th class="column-title">USER NAME </th>
<th class="column-title">USER PASS </th>
<th class="column-title">EMAIL</th>
<th class="column-title"> ADDRESS </th>
<th class="column-title">USER ROLE </th>
<th class="column-title no-link last"><span class="nobr">Action</span>
</th>
<th class="bulk-actions" colspan="7">
<a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt"> </span> ) <i class="fa fa-chevron-down"></i></a>
</th>
</tr>
</thead>
Now, we will be placing the entire response from the data reader in the table data
<td class=" "><% Response.Write(data["user_id"]); %> </td> <td class=" "><% Response.Write(data["name"]); %></td> <td class=" "><% Response.Write(data["user_name"]); %></td> <td class=" "><% Response.Write(data["user_pass"]); %></td> <td class=" "><% Response.Write(data["user_email"]); %></td> <td class=" "><% Response.Write(data["user_address"]); %></td> <td class=" "><% Response.Write(data["user_role"]); %></td>
Data in bootstrap table.
Here’s the logic now.
Dynamic Execution
So, using the Response.Write you can show data anywhere with your own flexibility.
So My Entire Code Looks Like :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Bootstraps.aspx.cs" Inherits="Library.Bootstraps" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET & BOOTSTRAP</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/icheck/flat/green.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<div class="right_col" role="main">
<div class="row">
<div class="clearfix"></div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>User List</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<table class="table table-striped responsive-utilities jambo_table bulk_action">
<thead>
<tr class="headings">
<th>
<input type="checkbox" id="check-all" class="flat">
</th>
<th class="column-title">ID </th>
<th class="column-title"> NAME </th>
<th class="column-title">USER NAME </th>
<th class="column-title">USER PASS </th>
<th class="column-title">EMAIL</th>
<th class="column-title"> ADDRESS </th>
<th class="column-title">USER ROLE </th>
<th class="column-title no-link last"><span class="nobr">Action</span>
</th>
<th class="bulk-actions" colspan="7">
<a class="antoo" style="color:#fff; font-weight:500;">Bulk Actions ( <span class="action-cnt"> </span> ) <i class="fa fa-chevron-down"></i></a>
</th>
</tr>
</thead>
<%@ import Namespace="System.Data" %>
<%@ import Namespace="System.Data.SqlClient" %>
<%
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand("SELECT * FROM UserInfo", con);
con.Open();
SqlDataReader dr;
dr = cmd.ExecuteReader();
while (dr.Read())
{
%>
<tbody>
<tr class="pointer">
<td class="a-center ">
<input type="checkbox" class="flat" name="table_records">
</td>
<td class=" "><% Response.Write(dr["user_id"]); %> </td>
<td class=" "><% Response.Write(dr["name"]); %></td>
<td class=" "><% Response.Write(dr["user_name"]); %></td>
<td class=" "><% Response.Write(dr["user_pass"]); %></td>
<td class=" "><% Response.Write(dr["user_email"]); %></td>
<td class=" "><% Response.Write(dr["user_address"]); %></td>
<td class=" "><% Response.Write(dr["user_role"]); %></td>-
<td class="last"><a href="ShowUsers.aspx?id=<% Response.Write(dr["user_id"]); %>"><img src="./images/edit.png" height="20px" height="20px" title="Edit"></a> <a href="ShowUsers.aspx?id=<% Response.Write(dr["user_id"]); %>"><img src="./images/delete.png" height="20px" height="20px" title="Delete"></a>--%>
</td>
<!-- <td class=" last"><a href="#"></a>
</td> -->
</tr>
<% } %>
</tbody>
</table>
</div>
<script src="js/bootstrap.min.js"></script>
<!-- bootstrap progress js -->
<script src="js/progressbar/bootstrap-progressbar.min.js"></script>
<!-- icheck -->
<script src="js/icheck/icheck.min.js"></script>
<script src="js/custom.js"></script>
<!-- pace -->
<script src="js/pace/pace.min.js"></script>
</div>
</form>
</body>
</html>
I hope you enjoyed this tutorial. I was just sharing my learning experience and hope this will help.
Naresh LamGade