در این پست خواهیم دید که چگونه در ASP.Net یک یک بلاگ ساده ایجاد و اجرا کنیم. بلاگ دارای یک بانک اطلاعاتی می باشد و هر بلاگ یک URL واحد دارد که به کمک ویژگی Url Routing پیاده سازی می شود.

بانک اطلاعاتی

در تصویر زیر نمایی از جدولی را که در می بینید که برای ذخیره بلاگ استفاده می شود.

فضای نام (NameSpace)

بعد از ایجاد برنامه فضای نام های زیر را در صفحه اضافه کنید.

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

اضافه کردن بلاگ

به منظور اضافه کردن بلاگ، یک صفحه بنام AddBlog به برنامه اضافه کنید.

HTML

کدهای HTML زیر شامل یک فرم می باشد تا کاربران بتوانند جزئیات بلاگ مانند عنوان و بدنه بلاگ را برای ذخیره در بانک اطلاعاتی وارد کنند. TextBox موجود در بدنه بصورت Multiline می باشد که از پلاگین TinyMCE RichTextEditor استفاده شده است.

<table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                عنوان:
            </td>
        </tr>
        <tr>
            <td>
                <asp:TextBox ID="txtTitle" runat="server" Width="550" />
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                متن اصلی:
            </td>
        </tr>
        <tr>
            <td>
                <asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine" />
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnSubmit" Text="ثبت" runat="server" OnClick="Submit" />
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({ selector: 'textarea' });
    </script>

کد:

کدهای زیر برای ذخیره جزئیات بلاگ در جدول بانک اطلاعاتی می باشد.

protected void Submit(object sender, EventArgs e)
{
    string query = "INSERT INTO [Blogs] VALUES (@Title, @Body)";
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            cmd.Parameters.AddWithValue("@Title", txtTitle.Text);
            cmd.Parameters.AddWithValue("@Body", txtBody.Text);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
            Response.Redirect("~/Default.aspx");
        }
    }
}

پیاده سازی مسیریابی URL

بعد از درج بلاگ، کار بعدی پیاده سازی مسیریابی URL می باشد تا بتوانیم از طریق مرورگر، به بلاگ دسترسی داشته باشیم

ازین رو نیاز به اضافه کردن یک فایل Globsl.asax می باشد و در آن نیاز به ثبت مسیری که درخواست ها را به یک صفحه ای به نام DisplayBlog  ارسال کند می باشد.

<%@ Application Language="C#" %>
<%@ Import Namespace="System.Web.Routing" %>
<script RunAt="server">
    void Application_Start(object sender, EventArgs e)
    {
        RegisterRoutes(RouteTable.Routes);
    }
 
    static void RegisterRoutes(RouteCollection routes)
    {
        routes.MapPageRoute("DisplayBlog", "Blogs/{BlogId}/{Slug}.aspx", "~/DisplayBlog.aspx");
    }
</script>
 
VB.Net
<%@ Application Language="VB" %>
<%@ Import Namespace="System.Web.Routing" %>
<script RunAt="server">
    Private Sub Application_Start(sender As Object, e As EventArgs)
        RegisterRoutes(RouteTable.Routes)
    End Sub
 
    Private Shared Sub RegisterRoutes(routes As RouteCollection)
        routes.MapPageRoute("DisplayBlog", "Blogs/{BlogId}/{Slug}.aspx", "~/DisplayBlog.aspx")
    End Sub
</script>

نکته: URL Routing تنها در Net 3.5. به بعد وجود دارد.

نمایش بلاگ از بانک اطلاعاتی

برای نمایش بلاگ از بانک اطلاعاتی، از یک صفحه ای به نام DisplayBlog.aspx استفاده می شود.

HTML

کدهای HTML زیر شامل Lableهایی برای نمایش عنوان و بدنه بلاگ می باشد.

<h2>
    <asp:Label ID="lblTitle" runat="server" /></h2>
<hr />
<asp:Label ID="lblBody" runat="server" />

کد:

درون رویداد Page Load مقدار ID بلاگ از RouteData واکشی می شود.

سپس با استفاده از BlogId، جزئیات دیگری مانند عنوان و بدنه از بانک اطلاعاتی واکشی شده و با استفاده از کنترل Label نمایش داده می شوند.

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.PopulateBlog();
    }
}
 
private void PopulateBlogs()
{
    string blogId = this.Page.RouteData.Values["BlogId"].ToString();
    string query = "SELECT [Title], [Body] FROM [Blogs] WHERE [BlogId] = @BlogId";
    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("@BlogId", blogId);
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    lblTitle.Text = dt.Rows[0]["Title"].ToString();
                    lblBody.Text = dt.Rows[0]["Body"].ToString();
                }
            }
        }
    }
}

نمایش لیستی از بلاگ ها:

هنگامی که جزئیات بلاگ در بانک اطلاعاتی نمایش درج شد، صفحه AddBlog.aspx کاربر را به سمت صفحه Default.aspx هدایت می کند تا کاربر بتواند لیستی از بلاگ های وارد شده در بانک اطلاعاتی را ببیند.

کد HTMl

کد HTML شامل یک HyperLink برای دسترسی کاربر به صفحه AddBlog.aspx می باشد و همچنین یک کنترل Repeater برای نمایش لیستی از بلاگ های موجود در بانک اطلاعاتی نیز وجود دارد.

باید توجه داشته باشید که خصوصیت NavigateUrl مربوط به HyperLink یک آدرس شبیه آدرس ثبت شده در فایل Global.asax می باشد.

<h2>
        بلاگ ها</h2>
    <br />
    <asp:HyperLink NavigateUrl="~/AddBlog.aspx" Text="ایجاد بلاگ" runat="server" />
    <hr />
    <asp:Repeater ID="rptPages" runat="server" >
        <ItemTemplate>
            <%# Container.ItemIndex + 1 %>
            <asp:HyperLink NavigateUrl='<%# string.Format("~/Blogs/{0}/{1}.aspx", Eval("BlogId"), Eval("Slug")) %>' Text='<%# Eval("Title") %>'
                runat="server" />
        </ItemTemplate>
        <SeparatorTemplate>
            <br />
        </SeparatorTemplate>
    </asp:Repeater>

کد:

کنترل Repeater با لیستی از بلاگ های ذخیره شده در جدول بانک اطلاعاتی در رویداد PageLoad پر می شود.

در اینجا، عنوان در URL با جایگزین کردن خط تیره بجای فاصله ایجاد شده است.

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        this.PopulateBlogs();
    }
}
 
private void PopulateBlogs()
{
    string query = "SELECT [BlogId], [Title], REPLACE([Title], ' ', '-') [SLUG], [Body] FROM [Blogs]";
    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();
                }
            }
        }
    }
}

مراحل اجرای برنامه را می توانید در عکس های زیر مشاهده کنید.

1:

2:

3:

4:

5:

برای دیدن جزئیات کامل برنامه، می توانید فایل آن را به همراه فایل اجرایی بانک اطلاعاتی آن، از قسمت فایل ضمیمه دانلود کنید.