Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,976

HOME > .NET Framework > ASP.NET กับแนวคิดการออกแบบ WebPage การวาง Layout ของหน้าเว็บและการเปลี่ยน URL




Clound SSD Virtual Server

ASP.NET กับแนวคิดการออกแบบ WebPage การวาง Layout ของหน้าเว็บและการเปลี่ยน URL

 
  ASP.NET กับแนวคิดการออกแบบ WebPage การวาง Layout ของหน้าเว็บและการเปลี่ยน URL
บทความนี้ไม่ใช่เทคนิคใหม่แต่ก็ได้นำเขียนบทความไว้คร่าว ๆ ในเว็บนานแล้ว แต่อาจจะยังไม่ชัดเช่นเท่าไหร่ หลายคนที่เขียนอยู่แล้วอาจจะรู้และนำไปใช้ชนชินตา หรือใช้เทคนิคอื่น ๆ ที่ดีกว่า ซึ่งใน ASP.NET สามารถออกแบบได้หลากหลายจริง ๆ แต่สำหรับมือใหม่ ลองอ่านบทความนี้ดู อาจจะเป็นการจุดประกายแนวคิดความคิดสร้างสรรค์การออกแบบวางโครงสร้าง การต่อยอด ที่ง่ายต่อการนำไปใช้ในรูปแบบต่าง ๆ

สำหรับในบทความนี้จะสื่อถึงการวางโครงสร้าง Webpage เมื่อเปลี่ยน URL ของเว็บเป็นสำคัญเช่น

http://localhost/WebSite/Default.aspx?page=service


เมื่อเรียก URL นี้ก็จะดึงหน้า Service ออกมาแสดง

หรือ

http://localhost/WebSite/Default.aspx?page=contactus


ก็จะดึงข้อมูลหน้า Contact Us มาแสดง


โดยหน้า Webpage ส่วนอื่น ๆ จะยังแสดง Layout เหมือนเดิม เพียงแต่เราได้กำหนดตำแหน่งบางจุดเท่านั้นที่ต้องการให้เปลี่ยน

ASP.NET Webpage Layout Design

จากโครงสร้างคร่าว ๆ จะเห็นว่า Banner , Menu , Footer จะเป็นข้อมูลที่คงที่ตลอด บริเวรที่ต้องการให้เปลี่ยนคือ Container

สำหรับวิธีการนั้นไม่ยากโดยหลัก ๆ แล้วไฟล์ Default.aspx จะเป็นไฟล์แรกที่ Web Server เรียกข้อมูลเพื่อแสดงผล ส่วนพวกหน้า Webpage ต่าง ๆ แทนที่จะใช้ Wepage(.aspx) เราจะใช้ Web User Control (.ascx) เพื่อโหลดและแสดงผลในหน้า Webpage อีกที

ASP.NET Webpage Layout Design

เริ่มต้นด้วยการสร้าง Project ขึ้นมาใหม่ ASP.NET Web Application

ASP.NET Webpage Layout Design

หลังจากสร้าง Project เสร็จเรียบร้อยแล้ว ไฟล์ที่จะเห็นที่โปรแกรมสร้างให้อัตโนมัติคือ Default.aspx ซึ่งเมื่อเปิดหน้า Design ก็จะเห็นหน้าจอว่าง ๆ เหมือนในรูป

ASP.NET Webpage Layout Design

สร้างออกแบบ Table ให้มีโครงสร้างเหมือนในรูป

ASP.NET Webpage Layout Design

สร้าง HyperLink ดังรูป ใตัวอย่างจะมีอยู่ 4 เมนู คือ Home , Service , About Us , Contact Us








ASP.NET Webpage Layout Design

กำหนด NavigateUrl ให้แต่ล่ะตัว เช่น เหมือนในรูป หรือดูที่ Code นี้

<asp:HyperLink ID="hplHome" runat="server" NavigateUrl="Default.aspx">Home</asp:HyperLink>
<asp:HyperLink ID="hplService" runat="server" NavigateUrl="?page=service">Service</asp:HyperLink>
<asp:HyperLink ID="hplAboutUs" runat="server" NavigateUrl="?page=aboutus">About Us</asp:HyperLink>
<asp:HyperLink ID="hplContactUs" runat="server" NavigateUrl="?page=contactus">Contact Us</asp:HyperLink>


โดยแต่ล่ะ Link ให้บ่งบอกวัตถุประสงค์และปลายทางของ URL (วิธีนี้มีผลดีต่อ SEO ของเว็บด้วย)

ASP.NET Webpage Layout Design

ลาก Control ชื่อ panel ไปไว้ในส่วนของ Container ตั้งชื่อเป็น hplContainer

ASP.NET Webpage Layout Design

ตั้งชื่อให้กับ Control panel ชื่อ hplContainer

ASP.NET Webpage Layout Design

เพิ่มหน้า Web User Control โดยคลิกขวาที่ Project - > Add -> New Item

ASP.NET Webpage Layout Design

เลือก Web User Control และก็ตั้งชื่อให้กับ Web User Control อย่างเช่นหน้านี้เกี่ยวกับเมนู Service ก็ตั้งชื่อ PageService.ascx

ASP.NET Webpage Layout Design

ทดสอบพิมพ์ข้อความลงไป เพื่อให้ตอนที่ทดสอบรันแสดงผล จะได้เห็นความแตกต่าง

ASP.NET Webpage Layout Design

หน้าอื่น ๆ ก็เช่นเดียวกัน

หลังจากที่เพิ่มไฟล์ Web User Control ครบทุกหน้าแล้ว ก็ให้กลับมาที่หน้า Default.aspx ดับเบิ้ลคลิกที่หน้า Page เพื่อเรียก Event OnLoad() ให้ใส่คำสั่งนี้ลงไป

VB.NET
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim objCtrl As Control
        Dim strPage As String
        strPage = Request.QueryString("page")

        Select Case strPage
            Case "service"
                objCtrl = LoadControl("~/PageService.ascx")
                Exit Select
            Case "aboutus"
                objCtrl = LoadControl("~/PageAboutUs.ascx")
                Exit Select
            Case "contactus"
                objCtrl = LoadControl("~/PageContactUs.ascx")
                Exit Select
            Case Else
                objCtrl = LoadControl("~/PageHome.ascx")
                Exit Select
        End Select

        Me.pnlContainer.Controls.Add(objCtrl)
    End Sub


C#
protected void Page_Load(object sender, System.EventArgs e)
{
	Control objCtrl = default(Control);
	string strPage = null;
	strPage = Request.QueryString("page");

	switch (strPage) {
		case "service":
			objCtrl = LoadControl("~/PageService.ascx");
			break; 

		case "aboutus":
			objCtrl = LoadControl("~/PageAboutUs.ascx");
			break; 

		case "contactus":
			objCtrl = LoadControl("~/PageContactUs.ascx");
			break; 

		default:
			objCtrl = LoadControl("~/PageHome.ascx");
			break;
	}

	this.pnlContainer.Controls.Add(objCtrl);
}


คำสั่งมีทั้งที่เป็น VB.NET และ C# สำหรับคำอธิบาย Code ก็ไม่มีอะไรมา เช่น Request.QueryString("page") ถ้าส่งค่า ?page=service ก็ให้โหลดหน้า LoadControl("~/PageService.ascx"); มาแสดงผล



Screenshot ทดสอบการแสดงผล

ASP.NET Webpage Layout Design

เมื่อเรียกไฟล์ Default.aspx ก็จะมีการโหลด PageHome.ascx มาแสดง ซึ่งเป็นเงื่อนไขกรณีที่ไม่ได้เลือกข้อมูลใด ๆ มาแสดงผล

ASP.NET Webpage Layout Design

หรือเรียก Default.aspx?page=service ก็จะเรียก PageService.ascx มาแสดงผล

จากตัวอย่างจะเห็นว่ากรณีที่เรา Design Template ไว้ เราจะทำการแก้ไขหน้า Template หลักที่ไฟล์เดียวเท่านั้นคือไฟล์ Default.aspx ส่วนพวก Page อื่น ๆ จะเป็นเพียงแค่ Content ประกอบของหน้านั้น ๆ สำหรับวิธีนี้เป็นเพียงแค่วิธีหนึ่งที่แนะนำให้ลองนำไปใช้ดู หรือจะลองใช้ ASP.NET กับ MasterPage ซึ่งใช้ Concept เช่นเดียวกัน

ดาวน์โหลด Code ไปศึกษา
DemoWebSite.zip








บทความอื่น ๆ ที่เกี่ยวข้อง

ASP.NET MasterPage

Go to : ASP.NET Master Page
Go to : ASP.NET Web User Control


       
Bookmark.   
       

 

  By : TC Admin
  Score Rating : -
  Create Date : 2012-03-12 16:13:59
  Download : No files
     

Clound SSD Virtual Server
-->
Related Links
Crystal Report กับการสร้าง Report รายงานแบบ JOIN ข้อมูลหลายตาราง Table (.NET)
Crystal Report กับการสร้าง Report รายงานแบบ JOIN ข้อมูลหลายตาราง Table (.NET)
ตัวอย่างการออก report ของ crystal report ที่มีความซับซ้อนยิ่งขึ้น และการนำข้อมูลหลาย ๆ ตารางมาแสดง ใน report เดียวกัน
Rating :
Update :
2017-03-17 21:20:01 View : 52,444
C# (.Net) Open Excel Template and Create Font,Border,Color,Style (Office 2003,2007,2010)
C# (.Net) Open Excel Template and Create Font,Border,Color,Style (Office 2003,2007,2010)
ตัวอย่างการใช้ C# ในการเปิดไฟล์ Excel ที่มีอยู่ และทำการสร้างเป็น Excel ชุดใหม่ โดยตกแต่งข้อความ เช่น สี , ขนาด ของ ฟอนต์
Rating :
Update :
2017-03-24 21:24:23 View : 17,612
สร้าง Sub Report (Subreport) บน Crystal Report แบบ Step by Step (VB.NET /C#)
สร้าง Sub Report (Subreport) บน Crystal Report แบบ Step by Step (VB.NET /C#)
การสร้าง Sub Report บน Crystal Report และการ Link ข้อมูลระหว่าง Main Report กับ Sub Report รวมทั้งการ Set DataSource ให้กับ Sub Report
Rating :
Update :
2017-03-24 21:34:46 View : 42,635
การสร้างฟอร์มด้วย DataGridView เบื้องต้นแบบ Step by Step [ VB.NET (Windows App+SQL Server) ]
การสร้างฟอร์มด้วย DataGridView เบื้องต้นแบบ Step by Step [ VB.NET (Windows App+SQL Server) ]
การสร้างฟอร์มด้วย DataGridView เบื้องต้นแบบ Step by Step Development Tool: Visual Studio 2010 Express Database Engine: MS SQL Server 2005 Express
Rating :
Update :
2011-07-24 19:33:14 View : 17,253
Generating Excel Report in .NET Framework
Generating Excel Report in .NET Framework
สร้างไฟล์เอกสาร Excel บน Windows Application และ Console Application ด้วย Framework
Rating :
Update :
2017-03-24 21:16:47 View : 8,063
VB.NET/C# Login Check Username Password
VB.NET/C# Login Check Username Password
สร้างระบบล็อกอิน Login Form ตรวจสอบสิทธิ์ของ Username และ Password ก่อนจะเข้าสู่โปรแกรม
Rating :
Update :
2012-02-27 13:25:22 View : 22,135
ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   







Load balance : Server 00
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่

Inline