ASP.NET & Visual Studio .Net 2003 - Create New File ใน Tool ของ Visual Studio .Net 2003 มี Item และ Control ให้เลือกใช้มากมายครับ เกินกว่าจะเข้าใจได้ทุกตัว หัวข้อนี้จะเป็นการเพิ่มไฟล์ต่าง ๆ เข้ามาภายในโปรเจค โดยผมจะแนะนำเพียงไฟล์ที่เราได้ใช้งานบ่อย ๆ เท่านั้นครับ
เปิดโปรแกรมได้ที่
Start -> Programs -> Microsoft Visual Studio .NET 2003 -> Microsoft Visual Studio .NET 2003
ASP.NET & Visual Studio .Net 2003 - Create New Project
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool.jpg?v=1001)
Screen Visual Studio .Net 2003
1. การเพิ่ม WebForm (.aspx) (Create Web Form)
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool4.jpg?v=1001)
คลิกขวาที่ Project เลือก Add -> Add Web Form
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool5.jpg?v=1001)
กำหนดชื่อ Web Form
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool6.jpg?v=1001)
Web Form จะถูกสร้างและไฟล์ .aspx.vb และ .aspx.resx ที่เกี่ยวข้องจะถูกสร้างขึ้นมาด้วยครับ
โครงสร้างของ .aspx และ .aspx.vb ซึ่งเป็นไฟล์ที่ทำงานคู่กัน ถ้าเราเปิดไฟล์ .aspx เราจะเห็นว่ามีคำสั่งที่เชื่อมโยง 2 ไฟล์นี้อยู่ครับ
MyWebForm.aspx
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="MyWebForm.aspx.vb" Inherits="MyDotNet.MyWebForm"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>MyWebForm</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
</form>
</body>
</html>
MyWebForm.aspx.vb
Public Class MyWebForm
Inherits System.Web.UI.Page
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
End Sub
End Class
เหตุผลที่ Visual Studio .Net 2003 ทำการแยกไฟล์เป็น 2 หรือ 3 ไฟล์เพราะต้องการที่จะแยกในส่วนของ Web Form และในส่วนของ Coding ไว้คนล่ะส่วนครับ และทุก ๆ ครั้งที่มีการสร้าง Control หรือ Element ต่าง ๆ ใน .aspx ส่วนของ .aspx.vb จะสามารถเรียกใช้งาน Control ทั้งหมดที่อยู่ในภาย Web Form
เพิ่มเติมอีกนิดครับ
.vb จะเป็นโครงสร้างนามสกุลของภาษา Visual Basic .NET ครับ แต่ถ้าในส่วนของภาษา C# จะเป็น .cs แทนครับ
<%@ Page language="c#" Codebehind="MyWebForm.aspx.cs" AutoEventWireup="false" Inherits="MyWebForm.WebForm1" %>
2. การเพิ่ม Web User Control (.ascx) (Create Web User Control)
User Control (.ascx) เป็นไฟล์ที่ใช้จัดเก็บ Form , Control และ Element เหมือน ๆ กับ Web Form (.aspx) ครับ แต่แตกต่างกันที่ Web User Control (.ascx) จะถูกเรียกใช้งานโดย Web Form (.ascx) ไม่สามารถทำการ Run โปรแกรมได้จากไฟล์นี้ครับ
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool10.jpg?v=1001)
คลิกขวาที่ Project เลือก Add Web User Control
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool11.jpg?v=1001)
กำหนดชื่อ Web User Control
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool12.jpg?v=1001)
ไฟล์ที่ได้ซึ่งมีโครงสร้างเหมือนกับ Web Form (.aspx)
MyWebUserControl.ascx.vb
<%@ Control Language="vb" AutoEventWireup="false" Codebehind="MyWebUserControl.ascx.vb" Inherits="MyDotNet.MyWebUserControl"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
MyWebUserControl.ascx.vb
Public Class MyWebUserControl
Inherits System.Web.UI.UserControl
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
End Sub
End Class
ASP.NET & Visual Studio .Net 2003 - User Control
3. การเพิ่มโฟเดอร์ภายในโปรเจค (Create Folder)
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool2.jpg?v=1001)
คลิกขวาที่ Project เลือก Add -> New Folder
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool3.jpg?v=1001)
กำหนดชื่อโฟเดอร์
4. การเพิ่ม Class .vb (Create Class)
เป็นไฟล์สำหรับเก็บ Class อื่น ๆ ที่ต้องการสร้างขึ้นมาใช้ภายใน Project
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool7.jpg?v=1001)
คลิกขวาที่โปรเจค หรือ โฟเดอร์ที่ต้องการจัดเก็บไฟล์นี้ครับ (ไม่ว่าจะจัดเก็บที่ไหนมีค่าเท่ากันครับ เพียงแต่ผมต้องการจัดหมวดหมู่เพื่อความเรียบง่าย)
เลือก Add -> Add Class
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool8.jpg?v=1001)
กำหนดชื่อ Class และนามสกุล .vb ถ้าเป็นในภาษา C# จะเป็น .cs ในที่นี้ผมจะสร้างเป็น clsConnectDB.vb ซึ่งผมวางแผนจะจัดเก็บคำสั่งการ Connect กับ Database ไว้ใน Class นี้
![Visual Studio .Net 2003 Visual Studio .Net 2003](https://www.thaicreate.com/upload/tutorial/vs-2003-tool9.jpg?v=1001)
clsConnectDB.vb
Public Class clsConnectDB
End Class
ASP.NET & Visual Studio .Net 2003 - File Structure