In this tutorial i am going to explain how to create dynamic pages with unique urls for each page. Before proceeding to explain the process of creating dynamic page i would like to explain what is mean by dynamic page so that you will understand better.
In the web page there are two type.
1.Static Page:
A static web page (sometimes called a flat page/stationary page) is a web page that is delivered to the user exactly as stored.
2.Dynamic Page:
Dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts.
Need For Dynamic Page:
In many cases while developing web application you will come across the situation to load the content dynamically based on some input parameters. Here we will create a single web page and we will change only the content. In this way we can have limitless pages. But all the pages will follow the same structure.
In this tutorial i am going to explain not only to create dynamic pages and also how to generate unique url for each and every page.
Our Example:
In our example the first step is creating table to save the contents. So i have created a table called Pages and i have created related stored procedures. Below is the script i used.
Now i have created a new asp.net website with C# as programming language and added a web form called AddPage.aspx to get and save the page content. Below is the html markup i used
And in the code behind i am getting all the user input and saving it to the database. Below is the corresponding code.
Now if i run the code the page will look like the below image.
And then i have created an another page called PageList.aspx to list all the pages available from the Pages table. Below is the htmls markup i used for the page.
And in the code behind page i got all the records from the pages table and listed it in the gridview with url. I will explain about the url formation in the below section. Below is the PageList.aspx.cs page cde.
Now if you run the page you will get the below output.
Now we are coming to our actual page that is dynamic page. I have created a web form called ContentPage.aspx with two lables to accomodate page title and page content. Below is the html markup used.
And before proceeding to the code behind page i made few changes in Global.asax file to make the url dynamic to each page. What i did was i have added the global.asax file to the project and added the below code in application_start event. Entire file is given below for your reference.
It means at application start event it will check for the url format. It it is like Pages/{pageUrl}.aspx format then it will transfer the page to ContentPage.aspx page. And in the content page i am getting this pageurl frim the routetable and passing it to the database. Based on that the data will be fetched from the database and shown in the fron end. The entire cs code is given below.
Now if you click the link in the pagelist.aspx page it will open the contentpage.aspx page but with differet url and different content for each url from the database. The sample output is given below.
You May Also Like:
You can download the entire source code from the below link.
If you like this article please share with your friends. Do comment your feedback.
In the web page there are two type.
1.Static Page:
A static web page (sometimes called a flat page/stationary page) is a web page that is delivered to the user exactly as stored.
2.Dynamic Page:
Dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts.
Need For Dynamic Page:
In many cases while developing web application you will come across the situation to load the content dynamically based on some input parameters. Here we will create a single web page and we will change only the content. In this way we can have limitless pages. But all the pages will follow the same structure.
In this tutorial i am going to explain not only to create dynamic pages and also how to generate unique url for each and every page.
Our Example:
In our example the first step is creating table to save the contents. So i have created a table called Pages and i have created related stored procedures. Below is the script i used.
-- Table Script
CREATE TABLE [dbo].[Pages]
(
PageId INT IDENTITY NOT NULL PRIMARY KEY,
PageName VARCHAR(100) NOT NULL,
PageUrl VARCHAR(100) NOT NULL,
Title VARCHAR(100) NOT NULL,
Content VARCHAR(3000) NOT NULL,
)
-- Procedure To Insert Into Pages Table
CREATE PROC dbo.AddToPages
@PageName VARCHAR(100),
@PageUrl VARCHAR(100),
@Title VARCHAR(100),
@Content VARCHAR(3000)
AS
BEGIN
SET NOCOUNT ON
INSERT INTO dbo.Pages(PageName,PageUrl,Title,Content)
VALUES(@PageName,@PageUrl,@Title,@Content)
SELECT SCOPE_IDENTITY() AS PageId
SET NOCOUNT OFF
END
--Procedure To Get All Pages - Page List
CREATE PROC dbo.GetAllPages
AS
BEGIN
SELECT PageId,PageName,PageUrl,Title,Content FROM dbo.Pages
END
--Procedure To Get Pages Content
CREATE PROC dbo.GetPageContent
@PageUrl VARCHAR(100)
AS
BEGIN
SET NOCOUNT ON
SELECT PageName,Title,Content FROM dbo.Pages WHERE PageUrl=@PageUrl
SET NOCOUNT OFF
END
Now i have created a new asp.net website with C# as programming language and added a web form called AddPage.aspx to get and save the page content. Below is the html markup i used
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddPage.aspx.cs" Inherits="AddPage" ValidateRequest="false" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Add Page</title>
<style type="text/css">
.containerdiv {
width: 500px;
margin: 20px auto;
border: 1px solid #444;
padding: 20px;
border-radius: 14px;
background-color: rgba(177, 173, 173, 0.18);
}
input[type="text"]
{
padding:5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="containerdiv">
<h2>Add Pages</h2>
<hr />
<table>
<tr>
<td style="width: 100px;">Page
Name
</td>
<td style="width: 350px;">
<asp:TextBox ID="txtPageName" runat="server" TextMode="SingleLine" Width="384" />
</td>
</tr>
<tr>
<td>Page Title</td>
<td>
<asp:TextBox ID="txtPageTitle" runat="server" TextMode="SingleLine" Width="384" /></td>
</tr>
<tr>
<td>Page Content</td>
<td>
<asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine" Width="350" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" OnClientClick="return fnCheckSubmit();" /></td>
</tr>
</table>
</div>
</div>
</form>
<script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: 'textarea'
});
</script>
</body>
</html>
And in the code behind i am getting all the user input and saving it to the database. Below is the corresponding code.
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.Configuration;
using
System.Data.SqlClient;
public partial class AddPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
string pageName = txtPageName.Text;
string pageTitle =
txtPageTitle.Text;
string pageURL =
pageTitle.Replace(" ", "-");
string pageContent =
txtContent.Text;
string connString = ConfigurationManager.ConnectionStrings["connString"].ConnectionString;
using (SqlConnection sqlConn
= new SqlConnection(connString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "dbo.AddToPages";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = sqlConn;
cmd.Parameters.AddWithValue("@PageName", pageName);
cmd.Parameters.AddWithValue("@PageUrl", pageURL);
cmd.Parameters.AddWithValue("@Title", pageTitle);
cmd.Parameters.AddWithValue("@Content", pageContent);
sqlConn.Open();
cmd.ExecuteNonQuery();
sqlConn.Close();
}
}
}
}
Now if i run the code the page will look like the below image.
And then i have created an another page called PageList.aspx to list all the pages available from the Pages table. Below is the htmls markup i used for the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageList.aspx.cs" Inherits="PageList" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Available Pages</title>
<style type="text/css">
.containerdiv {
width: 500px;
margin: 20px auto;
border: 1px solid #444;
padding: 20px;
border-radius: 14px;
background-color: rgba(177, 173, 173, 0.18);
}
input[type="text"]
{
padding: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="containerdiv">
<h2>Available Pages</h2>
<div>
<asp:GridView ID="grdPageList" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="PageId" HeaderText="PageId" />
<asp:BoundField DataField="Title" HeaderText="Title" />
<asp:BoundField DataField="Content" HeaderText="Content" />
<asp:BoundField DataField="PageName" HeaderText="Page
Name" />
<asp:HyperLinkField HeaderText="PageUrl" DataTextField="PageUrl" DataNavigateUrlFields="PageUrl" DataNavigateUrlFormatString="~/Pages/{0}.aspx" Target="_blank" Text="Edit" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
</form>
</body>
</html>
And in the code behind page i got all the records from the pages table and listed it in the gridview with url. I will explain about the url formation in the below section. Below is the PageList.aspx.cs page cde.
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.Configuration;
using
System.Data.SqlClient;
public partial class PageList : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string connString = ConfigurationManager.ConnectionStrings["connString"].ConnectionString;
using (SqlConnection sqlConn
= new SqlConnection(connString))
{
using (SqlCommand sqlCmd = new SqlCommand())
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
sqlCmd.Connection = sqlConn;
sqlCmd.CommandText = "dbo.GetAllPages";
sqlCmd.CommandType = CommandType.StoredProcedure;
DataSet ds = new DataSet();
sda.SelectCommand = sqlCmd;
sda.Fill(ds);
if(ds.Tables.Count>0)
{
DataTable
dt = ds.Tables[0];
grdPageList.DataSource = dt;
grdPageList.DataBind();
}
}
}
}
}
}
Now if you run the page you will get the below output.
Now we are coming to our actual page that is dynamic page. I have created a web form called ContentPage.aspx with two lables to accomodate page title and page content. Below is the html markup used.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContentPage.aspx.cs" Inherits="ContentPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.containerdiv {
width: 500px;
margin: 20px auto;
border: 1px solid #444;
padding: 20px;
border-radius: 14px;
background-color: rgba(177, 173, 173, 0.18);
}
input[type="text"]
{
padding: 5px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="containerdiv">
<h2>
<asp:Label ID="lblTitle" runat="server" /></h2>
<hr />
<asp:Label ID="lblContent" runat="server" />
</div>
</div>
</form>
</body>
</html>
And before proceeding to the code behind page i made few changes in Global.asax file to make the url dynamic to each page. What i did was i have added the global.asax file to the project and added the below code in application_start event. Entire file is given below for your reference.
<%@ Application Language="C#" %>
<%@ Import Namespace="System.Web.Routing" %>
<script runat="server">
void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.MapPageRoute("ContentPage", "Pages/{pageUrl}.aspx", "~/ContentPage.aspx");
}
void Application_End(object sender, EventArgs e)
{
// Code that runs
on application shutdown
}
void Application_Error(object sender, EventArgs e)
{
// Code that runs when an unhandled error occurs
}
void Session_Start(object sender, EventArgs e)
{
// Code that runs when a new session is started
}
void Session_End(object sender, EventArgs e)
{
// Code that runs when a session ends.
// Note: The Session_End event is raised only when the
sessionstate mode
// is set to InProc in the Web.config file. If session
mode is set to StateServer
// or SQLServer, the event is not raised.
}
</script>
It means at application start event it will check for the url format. It it is like Pages/{pageUrl}.aspx format then it will transfer the page to ContentPage.aspx page. And in the content page i am getting this pageurl frim the routetable and passing it to the database. Based on that the data will be fetched from the database and shown in the fron end. The entire cs code is given below.
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.Configuration;
using
System.Data.SqlClient;
public partial class ContentPage :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
LoadPage();
}
private void LoadPage()
{
string pageUrl = this.Page.RouteData.Values["PageUrl"].ToString();
string connString = ConfigurationManager.ConnectionStrings["connString"].ConnectionString;
using (SqlConnection sqlConn
= new SqlConnection(connString))
{
using (SqlCommand sqlCmd = new SqlCommand())
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
sqlCmd.Parameters.AddWithValue("@PageUrl", pageUrl);
sqlCmd.Connection = sqlConn;
sqlCmd.CommandText
= "dbo.GetPageContent";
sqlCmd.CommandType = CommandType.StoredProcedure;
DataSet ds = new DataSet();
sda.SelectCommand=sqlCmd;
sda.Fill(ds);
DataTable dt = ds.Tables[0];
sda.Fill(dt);
lblTitle.Text = dt.Rows[0]["Title"].ToString();
lblContent.Text = dt.Rows[0]["Content"].ToString();
}
}
}
}
}
Now if you click the link in the pagelist.aspx page it will open the contentpage.aspx page but with differet url and different content for each url from the database. The sample output is given below.
You May Also Like:
- Build Products Comparision Table/Grid in ASP.Net C#.Net and VB.Net
- How to Add Store Custom Objects in Configuration File(web.config & app.config) in ASP.Net & C#.Net
- How to create simple mathmatical captcha in ASP.Net C#.Net and VB.Net
- Azure Blob Storage Create Container - C#.Net,VB.Net
- Asp.Net - How to Create Dynamic Pages & Url With C#.Net,VB.Net
- Asp.Net Serialization & Deserialization with C#.Net and VB.Net
You can download the entire source code from the below link.
Comments
Post a Comment