آموزش و سورس ایجاد صفحات پویا در Asp.Net
0 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"] مطلب را از دیتابیس پیدا می کنیم و نمایش می دهیم.

دانلود

نویسنده حسین فتحی
گروه مطلب Asp.Net
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲۷ آذر ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۷
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.
خرید VIP
امکان خرید از درگاه های بانکی و حساب مجازی

برای دانلود بعد از خرید به همین صفحه برگردید تا لینک های دانلود نمایش داده شود

نظر / سوال

Captcha
نظرات کاربران

  • ostad

    سلام و خسته نباشید. من متد مورد نظر شما را برای یک web page ساده نوشتم: route.MapPageRoute("contactUs", "ContactUs", "~/ContactUs.aspx"); اما کار نمی کند. یعنی اول به صورت aspx و در صورتی که aspx را پاک کنم کار می کند. لطفا راهنمایی کنید در ضمن از vs2010 استفاده می کنم.

    پاسخ
    • مدیر

      سلام

      در صورتی که بخواهید aspx کار کنه باید در Global.asax  پسوند aspx را اضافه کنید. سورس رو دانلود کنید و تست کنید

      پاسخ
      • استاد

        نمی خواهم aspx کنارش باشه . برای مدل مورد نظر بالا که انجام دادید خطای 404 را برمی گرداند.

        پاسخ
        • مدیر

          سلام

          این کدها مطلب رو بدون aspx نمایش میده مثلا برای صفحه درباره ما باید تنظیماتی در وب کانفیگ انجام دهید که تو سایت توضیح داده شده.

          پاسخ
  • فاطمه

    سلام وخسته نباشید این فایل فیلم آمزشی یا پی دی اف یا پروژه اس؟من تازه وارد سایت شدم قیمت این فایل برای من هم 750 تومنه؟

    پاسخ
    • مدیر

      با سلام و درود

      قیمت های متغیر هستند و این سورس کامل آموزش هستش و فیلم آموزش ایجاد صفحات به صورت داینامیک با Asp.Net هم تو سایت هستش

      پاسخ
  • reza

    سلام ای کاش این آموزش را به صورت فیلم هم میزاشتین مرسی

    پاسخ