Archive for the ‘asp.net’ Category

Dev :: ASP.NET MVC 3 และการ Upload File

Posted: กันยายน 22, 2011 in asp.net
ป้ายกำกับ:ASP.Net, development, file, how to, mvc, source code, upload

จุดประสงค์

สาธิตการสร้างเว็บแอพเพื่ออัพโหลดแฟ้มข้อมูลจาก Client ไปวางบนโฟลเดอร์ที่อนุญาต บนเครื่องแม่ข่าย

สิ่งที่ต้องมี

Visual Studio 2010
มีความรู้เกี่ยวกับ MVC

การปฏิบัติ

สร้างโครงการขึ้นใหม่ เลือก MVC 3 ตั้งชื่อว่า MvcFileUpload

2.เลือก Interner Application แล้วคลิก OK

3. คลิกขวาที่ Folder Controllers แล้ว Add Controller สำหรับผมตั้งชื่อว่า FileUpload และใช้เทมเพลตแบบว่าง แล้วคลิกปุ่ม Add

4.เรียกใช้ system.io ที่ด้านบน

5. จากนั้นสร้าง Action ดังต่อไปนี้

6. เพิ่ม view ที่ action Edit ด้วยการคลิกขวาที่ Action Edit แล้วเลือก Add view แล้วคลิกปุ่ม Add

7. ไปที่ Edit.cshtml

แล้วเพิ่มโค้ดลงไปดังนี้

8.เปิดไฟล์ _Layout.cshtm จากที่นี่

9.เพิ่ม ActionLink เพื่อเข้าถึงหน้า Upload เข้าไปดังนี้

10. จากนั้นทดลอง Run กด F5 จะได้ผลดังนี้

11.คลิกที่ Upload จะเข้าสู่ วิว Edit ให้ลอง Upload File

12. เมื่อ Submit ไปแล้วจะกลับมาที่ Home/Index ลองเปิด Folder เพื่อตรวจสอบว่าอัพโหลดไปได้จริงหรือไม่

จะพบไฟล์ที่อัพขึ้นไปดังนี้

13. จบแล้วครับ ไม่ยากเนอะ

อ้างอิงจาก

http://www.c-sharpcorner.com/UploadFile/dhananjaycoder/Fileuploadinaspnetmvc06292009030526AM/Fileuploadinaspnetmvc.aspx

Dev :: การเปลี่ยน Version ของ .Net Framework บน IIS 7

Posted: สิงหาคม 3, 2011 in asp.net, Computers and Internet, iis, Software, web server
ป้ายกำกับ:.net framework, application pool, changing, version, web application

ในบทความนี้เราจะพูดถึงการเปลี่ยน .net framework ที่รันสำหรับ web app ที่เราได้สร้างขึ้น
ใน IIS สามารถใช้ .net fw ได้หลายรุ่นบน server ตัวเดียวกัน
และเลือกรัน web app ที่ใช้ .net fw ได้แตกต่างกันไปได้

หากต้องการทราบว่าภายใน iis มี .net fw ใดทำงานอยู่ให้..

1.เปิด iis manager

2. คลิกที่ Application Pools

3. จะแสดงรายละเอียดดังนี้

การเปลี่ยนรุ่น .Net Framework สำหรับ Web App

1.คลิกที่ Web App ที่ได้ติดตั้งใน ตย ผมใช้ชื่อว่า sample ต้องการเปลี่ยนจาก .net fw 2 เป็น .net fw 4

2.ดูที่เมนู Actions ทางขวาคลิกเลือก Basic Settings

3.คลิกปุ่ม Select แล้วเลือกเป็น asp.net 4.0

เปลี่ยนเป็น .net 4 แล้วคลิก Ok

เป็ฯอันเสร็จพิธีกรรมครับ

ASP.NET MVC การแสดงข้อมูลจาก Entity อื่นที่เกี่ยวข้อง

Posted: กรกฎาคม 20, 2011 in asp.net, mvc
ป้ายกำกับ:ASP.Net, development, display, entity framework, Microsoft, mvc, relate data, visual studio 2010, web application

การแสดงข้อมูลจาก Entity หรือตัวแทนจากตารางในฐานข้อมูลเดียวเป็นเรื่องปกติ

แต่หากต้องแสดงข้อมูลจาก entity อื่นที่มีความสัมพันธ์กันต้องเพิ่มอะไรลงไปนิดหน่อย

จากตอนที่แล้วผมสร้างแอพพลิเคชั่นจากฐานข้อมูลที่มีเดิมอยู่แล้ว

แล้วมาสร้าง entity datamodel แล้วค่อยมาสร้าง class ที่ทำงานทีหลัง

ไม่ใช่สร้างแบบ poco คือสร้างโค้ดก่อนแล้วไปเจนเนเรทฐานข้อมูล ผมคิดว่าอาจจะไม่เขียนเพราะ ตย ในเว็บอื่นๆมีมากพอแล้ว

วัตถุประสงค์

ต้องการแสดงรายชื่อนักเรียน

ต้องการคลิกที่ชื่อแล้วแสดงรายวิชา + เกรดที่ได้ของนักเรียน

นี่คือ edm ของระบบ

1. เพิ่ม Controller ลงไปชื่อ StudentController กำหนดค่า

ที่ช่องเทมเพลต กำหนดให้สร้าง crude

โมเดลให้เลือกชี้ไปที่คลาสที่สร้างขึ้นจากตอนที่แล้ว

และcontext เลือก schoolentity ก้ได้จากการสร้างตอนที่แล้วเช่นกัน

แล้ว add ลงไป

2.แก้โค้ดที่ StudentController เมทอส Details ดังนี้

จะเห็นว่าผมแก้โค้ดให้มี include เอา entity ที่ติดต่อโดยตรงเข้าไปก่อน

แล้วไปเรียก select เอา entity ที่ติดต่อถัดไปเข้ามา

3.เปิด view detail ของ student

4. ภายใน tag ของ fieldset ให้เพิมตารางแสดงรายการวิชาและเกรดที่ได้เข้าไปด้วยการวนลูปดังนี้

เมื่อทดลองรันจะได้ดังนี้

เมื่อคลิกที่ detail ของ นร สักคน

จะได้รายวิชาที่ลงเรียนและเกรด(หากมี)

จบแล้วครับ ไม่เข้าใจเหมือนกันว่าทำไมทำตาม tutorial แล้วมีปัญหามาตลอด

หรือผมโง่เกินไปก็ไม่ทราบได้ หากใครฉลาดๆโปรดเข้ามาให้คำสอนด้วยครับ

ASP.NET MVC การสร้าง Model จากฐานข้อมูลที่มีอยู่แล้ว

Posted: กรกฎาคม 20, 2011 in asp.net, mvc
ป้ายกำกับ:ASP.Net, database first, entity data model, entity framework, Microsoft, mvc, server, visual studio 2010

การสร้าง Model จากฐานข้อมูลที่มีอยู่เรียกว่า database first

1.เมื่อเราได้สร้างฐานข้อมูลแล้ว สร้างตารางและความสัมพันธ์เอาไว้ก่อนแล้ว

2.เพื่อความแน่ใจให้ดูใน web.config ว่ามี connection string ที่เชื่อมต่อระบบของเราเข้ากับ database ที่เราได้สร้างเอาไว้หรือยังหากยังให้กำหนดค่าดังนี้

3.ให้สร้าง Entity Data Model ขึ้นมา ที่โฟลเดอร์ Model ให้เพิ่ม Entity data model ลงไป

ตั้งชื่อ SchoolModel

4.เลือก Generate จาก Database

5.ที่ connection เลือกไปยัง database ที่เราได้สร้างเอาไว้

6.ด้านล่างให้บันทึก entity connection ลง web.config

เลือกตารางที่ใช้

และตั้งชื่อว่า SchoolModel

6. เลือก build project แล้วสร้าง class จาก edm ด้วยการคลิกขวาในหน้าการออกแบบ edm

7. เลือก code แล้วเลือก Self tracking

8. เราจะได้คลาสตามที่ edm ได้สร้างเอาไว้

จบแล้วครับ

ASP.NET MVC Razor Systax

Posted: กรกฎาคม 16, 2011 in asp.net
ป้ายกำกับ:ASP.Net, basic, development, razor, syntax, web application

บทความนี้เป็นการแนะนำเบื่องต้นเกี่ยวกับ syntax ของ Razor

ผมได้แปล สรุป และเรียบเรียงจาก ที่นี่

รายละเอียดดังนี้

1.จะเพิ่ม code ลงเพจต้องนำหน้าด้วยอักษร @

.การเขียนแบบบล็อค เขียนในปีกกา

2. การเขียนแบบนี้เป็นแบบหลายประโยค ภายในปีกกา

แบบนี้เขียนร่วมกับแท็ก html

3. ภายในบล็อคโค้ดจะต้องปิดท้ายประโยคด้วย ;

4.ตัวแปร ประกาศด้วย var นำหน้าชื่อตัวแปร แล้วนำไปใช้ในประโยคต่อไป

เมื่อรันจะได้ผลดังนี้

5. กำหนดค่าแบบ string ให้ตัวแปร

ต้องใส่ “…” ครอบข้อความก่อนส่งค่าให้ตัวแปร (แถวนี้เรียกฟันหนู)

หากต้องการแสดงหรือใช้งานอักษรพิเศษเช่น \ หรือ “ หรืออื่นๆ ต้องใช้ @นำหน้า

ภาพนี้แสดงตัวอย่างการใช้ \ ภายในตัวแปรแล้วนำไปแสดงผล

ภาพนี้เป็นการใช้ “ ภายในตัวแปร

เมื่อรันจะได้ผลดังนี้

6. ตัวแปรเป็นแบบ case sensitive คืออักษรเล็กใหญ่มีผลต่างกันเช่น

แม้ว่าชื่อตัวแปรเหมือนกัน แต่ถือว่าเป็นคนละตัวกัน เพราะพิมพ์ไม่เหมือนกัน

7.เขียนลักษณะ object ได้

ลักษณะคล้ายกับการเรียกใช้ object และ method สมัยที่ยังใช้ asp classic หากเกิดทันเช่น

และผลที่ได้คือ

8.สร้างเงื่อนไขได้

เราสร้างโค้ดที่ใช้ตัดสินใจเช่น if-else ได้

จากตัวอย่าง เมื่อปุ่ม submit ถูกกด

จะถูกนำไปตรวจสอบว่ามีการ post กลับมาหรือไม่

หากใช่จะแสดงข้อความผ่านตัวแปร result ว่าเพจนี้มาจากการกด submit

9.การใส่หมายเหตุ

อันนี้เป็นการใส่แบบภาษา c#

10.ตัวแปรและประเภทข้อมูล

สามารถประกาศตัวแปรแบบไม่ระบุประเภทข้อมูลได้ด้วยใช้ var นำหน้า

หรือจะระบุประเภทตัวแปรเลยก็ได้

ตารางการแปลงค่า

การดำเนินการ

การ + – * / ปกติ

การกำหนดค่าให้ตัวแปร

การเปรียบเทียบ

เท่ากันหรือไม่ ?

ไม่เท่ากันใช่ใหม ?

มากกว่า น้อยกว่า มากกว่าหรือเท่ากับหรือไม่

การเขียน + – แบบย่อ

การเรียกใช้ method ของ object

จัดกลุ่มหรือส่งค่าไปยังพารามิเตอร์ของเมธอด

เข้าถึงลำดับของตัวแปร

reverse หรือ not แปลงค่าให้ตรงข้าม

การเปรียบเทียงและ / หรือ

การเข้าถึง root เสมือน

ใช้ ~ ผมเรียกว่าตัวหนอน ฝรั่งเรียกว่าทิลด้า

การแปลง Root เสมือนเป็น path บนไดรว

ใช้คำสั่ง server.Mappath จะแสดงพาธออกมาเป็นตำแหน่งใน hdd

เงื่อนไข

If –else

แบบ switch case

วนรอบการทำงาน

แบบ For

แบบ Foreach จะวนรอบทำงานจนกว่าหมด Collection

แบบตรวจสอบเงื่อนก่อนวนลูปด้วย while

การตรวจจับข้อผิดพลาด ด้วย Try-Catch

จบแล้วคับ

ASP.NET MVC View engine ด้วย Razor

Posted: กรกฎาคม 15, 2011 in asp.net, คอมพิวเตอร์และอินเทอร์เน็ต
ป้ายกำกับ:ASP.Net, engine, mvc, razor, view

บทความนี้ได้สรุปและเรียบเรียงจาก blog ของ Scott ต้องการอ่านคลิกที่นี่

View คือมุมมองหรือ UI ที่รับข้อมูลจาก User ไปดำเนินการ และนำเสนอข้อมูลให้ user ได้เห็น

View Engine ที่มาพร้อมกับ mvc3 ชื่อว่า Razor (มีดโกน ??)

engine ส่วนต่างๆ ของ mvc ตามที่เคยศึกษากันพบว่ามันแบ่งการทำงานออกจากกัน

ดังนั้นหากเราสามารถพัฒนา engine ขึ้นมาได้เองเพื่อติดต่อกับฐานข้อมูลหรือส่วนอื่นๆที่ต้องการได้

ทาง ms ก็นำเสนอ Razor ซึ่งเป็น view engine ตัวใหม่อย่างมากว่าดีอย่างนั้นอย่างนี้

คอนเซ็บของ Razor

Compact, Expressive, and Fluid: ขนาดเล็กและลื่นไหล (ผมนึกถึงมอเตอร์ไซ ที่ขับตอนรถติดยังไงยังงั้นเลย)
Easy to Learn: เรียนรู้ง่ายหรือใช้ความรู้เดิมที่มีอยู่เช่น HTML
Is not a new language: ใช้ความรู้ทางภาษาโปรแกรมมิ่งเดิมที่รู้อยู่แล้ว C#/VB (or other)
Works with any Text Editor: ทำงานกับเครื่องมือหรือใดๆก็ได้เช่น notepad
Has great Intellisense: มีตัวช่วยเติมเต็มประโยคที่ดี แน่นอนว่า visual studio กิน.
Unit Testable: สามารถทดสอบได้ง่าย ().

เปรียบเทียบการแสดงผล

ในบทความคุณ scott จะแสดงข้อความที่เพจดังนี้

ภาพ 1 แสดง O/p ที่ต้องการ

เดิมเราใช้ .aspx nuggets คือแท็ก <% =…. %> แบบนี้เพื่อกำหนดการแสดงผล ประมวลผลที่หน้าเว็บเพจ ดังนี้

แต่หากใช้มีดโกนอาบน้ำผึ้งคุณเขียนโค้ดดังนี้

Razor ใช้เพียง @ นำหน้าตัวแปร หรือ expression ที่ต้องการใช้เท่านั้น

การวนลูป

หากเราต้องการแสดงลูปดังภาพนี้

จากภาพเราๆก็ทราบดีว่าต้องวนลูปจากลิสหรืออาเรย์หรืออื่นๆ แล้วไปแสดงผล

หากวนลูปด้วย .aspx จะเขียนดังนี้

.aspx nuggets	Razor

ดูเรียบร้อยขึ้นนะครับ Winking smile

การใช้ If – else

การเขียนแบบนี้สมัยก่อนเรียกว่าสปาเก็ตตี้โค้ด คือมันปนกันระหว่างบล็อคคำสั่ง กับแท็ก html

แต่ด้วย tool ของ ms คงไม่เป็นปัญหาเท่าใดเพราะช่วยแยกความแตกต่างระหว่าง view engine

กับแท็ก html ได้

การเขียนแบบหลายบรรทัด

การเขียนแบบนี้เปิดด้วย @{…} แล้วเขียน expression เอาไว้ภายใน จากนั้นนำค่าที่ได้จากการประมวลผลไปใช้ต่อไป

การเขียนแบบบรรทัดเดียวแต่หลายส่วน

เปิดแท็กด้วย @(….) แบบนี้ใช้ได้เพียงบรรทัดเดียว

เมื่อศึกษาผมมีคำถามที่เกิดขึ้นทันทีคือ email address จะถูกแปลเป็นตัวแปรหรือไม่

ทางคุณ scott เขียนไว้ว่าไม่มีปญหาหาเพราะ engine ฉลาด 5555++

ภาพนี้เป็นข้อมูลที่กำหนดใน editor

ภาพนี้เป็นข้อมูลที่แสดงที่ web browser

การเขียนแบบโค้ดภายใน

เราสามารถวางแท็ก html ภายในโค้ดบล็อคของ Razor ได้เช่น

เห็นว่าภายในมีแท็ก span ครอบเมื่อรันที่เว็บบราวเซอร์จะได้ดังนี้

การจัดการ Layout ตามแบบ Razor

หากใช้ .aspx จะใช้ masterpage เข้ามาสร้างหน้ากากและเว้นพื้นที่ให้นำไปใช้ทีหลัง

เมื่อเราเปลี่ยนไปใช้ Razor ใช้เพียง Sitelayout.cshtml เท่านั้น

ภายในมีเพียงแท็ก html ที่คงที่เพื่อแสดงผล

ภายในแท็ก div จะมีประกาศ @RenderBody() เพื่อให้รู้ว่านี่คือพืนที่แสดงข้อความเมื่อ layout นี้ถูกนำไปใช้

การจะนำเลย์เอาไปใช้ต้องประกาศการเรียกใช้ดังนี้้

จะต่างกับการใช้ masterpage ที่ประกาศอะไรอีกมากมาย

เมื่อรันเราตจะได้โค้ดที่เว็บบราวเซอรดังนี้

การเขียนทับพื้นที่แสดงผล

เราสามารถสร้างพื้นที่การแสดงผลที่ต้นแบบได้มากกว่าที่เดียวดังนี้

ที่เพิ่มขึ้นมาคือ @RenderSection พร้อมกับกำหนดชื่อ และมี optional เป็น true เพราะหากไม่มีการกำหนดค่าก็ะไม่ Error หากไม่กำหนดค่า

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

และเมื่อรันที่ปลายทางจะได้โค้ดดังนี้

html helper ตัวใหม่

ผมเรียกว่าตัวช่วยสร้าง html คล้ายกับการสร้าง function แล้วให้ส่งค่าออกมาเป็นแท็ก html

ภาพนี้เป็นการสร้าง helper ชื่อ ProductListing และรับพารามิเตอร์มาเพื่อวนลูปสร้างแท็ก li

เมื่อต้องการเรียกใช้ helper กำหนดลงไปดังนี้

อย่างไรก็ดี visual studio ก็สนับสนุนเป็นอย่างดี

จบแล้วสำหรับวันนี้ bye.

ASP.NET MVC #01 มันคืออะไร

Posted: กรกฎาคม 14, 2011 in asp.net

MVC เป็นรูปแบบการพัฒนาเว็บแอพพลิเคชั่นแบบหนึ่งที่เป็นที่นิยมในปัจจุบัน

(ในบทความนี้ช้าไปเกือบ 3 ปี คงไม่ช้าไปนะ)

รูปแบบหรือแพทเทิร์นการพัฒนาเว็บแอพที่แบ่งแยกส่วนประกอบออกจากกัน

เป็นสามส่วนคือ Model , View, Control ทำให้งานมีความยืดหยุ่นขึ้น

สำหรับสาวก Microsoft เค้ามีเครื่องมือให้ใช้ฟรีไปหาโหลดได้ที่ http://www.asp.net/mvc

ภาพ 1 แสดงเว็บ asp.net หน้า mvc

หากยังไม่มีก็คลิกที่ปุ่มสีเขียวแล้วติดตั้งโดยเลือกตาม wizard ที่ปรากฏ

ที่พืนที่ส่วนล่างลงมาเป็นแหล่งข้อมูล ที่ดี

ภาพ 2 แสดงหัวข้อและแหล่งข้อมูลศึกเพิ่มเติม

MVC คืออะไร ?

โดยสรุปคือการแบ่งส่วนการพัฒนาเว็บแอพออกเป็นสามส่วน

ซึ่งแยกจากกัน แต่ทำงานร่วมกันได้ แต่ละส่วนแยกเป็น..

mvc_DesignPattern

Model

คือต้นแบบหรือตัวแทนของขัอมูลที่ทำงานควบคู่ไปกับฐานข้อมูลที่เราใช้งาน

หากมีการสั่งให้ปรับปรุงข้อมูล จะมีผลไปยังข้อมูลในฐานข้อมูล

ว่าไปแล้วคล้ายๆกับ BLL + DAL

View

คือมุมมองที่ผู้ใช้ระบบเห็น ทำหน้าที่รับ input จากผู้ใช้ หรือเรียกให้ง่ายคือ User interface

รวมถึงแสดงข้อมูลจาก Model

Control

คือส่วนควบคุมการทำงาน ทั้งการตรวจสอบเงื่อนไข การตรวจจับข้อผิดพลาด

และการส่งกลับไปให้ View แสดงผล คล้ายกับ Business Logic Layer ใน n tier

ความเห็นส่วนตัวแล้ว mvc น่าสนใจ(อย่างน้อยก็สำหรับผม) เพราะการแบ่งส่วนการทำงาน

โดยมีการทำงานร่วมกันได้ คงดีไม่น้อยสำหรับนักพัฒนา และเว็บดีไซเนอร์

สำหรับ php ผมรู้น้อยมาก หากท่านใดมีข้อมูลดีๆโปรดนำมาเล่าให้ฟังบ้าง

จะเป็นพระคุณอย่างสูง

The Entity Framework and ASP.NET – Part 3: Filtering, Ordering, and Grouping Data

Posted: เมษายน 3, 2011 in asp.net, คอมพิวเตอร์และอินเทอร์เน็ต, Computers and Internet, windows
ป้ายกำกับ:ASP.Net, Contoso University, data, filter, grouping, query extender, where expression

สำหรับตอนที่ 3 จะสาธิต

การกรองข้อมูล
จัดเรียงข้อมูล
การใช้คอนโทรลร่วมกันเพื่อการค้นหา
การจัดกลุ่มข้อมูล
การใช้ QueryExtender
การใช้ Like เพื่อการค้นหาข้อมูล

1.การกรองผูู้เรียนและแสดงผล

ในบทนี้คู่มือได้สอนการกรองข้อมูล Student จาก Person ทั้งหมด ซึ่ง Student จะมี่ค่าขอมูลวันลงทะเบียน (ดูจากข้อมูลใน database)

1.1 เปิดเพจ Student.aspx แล้วคลิกที่คอนโทรล entity datasouce

1.2 แล้วดูที่หน้าต่าง properties ไปที่ Where แล้วพิมพ์ตามนี้

1.3 จากนั้นให้ทดลองรันเพจ จะได้ผลดังนี้

2.การเรียงข้อมูลก่อนแสดงผล

เราจะเรียงข้อมูล Student จาก LastName สามารถทำได้ดังนี้

2.1 ที่เพจ Student.aspx เดิมนี้ให้คลิกที่ entity datasource control ไปที่หน้าต่าง properties แล้วดูที่คุณสมบัติ OrderBy แล้วกรอกตามนี้

2.2 รันเพจจะได้ผลตามนี้

3. การใช้คอนโทรลร่วมกันเพื่อการค้นหาข้อมูล

การค้นหาข้อมุลแบบนี้เรียกว่าใช้ control parameter เพื่อส่งค่าแล้วนำไปค้นหาด้วยคุณสมบัติ Where

3.1 ให้เปิดเพจ Course.aspx แล้วคลิกที่คอนโทรล CourseEntityDataSource แล้วดูที่หน้าต่าง properties แล้วคลิกที่จุด … ในช่อง Where

3.2 เมื่อปรากฏหน้าต่าง Expression ให้คลิกเพื่อเลือกที่ช่อง Auto gen the where expression…

3.3 แล้วคลิกปุ่ม Add Parameter ที่ช่อง Name พิมพ์ฟิล์ดที่เราต้องการนำค่าไปเปรียบเทียบคือ DepartmentID

3.4 ที่ช่อง Parameter Source ให้เลือก Control จากนั้นที่ช่อง ControlID ให้เลือกเป็นชื่อของ dropdownlist คือ dropDepartment

3.5 คลิกที่ Show advance.. จะปรากฏคุณสมบัติเพิ่มเติมให้มองหา Type แล้วเปลี่ยนให้เป็น Int32 แล้วคลิก OK เพื่อปิดหน้าต่างการกำหนดค่า

3.6 จากนั้นให้แก้ไขคอนโทรล CourseGridView ในหน้า Source ดังนี้

<asp:GridView ID=”CoursesGridView” runat=”server” AutoGenerateColumns=”False”
DataKeyNames=”CourseID” DataSourceID=”CoursesEntityDataSource”>
<Columns>
<asp:BoundField DataField=”CourseID” HeaderText=”ID” ReadOnly=”True”
SortExpression=”CourseID” />
<asp:BoundField DataField=”Title” HeaderText=”Title” SortExpression=”Title” />
<asp:BoundField DataField=”Credits” HeaderText=”Credits”
SortExpression=”Credits” />
</Columns>
</asp:GridView>

สำหรับ Gridview นี้จะแสดงเพียง 3 คอลัมเท่านั้น คือรหัสวิชา ชื่อวิชา และหน่วยกิต

3.7 จากนั้นกลับไปดุที่คอนโทรล dropdownlist ให้เรา Enable ที่ AutoPostBack โดยเปลี่ยนให้เป็น True เพื่อให้ส่งค่าทันทีที่เลือกข้อมูลจากคอนโทรลนี้

3.8 ทดลองรันเพจและเปลี่ยนสาขาวิชาจะพบว่าภายใน gridview มีการแสดงผลรายวิชาตามไปด้วย

4. การจัดกลุ่มข้อมูล

ระบบต้องการให้แสดงจำนวนนิสิตที่หน้า About.aspx โดยจัดกลุ่มจากวันที่ Student ลงทะเบียน

4.1 ให้เปิดเพจ About.aspx แล้วแทนที่ข้อความเดิมด้วย

4.2 จากนั้นให้เพิ่ม entity datasource control ลงไป โดยมีเงื่อนไขดังนี้

เราจะกรองมาเฉพาะ Student เท่านั้น ดูที่ Where
เราจะจัดกลุ่มจากวันที่ลงทะเบียนเรียน ดูที่ GroupBy
เราจะจัดกลุ่มและนับจำนวน Student ดูที่ Select
เราจะจัดเรียนตามวันที่การลงทะเบียน ดูที่ OrderBy

เราจะโค้ดที่หน้า source ได้ดังนี้

4.3 จากนั้นลาก gridview มาวางในเพจและโค้ดตามดังนี้

4.4 จากนั้นลองรันเพจจะได้ผลดังนี้

5.การใช้ QueryExtender

ส่วนนี้เป็นการสาธิตการใช้คอนโทรล QueryExtender เพื่อช่วยการกรองข้อมูล จัดเรียงข้อมูลจาก eds อีกต่อหนึ่ง

5.1 กลับไปที่เพจ Course.aspx แล้วเพิ่มโค้ดเข้าไปส่วนท้ายดังนี้

เมื่อลองคลิก View จะได้ผลดังนี้

5.2 จากนั้นให้เพิ่มคอนโทรล QueryExtender ลงไป โดยระบให้ติดต่อกับคอนโทรล SearchEntityDataSource (บรรทัดที่ 49)

การค้นหาให้ค้นจากอักษรนำหน้า ในฟิลด์ Title (ดูบรรทัดที่ 51)

โดยรับค่าที่ป้อนจากคอนโทรลคือ SearchTextbox (บรรทัดที่ 52)

นอกจากนี้ยังจัดเรียงจากฟิลด์ชื่อสาขาวิชา และมีทิศทางจากน้อยไปมาก (56)

นอกจากนั้นยังเรียงตามชือวิชาอีกด้วย (57)

จากที่กลาวมานี่คือโค้ดใน source view

5.3 สุดท้ายให้เพิ่ม gridview ลงไป

จากโค้ดเราจะแสดงชื่อสาขาวิชา รหัสวิชา ชื่อวิชา หน่วยกิต

5.4 ให้ลองรันเพจนี้ดู

เมื่อไม่ได้ค้นหาวิชาอะไร

เมื่อลองพิมพ์ค่าเพื่อค้นหาลงไป

6. การใช้ Like เพื่อการค้นหาข้อมูล

ส่วนนี้จะสาธิตการใช้ LIkE เพื่อค้นห้าข้อมูล ซึ่งมีลักษณะคล้ายกับการใช้ QueryExtender คอนโทรลดังหัวข้อที่ 5

แต่สำหรับหัวข้อนี้เป็นการแสดงการค้นหาข้อมูลในอีกรูปแบบหนึ่ง ที่สามารถให้ผลการทำงานได้เหมือนกัน หากท่านถนัดแบบใดก็เลือกใช้ตามความต้องการ

สำหรับตอนนี้เราจะสาธิตการค้นหาจากชื่อ หรือสกุลของ Student

6.1 ให้เปิดเพจ Student.aspx และเพิ่มโค้ดนี้ลงไปต่อจากโค้ดเดิม

6.2 และเพิม eds ลงไปโดยให้ติดต่อกับ entity People และที่สำคัญจะต้องระบุเงื่อนไข Where เพื่อกรองคนที่มีวันลงทะเบียนเรียนเท่านั้น และใช้ operator การค้นหา % กับฟิลด์ชื่อ รวมทั้งนามสกุลด้วย

การใช้ % นำหน้าข้อความที่ต้องการค้นหา หมายถึง จะมีอักษรนำหน้าอะไรก็ตามแต่ต้องมีข้อความที่เราระบุลงไป

และในทางกลับกันหากใชั้ % ตามหลังข้อความที่เราระบุ หมายถึง ค้นห้าอักษรที่มีคำตามเป็นอะไรก็ได้ แต่ต้องมีอักษรนำหน้าตามที่เราระบุ

สำหรับตัวอย่างนี้จะใช้ % ทั้งหน้าและหลังข้อความที่เราระบุ (บรรทัด 60)

6.3 จากนั้นสร้าง Gridview และระบุฟิลด์ที่ต้องการแสดงผลตามนี้

6.4 ทดลองรันเพจนี้

สำหรับบทที่ 3 จบเพียงเท่านี้ครับ หวัดดี

การพัฒนาเว็บแอพพลิเคชั่น Contoso University ด้วย ASP.Net 4 ตอนที่ 2

Posted: กุมภาพันธ์ 27, 2011 in asp.net, คอมพิวเตอร์และอินเทอร์เน็ต, Computers and Internet, Software, windows
ป้ายกำกับ:ASP.Net, Contoso University, entity datasource, entity framework, tutorial

บทความนี้สาธิตการพัฒนาระบบเว็บแอพพลิเคชั่น Contoso University ซึ่งผมได้ศึกษาจากเว็บไซท์ http://asp.net/

หากต้องการอ่านบทความต้นฉบับจะอยู่ที่

http://www.asp.net/entity-framework/tutorials/the-entity-framework-and-aspnet-–-getting-started-part-1

ผมได้ศึกษา และทดลองทำตามแล้วนำมาเล่าให้ท่านอ่านกันอีกครั้ง อรรถรสอาจมาก น้อยไปกราบขออภัยมา ณ โอกาสนี้ด้วยครับ

ในตอนที่ 2 เราจะสร้างเพจข้อมูลนักเรียน และจัดการข้อมูลนักเรียนก และเพจการแสดงรายวิชาของสาขาที่ระบุ

จุดประสงค์

สร้างเพจการจัดการข้อมูลนักเรียน และเพจการแสดงรายวิชา

ดำเนินการ

1.ให้เพิ่มเว็บฟอร์มใน Project ตั้งชื่อว่า Students.aspx และเลือกใช้ MasterPage แล้วคลิก Add

2. เลือก Master page แล้วคลิกปุ่ม OK

3. เมื่อเพจ Student.aspx ได้ถูก Load ขึ้นมาให้ เพิ่ม Code ลงไปในหน้า html code ในบรรทัดที่ 8 – 9

4. หลังจากที่เราได้สร้าง EDM เอาไว้ในตอนที่ 1 เราจำเป็นต้อง Build Project ก่อนใช้งาน
ด้วยการคลิกขวาที่ชื่อ Project ใน Solution Explorer แล้วเลือก Build

5. คลิกที่ EntityDatasource เพื่อกำหนดค่า ด้วยการเลือก Configure Data Source

5. ระบุ Named Connection ชื่อ SchoolEntities และ ContainerName ดังตัวอย่าง แล้วคลิก Next

6. ที่ช่อง EntitySetname เลือก People และเลือกใช้ทุกฟิลด์ และให้ EDS สามารถแก้ไข และสามารถลบข้อมูลได้ แล้วคลิก Finish

7. เราต้องกำหนดค่าให้ database สามารถลบข้อมูลได้ เนื่องจาก ตาราง Person มี คสพ กับตารางอื่นๆ หากไม่กำหนดค่านี้จะเกิด Error เมื่อสั่งลบข้อมูล (!!! หมายเหตุ ให้เราสร้าง Database Diagram ที่ฐานข้อมูล School )

ให้คลิกที่หน้าต่าง Database Explorer และคลิกสองครั้งที่ Diagram_0

8. VS 2010 จะเปิดหน้าต่างแสดง คสพ ของ Database ขึ้นมา ให้คลิกขวาที่เส้น คสพ ของ Person และ StudentGrade

9. ที่หน้าต่าง Properties ทางด้านขวา ให้คลิกกำหนดค่า Delete เป็น Cascade

เสร็จแล้วให้บันทึก

10. การเปลี่ยนแปลงข้อมูลที่ระดับ Database เราต้องปรับปรุงข้อมูลที่ EDM ด้วย

ด้วยการคลิกขวาที่ Entity Data Model แล้วเลือก Update Model from database

11.ที่หน้าการ refresh ให้คลิก Person แล้วคลิกปุ่ม Finish

12. เมื่อการปรับปรุง EDM เสร็จสิ้นแล้วให้สร้างเพจการแสดงรายชื่อผู้เรียน

ด้วยการลาก GridView วางในเพจ Students.aspx แล้วกำหนดค่าแหล่งข้อมูลให้เป็น EDS ที่ได้สร้างไว้ก่อนหน้า

ให้ Enable ตามตัวอย่างนี้

13.เลือก Field ที่ต้องการแสดงดังนี้

14.และเปลี่ยนทั้งสองฟิลด์ให้เป็น Template Field ด้วยการคลิกที่ Convert to template…. ทั้งสองฟิลด์

แล้วคลิกปุ่ม OK

15. ที่หน้าเพจ Source View ที่ Template FirstName ให้เปลี่ยน Code ดังนี้

อธิบาย ที่เทมเพลต Item ใช้เพื่อแสดงข้อมูล เราได้นำคอนโทรลลาเบลมาวางสองตัวและผูกกับข้อมูล LastName และ FirstName

ส่วนเทมเพลต Edititem ให้แสดงกล่องข้อความ FirstName , LastName เพื่อให้ป้อนข้อมูลใหม่ลงไป

16. การเพิ่มประสิทธิภาพของ EntityDatasource

ในเอกสารได้แนะนำให้เราลบ Attrubute Connection String และ DefaultContainerName แล้วเปลี่ยนไปใช้ ContextTypeName=”…” แทน มีข้อดีคือมีประสิทธิภาพสูงกว่าแบบเดิมเพราะเราชี้ไปยังแหล่งข้อมูลที่ต้องการทำงานด้วย โดยตรง

17. แล้วทดลองรันเพจนี้ด้วยการกด F5 จะได้ผลดังนี้

หากลองคลิกลิ้ง Edit จะแสดงหน้าการแก้ไขดังนี้

18.ต้องการเพิ่มคอลัมน์การแสดงรายวิชาที่ผู้เรียนได้เรียน ให้คลิกที่ EntityDatasource แล้วไปเพิ่ม Entity ชื่อ StudentGrade ลงไปที่คุณสมบัต Include

และแก้ไขที่ gridview ก่อนแล้วเพิ่ม Template Field ต่อท้ายลงไปดังนี้

แล้วทดลองรันเพจดูจะแสดงจำนวนรายวิชาออกมาดังนี้

19.จากนั้นเราจะมาสร้าง ฟอร์มกรอกข้อมูลนักเรียนกัน โดยการใช้ Detailview

ก่อนอื่นให้เพิ่ม WebForm เข้าไปใน Project ตั้งชื่อว่า StudentAdd.aspx แล้วลากคอนโทรล DetailView ไปวางในฟอร์ม และลาก Entity Data control เข้ามาด้วย

และกำหนดค่าดังนี้

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Add New Students</h2>
    <asp:EntityDataSource ID="StudentsEntityDataSource" runat="server"
        ContextTypeName="ContosoUniversity.DAL.SchoolEntities" EnableFlattening="False"
        EnableInsert="True" EntitySetName="People">
    </asp:EntityDataSource>
    <asp:DetailsView ID="StudentsDetailsView" runat="server" 
        DataSourceID="StudentsEntityDataSource" AutoGenerateRows="False"
        DefaultMode="Insert">
        <Fields>
            <asp:BoundField DataField="FirstMidName" HeaderText="First Name" 
                SortExpression="FirstMidName" />
            <asp:BoundField DataField="LastName" HeaderText="Last Name" 
                SortExpression="LastName" />
            <asp:BoundField DataField="EnrollmentDate" HeaderText="Enrollment Date" 
                SortExpression="EnrollmentDate" />
             <asp:CommandField ShowInsertButton="True" />
       </Fields>
    </asp:DetailsView>
</asp:Content>

จาก Tag ข้างต้น ที่ EDS เป็นการรุะบุแหล่งข้อมูลที่ใช้งาน นั้นคือ person และ tag Detailview ใช้เชื่อมต่อกับ EDS ที่ได้สร้างไว้แล้ว โดยระบุ attrib ว่าไม่ต้องสร้างแถวให้ เพราะเราจะสร้างเองในแท็ก Field ภายใน tag field จะประกอบไปด้วย 3 แถวคือชื่อ สกุล วันที่ลงเรียน และแถวสุดท้ายเป็นปุ่มแทรกข้อมูล

เมื่อโค้ดแล้วให้ลองรันเพจดู แล้วทดสอบโค้ดดูนะครับ

20. ต่อไปเราจะสร้างเพจการแสดงงรายวิชาจากสาขาวิชา

ให้เราสร้างเพจขึ้นใหม่ชื่อว่า Courses.aspx แล้วลากคอนโทรล EntityDatasouce และ Dropdownlist ลงไป และระบุโค้ดลงใน source view ดังนี้

จะเห็นว่าที่ EDS ระบุุให้เชื่อมต่อไปยัง Departments

และที่ Dropdownlist ให้เรียกใช้ EDS และเรียกฟิลด Name ออกไปแสดง และให้ Value เป็นค่า ID ของ Department ทดลองรันเพจนี้จะได้ดังนี้

สำหรับบทที่ 2 ตัดจบเพียงเท่านี้ก่อนนะครับ

Happy Coding Smile

การพัฒนาเว็บแอพพลิเคชั่น Contoso University ด้วย ASP.Net 4 ตอนที่ 1

Posted: กุมภาพันธ์ 20, 2011 in asp.net, คอมพิวเตอร์และอินเทอร์เน็ต, Computers and Internet, Software
ป้ายกำกับ:ASP.Net, การพัฒนา, ระบบ, Contoso University, data, entity framework, model, school, tutorial

หากต้องการอ่านบทความต้นฉบับจะอยู่ที่

http://www.asp.net/entity-framework/tutorials/the-entity-framework-and-aspnet-–-getting-started-part-1

สำหรับตอนแรกนี้ เป็นการกล่าวเรื่องทั่วไปของระบบที่เราจะได้ทดลองทำกัน

จุดประสงค์

พัฒนาระบบเว็บแอพพลิเคชั่น เพื่อสนับสนุนการบริหารจัดการมหาวิทยาลัย Contoso

ผู้ใช้ระบบสามารถจัดการกับข้อมูลนักเรียน วิชา ผู้สอน ได้

แสดงภาพตัวอย่างดังนี้ครับ

สิ่งที่ต้องเตรียม

1.
Microsoft Visual Studio Express 2010 หรือเป็นรุ่นที่สูงกว่านี้ ต้องการคลิกที่นี่

2.
ระบบจัดการฐานข้อมูล Microsoft SQL Server 2008 Express หรือรุ่นที่สูงกว่า

3. ให้ดาวโหลดตัวอย่างระบบฐานข้อมูลจากที่นี่ ส่วนวิธีการติดตั้งขอให้อ่านจากเว็บที่ให้ดาวน์โหลดเอาเอง

4. บทความนี้ใช้ภาษา C# และ LINQ ในการพัฒนา

วัตถุุประสงค์

เราจะสร้าง Webapp และสร้าง Emtity DataModel จากฐานข้อมูลที่มี

ดำเนินการ

1.เมื่อได้สร้างฐานข้อมูลเสร็จแล้ว ให้สร้าง Web App ขึ้นมา ตั้งชื่อว่า ContosoUniversity

2.ที่ Solution Explorer ทางขวาให้เปิด Site.Master ขึ้นมาแก้ไขชื่อเว็บ

เปิด Site.Master ที่ไฮไลท์ไว้

แล้วเปลี่ยนข้อความที่ด้านบนจาก

ให้เป็น

3. แก้ไขแท้ก <asp:Menu.. ด้วยการก้อบโค้ดนี้ลงไปแทนที่เดิม

4. แก้ไข default.aspx ด้วยการเพิ่มข้อความ Welcome to Contoso… ดังนี้

5. กำหนดค่าการติดต่อกับฐานข้อมูล โดยการเปิด Server Explorer คลิกที่ไอคอน แล้วติดต่อกับฐานข้อมูลที่ได้สร้างเอาไว้แล้ว เมื่อการเชื่อมต่อกับฐานข้อมูลเสร็จแล้วจะได้ผลดังนี้

6. จากนั้นเราจะสร้าง Entity Data Model ด้วยการสร้างโฟลเดอร์ขึ้นมาตั้งชื่อว่า DAL แล้วคลิกขวาเลือก Add //New Item

ตั้งชื่อโมเดลว่า SchoolModel แล้วคลิกปุ่ม Add

หากปรากฏหน้าต่างนี้ให้เลือก No

ให้คลิก Generate from database แล้วคลิก Next

หน้าการเชื่อมต่อข้อมูลให้เลือก School ตัวเลือกด้านล่างให้เลือกตามนี้ และคลิก Next

ที่หน้า database object ให้เลือกตารางทุกอันยกเว้น sysdiagram และตัวเลือกอื่นๆตามนี้ แล้วคลิก Finish

เมื่อการสร้าง Data model เสร็จแล้วจะปรากฏดังนี้

7.อธิบาย Data Model

จากเอกสารต้นฉบับ มีการอธิบายองค์ประกอบของความสัมพันธ์ของ EDM เอาไว้โดยสรุปดังนี้

อธิบาย คสพ แบบ 1 ต่อ 0 หรือ 1

Entity person จะมี คสพ กับ Entity OfficeAssignment กันแบบ 1 : 0..1

หมายถึงบุคคลใดๆ ในระบบอาจจะไม่มี หรือมีอย่างมากเพียง 1 ชุดข้อมูลทีเกี่ยวข้องกับห้องทำงาน

สำหรับระบบนี้ออกแบบให้อาจารย์ผู้สอนแต่ละคนหรือบางคนมีห้องทำงานเป็นของตนเอง

อธิบาย คสพ แบบ 1 ต่อ หลากหลาย

Entity StudentGrade จะมี คสพ กับ Person แบบ 1 ต่อ *

หมายถึงบุคคลในระบบสามารถมีเกรดหรือผลการศึกษา ได้หลายตัว เพราะเรียนหลายวิชา ซึ่งในระบบนี้ออกแบบให้นักเรียนเท่านั้นที่มีผลการศึกษา

อธิบาย คสพ แบบ หลาก ต่อ หลากหลาย

สำหรับ คสพ แบบนี้ อาจดูสับสนสักหน่อย พูดให้ง่ายขึ้นคือ ผู้สอนสอนได้หลายวิชา และแต่ละวิชาก็สามารถสอนได้โดยผู้สอนหลายๆคน สำหรับระบบนี้ได้ระบุว่าเฉพาะผู้สอนเท่านั้นที่มี คสพ กับรายวิชา

อธิบาย Navigation Properties

ที่แต่ละ Entities จะมี Navigation เพื่อชี้ไปยัง Entity อื่นๆที่มีความเกี่ยวข้องกับ Entity นั้นๆ

ดังภาพนี้ เห็นได้ว่า Entity Person มีการเชื่อมโยงไปหา CourseGrade, OfficeAssignment, Course.. เป็นต้น

นอกจากนี้ คสพ แบบหลากหลาย ต่อ หลากหลาย จะไม่มีการสร้าง Entity ขึ้นแบบใช้ Key ร่วมกันแบบในฐานข้อมูล แต่ใช้ Navigation Properties ระบุ คสพ ลงไป

8.อธิบายการแก้ไขชื่อใน Entity

เราสามารถแก้ไข Field ใน Entity ได้ ในตย นี้จะเปลี่ยนชื่อ Person.FirstName ให้เป็น FirstMidName ด้วยการคลิกขวาที่ FirstName แล้วเลือก Rename

แล้วป้อน FirstMidName ลงไป จะได้ผลดังนี้

9.อธิบายการใช้ Model Browser

Model Browser เป็นเครื่องมือที่ใช้เข้าถึงโครงสร้างข้อมูล

หากแถบเครื่องมือของเราไม่มี Model Browser ปรากฏขึ้นมา ให้คลิกขวาภายใน EDM แล้วเลือก Model Browser

ที่แถบเครื่องมือทางขวา จะปรากฏ Model Browser ขึ้นมา

ภายใน จะมี

School Model ซึ่งใช้แสดงโครงสร้างของDataModel
SchoolModel.Store ใช้แสดงโครงสร้างของฐานข้อมูล

ลองคลิกที่ SchoolModel เลือก Entity Type เลือก person แล้วคลิกขวาที่ FirstMidName เลือก Table Mapping

จะเห็นการเชื่อมโยงกันระหว่าง Entity Data Model กับ Database ถึงแม้ชื่อฟิลด์ใน EDM จะเปลี่ยนเป็น FirstMidName แล้ว แต่ใน Database ก็ยังคงเป็น FirstName เช่นเดิม

ส่วนรายละเอียดภายใน EDM ที่จริงเป็น XML ทั้งหมดเราสามารถแกะดูได้ โดยคลิกขวาที่ SchoolModel.edmx แล้วเลือก XML Text Editor จะได้ผลแบบนี้

สำหรับบทที่ 1 ขอจบเพียงเท่านี้ครับ

เรื่องล่าสุด

หมวดหมู่

Archive for the ‘asp.net’ Category

หากต้องการทราบว่าภายใน iis มี .net fw ใดทำงานอยู่ให้..

การเปลี่ยนรุ่น .Net Framework สำหรับ Web App

วัตถุประสงค์

1.จะเพิ่ม code ลงเพจต้องนำหน้าด้วยอักษร @

2. การเขียนแบบนี้เป็นแบบหลายประโยค ภายในปีกกา

3. ภายในบล็อคโค้ดจะต้องปิดท้ายประโยคด้วย ;

4.ตัวแปร ประกาศด้วย var นำหน้าชื่อตัวแปร แล้วนำไปใช้ในประโยคต่อไป

5. กำหนดค่าแบบ string ให้ตัวแปร

6. ตัวแปรเป็นแบบ case sensitive คืออักษรเล็กใหญ่มีผลต่างกันเช่น

7.เขียนลักษณะ object ได้

8.สร้างเงื่อนไขได้

9.การใส่หมายเหตุ

10.ตัวแปรและประเภทข้อมูล

ตารางการแปลงค่า

การดำเนินการ

การเข้าถึง root เสมือน

การแปลง Root เสมือนเป็น path บนไดรว

เงื่อนไข

If –else

แบบ switch case

วนรอบการทำงาน

แบบ For

แบบ Foreach จะวนรอบทำงานจนกว่าหมด Collection

แบบตรวจสอบเงื่อนก่อนวนลูปด้วย while

การตรวจจับข้อผิดพลาด ด้วย Try-Catch

คอนเซ็บของ Razor

เปรียบเทียบการแสดงผล

การวนลูป

การใช้ If – else

การเขียนแบบหลายบรรทัด

การเขียนแบบบรรทัดเดียวแต่หลายส่วน

การเขียนแบบโค้ดภายใน

การจัดการ Layout ตามแบบ Razor

การเขียนทับพื้นที่แสดงผล

html helper ตัวใหม่

MVC คืออะไร ?

Model

View

Control

1.การกรองผูู้เรียนและแสดงผล

2.การเรียงข้อมูลก่อนแสดงผล

3. การใช้คอนโทรลร่วมกันเพื่อการค้นหาข้อมูล

4. การจัดกลุ่มข้อมูล

5.การใช้ QueryExtender

6. การใช้ Like เพื่อการค้นหาข้อมูล

จุดประสงค์

ดำเนินการ

จุดประสงค์

สิ่งที่ต้องเตรียม

วัตถุุประสงค์

ดำเนินการ

7.อธิบาย Data Model

อธิบาย คสพ แบบ 1 ต่อ 0 หรือ 1

อธิบาย คสพ แบบ 1 ต่อ หลากหลาย

อธิบาย คสพ แบบ หลาก ต่อ หลากหลาย

อธิบาย Navigation Properties

8.อธิบายการแก้ไขชื่อใน Entity

9.อธิบายการใช้ Model Browser