เขียนเว็บง่ายๆด้วย DevExtreme [ตอนที่ 1: INTRO]

เขียนเว็บง่ายๆด้วย DevExtreme [SELECT, INSERT, UPDATE, DELECT]

เริ่มแรกสร้าง Table เพื่อเพื่อใช้ในการทดสอบก่อนเลย

Table Department

CREATE TABLE [dbo].[Department](
	[DepId] [int] IDENTITY(1,1) NOT NULL,
	[Code] [nvarchar](50) NULL,
	[Description] [nvarchar](250) NULL,
 CONSTRAINT [PK_Department] PRIMARY KEY CLUSTERED 
(
	[DepId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Table Position

CREATE TABLE [dbo].[Position](
	[PositionId] [int] IDENTITY(1,1) NOT NULL,
	[Code] [nvarchar](50) NULL,
	[Description] [nvarchar](250) NULL,
 CONSTRAINT [PK_Position] PRIMARY KEY CLUSTERED 
(
	[PositionId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Table Employees

CREATE TABLE [dbo].[Employees](
	[AutoId] [int] IDENTITY(1,1) NOT NULL,
	[EmpCode] [nvarchar](50) NULL,
	[Firstname] [nvarchar](50) NULL,
	[Lastname] [nvarchar](50) NULL,
	[DepId] [int] NULL,
	[PositionId] [int] NULL,
 CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED 
(
	[AutoId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

ALTER TABLE [dbo].[Employees]  WITH CHECK ADD  CONSTRAINT [FK_Employees_Department] FOREIGN KEY([DepId])
REFERENCES [dbo].[Department] ([DepId])
GO

ALTER TABLE [dbo].[Employees] CHECK CONSTRAINT [FK_Employees_Department]
GO

ALTER TABLE [dbo].[Employees]  WITH CHECK ADD  CONSTRAINT [FK_Employees_Position] FOREIGN KEY([PositionId])
REFERENCES [dbo].[Position] ([PositionId])
GO

ALTER TABLE [dbo].[Employees] CHECK CONSTRAINT [FK_Employees_Position]
GO

จากนั้นทำการเปิด Visual Studio ขึ้นมา สำหรับใครที่ยังไม่ได้ลง Extentions ของ DevExtreme สามารถ คลิกที่นี่

Step 1 Create a New Project เลือก DevExtreme XX.X ASP.NET MVC 5 Application

Step 2 Configure your new project ตั้งชื่อให้เรียบร้อยแล้วคลิก Create ครับ

ทดสอบกดรันดูแอปแรกจะได้ดังรูป

แต่เดี๋ยวก่อนยังไม่จบแค่นี้ เป้าหมายวันนี้ของเราคือการ SELECT, INSERT, UPDATE, DELETE ข้อมูลจาก Database มาเรามาเริ่มทำเป้าหมายของวันนี้ดีกว่า

Step 3 สร้าง Connection Database เข้ามาใน Project ในส่วนของ Models

  1. คลิกขวาที่ Models Add => New Item
  2. เลือกในส่วนของ Data
  3. เลือก ADO.NET Enitity Data Model
  4. ตั้งชื่อของ Model
  5. กด Add

เลือก EF Designer from database

เลือก Connect ฐานข้อมูล

เมื่อเลือกฐานข้อมูลเสร็จแล้วจะโชว์ Connect string เป็น Code ที่ใช้ Connect Database จะถูกเก็บที่ Web.config

เลือก Version ของ Enitity Framework สามารถเลือก Version ล่าสุดได้เลยครับ

คลิกเลือก Table ที่ต้องการทดสอบและกด Finish

เมื่อกด Finish จะได้ไฟล์ DBDev.edmx และ Relation ของ Database

เสร็จแล้วสำหรับการจัดการในส่วนของ Database ง่ายไหมครับ

Step 4 สร้าง Controller สำหรับส่งข้อมูลต่อให้ View

ไปที่ Controller แล้วคลิกขวาเลือก Add => Controller

เลือก DevExtreme Web API Controller with actions, using Enitity Framework กด Add

เลือก Data context, Model และตั้งชื่อ Controller กด Add

Error !!!!! ไม่ต้องตกใจครับ ให้เข้าไปที่ Models => DBDev.edmx => DBDev.tt => Department.cs

เพิ่ม [Key]บน DepId และ using System.ComponentModel.DataAnnotations; เหมือนในรูป แล้วลองกด Add Controller อีกที

Position และ Employees ก็ให้ทำเหมือนกันนะครับ

Wow !!!! ง่ายไหมละครับ

Step 5 สร้าง View เพื่อทำสอบ Controller

ไปที่ Folder Views => Home คลิกขวาเลือก Add View..

เลือก MVC 5 View with a DevExtreme Control กด Add

ตั้งชื่อ View name : ตั้งชื่ออะไรก็ได้ สมมุติชื่อ Department แล้วกด Next >

เลือก

เลือกรูปแบบที่ต้องการแสดง สมมุติเลือกแบบ DataGrid แล้วกด Next >

เลือก Moldel class และ Controller class ที่เคยสร้างไว้ใน Step 2 และ Step 3 แล้วกด Next >

  • Columns เมื่อต้องการแสดง Column ไหนบน Datagrid ให้เลือก Checked ไว้
  • Editing Settings สามารถกำหนดให้มีการ Add, Update หรือ Delete ได้ซึ่งส่วนนี้แหละที่ DevExtreme จะ Generate Code ในส่วนของ UI ให้เรา

Position และ Employees ก็ให้ทำเหมือนกันนะครับ

และแล้ว

เราจะได้โครงสร้าง Code แบบในรูป

ไปที่ HomeController เราจะแก้ Code เพื่อให้เลือก View Employee มาโชว์

public ActionResult Employee()
{
     return View();
}
public ActionResult Department()
{
     return View();
}
public ActionResult Position()
{
     return View();
}

เสร็จแล้วลองกด Run ดู แล้วเพิ่ม Home/Employee

หน้าแสดงผลยังไม่มีข้อมูลให้ทดลองกดปุ่ม Add ดู

  • อย่าลืม Add ข้อมูลในส่วนของ Position และ Department กันก่อนนะครับ