0
آموزش و سورس ایجاد صفحات پویا در Asp.Net
آموزش و سورس ایجاد صفحات پویا در Asp.Net
در این پست قصد داریم آموزش نحوه ساخت صفحات پویا در Asp.Net را توضیح دهیم.
منظور از صفحات پویا، این است که مطالب را در دیتابیس ذخیره کنیم و در یک صفحه نمایش دهیم. برای این کار ابتدا یک دیتابیس ایجاد کنید سپس جدول Pages را داخل دیتابیس درست کنید و فیلد های زیر را در آن ایجاد کنید
PostId : برای آی دی مطالب
PageName : نام صفحه که در قسمت آدرس بار نمایش داده خواهد شد
Title : عنوان صفحه که اختیاری می باشد
Content : محتوای مطلب
این فیلد های ضروریی می باشد و همچنین می توانید فیلد های زیادی نیز در نظر بگیرید.
قسمت ثبت صفحات
یک صفحه به نام CreatePage.aspx ایجاد کنید شما هر نام دیگری نیز می توانید در نظربگیرید. قسمت کدهای html به صورت زیر می باشد.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CreatePage.aspx.cs" Inherits="CreatePage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ایران گنج</title>
<style type="text/css">
body {
background-color: #dddddd;
direction: rtl;
}
.content {
width: 900px;
height: 500px;
margin-left: auto;
margin-right: auto;
}
.wrapper {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
table {
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<div class="content">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>نام صفحه
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtPageName" runat="server" Width="300px" />
</td>
</tr>
<tr>
<td>عنوان:
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtTitle" Width="300px" runat="server" />
</td>
</tr>
<tr>
<td>محتوا:
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtContent" runat="server" Width="400px" Height="300" TextMode="MultiLine" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnCreate" Text="ثبت" runat="server" OnClick="btnCreate_Click" />
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
در کدهای بالا به صورت کامل واضع است و نیاز به توضیح ندارد.
حال در قسمت کدهای سی شارپ صفحه CreatePage.aspx در کلیک دکمه ثبت کدهای زیر را بنویسید.
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 CreatePage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnCreate_Click(object sender, EventArgs e)
{
string query = "INSERT INTO [Pages] VALUES (@PageName, @Title, @Content)";
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@PageName", txtPageName.Text.Trim());
cmd.Parameters.AddWithValue("@Title", txtTitle.Text);
cmd.Parameters.AddWithValue("@Content", txtContent.Text);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
Response.Redirect("~/Default.aspx");
}
}
}
}
در کدهای بالا اطلاعات را از تکست باکس های می خوانیم و در دیتابیس ذخیره می کنیم.
ایجاد صفحه نمایش مطالب
برای اینکه مطالب در در صفحه اول نمایش دهیم یک صفحه به نام Default.aspx ایجاد کنید و کدهای زیر را در آن کپی کنید.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>نخست</title>
</head>
<body>
<form id="form1" runat="server">
<asp:HyperLink NavigateUrl="~/AddPage.aspx" Text="ایجاد صفحه" runat="server" />
<hr />
<asp:Repeater ID="rptPages" runat="server">
<ItemTemplate>
<%# Container.ItemIndex + 1 %>
<asp:Literal ID="litTitle" runat="server" Text='<%# Eval("Title") %>'></asp:Literal>
<asp:Literal ID="litContent" runat="server" Text='<%# Eval("Content") %>'></asp:Literal>
<asp:HyperLink NavigateUrl='<%# string.Format("/post/{0}/{1}",Eval("PostID"),Eval("PageName").ToString().Replace(" ","-").Replace(".","-").Replace("C#","csharp")) %>' Text="ادامه مطلب"
runat="server" />
</ItemTemplate>
</asp:Repeater>
</form>
</body>
</html>
برای نمایش مطالب از یک Repeater استفاده شده همچنین شما می توانید از GridView و ... نیز استفاده کنید.
ابتدا عنوان مطالب و محتوای مطالب را نمایش می دهیم در قسمت کلیک ادامه مطلب به این صورت است که کلمه post نوشته شده و شما هر کلمه دیگری به جای آن می توانید بنویسید و سپس نام فیلد آی دی مطلب و نام صفحه نوشته شده. که به صورت زیر نمایش داده می شود
آموزش-ایجاد-صفحات-پویا-در-Post/30/asp-net
نکته های خیلی مهم
اگر توجه داشته باشید در این قسمت آدرس صفحات به صورت فارسی نمایش داده می شود.
برای زیبا تر شدن نام صفحه از دستور Replace استفاده کردیم تا فاصله ها را به خط تیره تبدیل کنیم. که در سئو سایت تاثیر زیادی دارد.
در نام صفحه نباید از کارکترهای نقطه،علامت # و... استفاده کنید در صورت استفاده وب سایت شما با خطا مواجه خواهد شد. ولی در صورت که استفاده کنید باید با استفاده از دستور Replace آنها را تغییر دهید مثلا به جای C#.Net باید CSharp-Net در آدرس بار Replace شود.
کدهای قسمت سی شارپ صفحه Default.aspx به صورت زیر می باشد.
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 _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindPages();
}
}
private void BindPages()
{
string query = "SELECT [PostID], [PageName], [Title], [Content] FROM [Pages]";
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
rptPages.DataSource = dt;
rptPages.DataBind();
}
}
}
}
}
}
برای زیباتر شدن کد نویسی، بهتر است الگو‌های تبدیل را در یک تابع جدا بنویسیم
در Global.asax کدهای زیر را اضافه کنید.
<%@ Application Language="C#" %>
<%@ Import Namespace="System.Web.Routing" %>
<script RunAt="server">
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
RoutingSite(RouteTable.Routes);
}
public static void RoutingSite(RouteCollection route)
{
route.MapPageRoute("DynamicPage", "post/{PostID}/{PageName}", "~/DynamicPage.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>
داشتن Urlهای تمیز و با معنا یکی از ویژگی‌های یک سایت خوب هست و بهترین روش برای بازنویسی URL ها یا همان Url Routing، استفاده از امکانات توکار خود ASP.Net برای این کار است.
ابتدا باید فضای نام System.Web.Routing را در فایل Global.asax اضافه کنیم .
سپس توسط Route.MapPageRoute در Application_Start میتوانیم الگو‌های تبدیل Urlهای خود را بنویسیم.
تابع Route.MapPageRoute سه ورودی می‌گیرد. ورودی اول یک نام برای الگوی تبدیل ماست که در مثال بالا،" DynamicPage " نام گرفته است. ورودی دوم، الگوی تبدیل ماست که می‌گوید Url هایی به شکل post/{PostID}/{PageName} را به صفحه‌ی DynamicPage.aspx بفرست و در صفحه‌ی DynamicPage.aspx میتوانیم مقدار { PostID } را توسط Page.RouteData.Values["PostID"] بدست بیاوریم . ورودی سوم نیز صفحه‌ی مقصد می‌باشد.
با این الگو میتوانیم لینک هایی مثل "موبایل" Product/ ایجاد کنیم و در صفحه‌ای که میخواهیم اطلاعات محصول را نشان دهیم از Page.RouteData.Values["ProductName"] که همان مقدار موبایل را بر میگرداند، استفاده کنیم.
صفحه نمایش مطلب
در صفحه DynamicPage.aspx کد های آن به شکل زیر می باشد.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicPage.aspx.cs" Inherits="DynamicPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<h2>
<asp:Label ID="lblTitle" runat="server" /></h2>
<hr />
<asp:Label ID="lblContent" runat="server" />
</form>
</body>
</html>
و کدهای سی شارپ آن نیز به شکل زیر می باشد.
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 DynamicPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulatePage();
}
}
private void PopulatePage()
{
string postId = this.Page.RouteData.Values["PostID"].ToString();
string query = "SELECT [PageName],[Title], [Content] FROM [Pages] WHERE [PostID] = @PostID";
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Parameters.AddWithValue("@PostID", postId);
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
Page.Title = dt.Rows[0]["PageName"].ToString();
lblTitle.Text = dt.Rows[0]["Title"].ToString();
lblContent.Text = dt.Rows[0]["Content"].ToString();
}
}
}
}
}
}
در قسمت قبل که توضیح دادیم Page.RouteData.Values["PostID"] مطلب را از دیتابیس پیدا می کنیم و نمایش می دهیم.
این مطلب را به اشتراک بگذارید...
نظر / سوال