การพัฒนา ASP.NET Web Application – Page 5

การติดตั้งเว็บไซต์ ที่พัฒนาด้วย ASP.NET บน IIS

November 24, 2020 16:37

สำหรับนักพัฒนาเว็บแอปพลิเคชัน ที่จะต้องทำหน้าที่ครบวงจร (Full Stack Programer) สิ่งที่ต้องทำหลังจากพัฒนาเว็บขึ้นมาเสร็จแล้ว คือการติดตั้งบนเซิร์ฟเวอร์ (Deploy) ในบทความนี้จะเล่าขั้นตอนหลักๆ ในการติดตั้งเว็บไซต์ ที่พัฒนาด้วย ASP.NET (ไม่ว่าจะพัฒนาด้วย .Net Framework เวอร์ชันไหนก็ขั้นตอนเดียวกัน เปลี่ยนแปลงแค่ .Net Runtime ที่ใช้งาน) บนวินโดวส์เซิร์ฟเวอร์ โดยใช้ IIS (Internet Information Services) ซึ่งหน้าตาอาจเปลี่ยนแปลงไปตามเวอร์ชันของ IIS แต่ขั้นตอนการตั้งค่ายังคงคล้ายคลึงกัน Publish เว็บไซต์ (กรณีใช้ Visual Studio) 1.คลิกขวาที่ชื่อโปรเจ็ค เลือก Publish 2.จะได้หน้าจอเลือกประเภทในบทความนี้เลือกเป็น Folder เพื่อใช้วิธีการ Deploy แบบนำไฟล์ไปวางที่ Server เอง ดังรูป 3. เลือกที่ตั้งไฟล์ กด Finish 4. ตั้งค่าการ Publish จากในรูปคือให้ลบไฟล์ที่มีอยู่ก่อน และใช้รูปแบบ Release ในการ Compile 5. ตัวอย่างไฟล์ที่ทำการ Publish เสร็จแล้ว 6. ทำการ Copy ไฟล์ทั้งหมดไปวางใน wwwroot บน Server ติดตั้ง Component ต่างๆ 1.ในบทความนี้ใช้ Windows Server 2016 Datacenter เป็นตัวอย่าง ซึ่งการติดตั้ง Component ต่างๆ สามารถทำได้ผ่าน Server Manager > Manage > Add Roles and Features ได้เกือบทั้งหมด ยกเว้น Runtime อื่นๆที่เว็บไซต์มีการนำมาใช้งานเพิ่มเติม 2. ติดตั้ง IIS , ASP.NET และ Component ที่เกี่ยวข้อง โดยไปที่ Server Role > Web Server (IIS) และทำการเลือก Component ต่างๆดังรูป จากนั้นกด Next 3. ติดตั้ง .Net Framework เวอร์ชันที่เว็บไซต์ใช้งาน ในตัวอย่างใช้ .Net Framework 4.6 โดยสามารถเลือกจาก เมนู Features ดังรูป 4. เท่านี้ก็จะมี Component ที่จำเป็นในการติดตั้งเว็บไซต์ที่พัฒนาด้วย ASP.NET แล้ว สร้าง และตั้งค่า Application Pool 1.เปิดโปรแกรม IIS โดยไปที่ Start > Windows Administrative Tools > Internet information Services (IIS) จะได้หน้าจอดังรูป 2. เลือกเมนู Application Pool จากนั้นคลิก Add Application Pool จะได้หน้าจอการตั้งค่าดังรูป โดยที่ .Net CLR Version จะแยกเป็น 2.0.xxx และ 4.0.xxx โดยหากต้องการใช้งาน .Net Runtime 3.5 – 4.x สามารถเลือกเป็น 4.0.x ได้ทั้งหมด 3. เมื่อสร้างสำเร็จ จะมีรายการ Application Pool ที่เราสร้างดังรูป สร้าง และตั้งค่าเว็บไซต์ ทดสอบเรียกใช้งาน 1.ในการสร้างไซต์นั้น หากบน Server นั้นยังไม่มีเว็บไซต์ใดๆ สามารถใช้ Default Web Site ได้เลย แต่ถ้ามีเว็บไซต์อื่นๆอยู่ก่อนแล้ว จะต้องพิจารณาว่าจะให้บริการในแบบใด เป็น Application ที่อยู่ภายใต้เว็บไซต์เดิม

ข้อมูลใน DropdownList แรกจนถึง DropdownList สุดท้ายกับค่าที่เหลืออยู่ของเขา ด้วย LINQ

May 26, 2020 11:33

ในช่วงที่ผ่านมา ได้มีการพัฒนาระบบโดยมีการนำ LinQ มาใช้นิด ๆ หน่อย ๆ (มือใหม่หัดใช้ >< ) ซึ่งมีอยู่ฟังก์ชันนึงที่เกี่ยวกับ การ Bind ค่า DropdownList กรณีที่มี DropdownList หลาย ๆ ตัวและไม่อยากให้ค่าที่เคยเลือกจาก DropdownList ก่อนหน้าไปแสดงใน DropdownList ถัดไปอีก น่าสนใจทดลองใช้แล้วทำงานได้ดี ผู้เขียนจึงนำมาเขียนเพื่อไว้เตือนความจำ จะได้กลับมาอ่าน แนวคิดและวิธีการดังนี้ค่ะ ในขั้นตอนแรก สร้าง Data ที่ชื่อว่า MyList เก็บข้อมูล id และชื่อ เพื่อเตรียมเป็น DataSource สำหรับ Bind ให้กับ DropdownList1 ดังนี้ ต่อมากำหนดค่าให้กับ MyList เพื่อผูกให้กับ DropdownList1 ผลลัพธ์ของ DropdownList1 ได้ดังนี้ ID Name1 name12 name23 name35 name510 name10 ต่อมา กำหนดว่า DropdownList1 เลือกค่าเป็น ID = ‘2’ จากนั้น ที่ Event SelectedIndexChange ของ DropdownList1 ให้ใส่ Code ดังนี้ จากนั้นผูก myDataSource ให้กับ DropdownList2 ค่าล่าสุดใน DropdownList2 จะแสดงดังด้านล่าง โดยที่ ID = ‘2’ จะหายไป เนื่องจากถูกเลือกไปแล้ว ดังนี้ ID Name 1 name1 3 name3 5 name5 10 name10 กรณีที่มี DropdownList3 ก็ให้ทำเหมือนขั้นตอนก่อนหน้า ตัวอย่างกำหนดค่าการเลือกของ DropdownList1 = ‘2’ และ DropdownList2 = ‘5’ ดังนี้ จากนั้น ที่ Event SelectedIndexChange ของ DropdownList2 ให้ใส่ Code แบบเดิม จากนั้นผูก myDataSource ให้กับ DropdownList3 ค่าล่าสุดใน DropdownList3 จะแสดงดังด้านล่าง โดยที่ ID = ‘2’ และ ‘5’ จะหายไป เนื่องจากถูกเลือกไปแล้ว ดังนี้ ID Name 1 name1 3 name3 10 name10 จะเห็นได้ว่าเราใช้ Query เดียวกันในหลาย ๆ DropdownList ดังนั้นสามารถทำ Query นี้ให้เป็นฟังก์ชันเพื่อเรียกใช้งานได้ หวังว่าจะเป็นประโยชน์ไม่มากก็น้อยสำหรับผู้อ่านนะคะ \(@^0^@)/

อยากดึงข้อมูลมาแสดงใน TreeView จะทำอย่างไรดี?

April 1, 2020 17:36

ในบทความนี้ ผู้เขียนก็ยังคงอยู่ในเรื่องของ TreeView เช่นเคย เพื่อต่อยอดจากบทความก่อนในหัวข้อเรื่อง “มาทำความรู้จักกับพื้นฐานการใช้งาน “TreeView” สำหรับมือใหม่กันดีกว่า” ที่เป็นบทความเกี่ยวกับเรื่องการแนะนำวิธีจัดการกับ TreeView ด้วยการกำหนดคุณสมบัติต่างๆ แต่งสีเติมกลิ่น ให้ TreeView ของเราน่าสนใจยิ่งขึ้น แต่ข้อมูลที่นำมาใช้ในการแสดงผลยังคงเป็นในลักษณะกำหนดเองเป็นค่าตายตัวจากหน้าจอและยังไม่เน้นเรื่องดึงข้อมูลจากฐานข้อมูล ในบทความนี้จึงถือเป็นภาคต่อจากบทความที่แล้วและขอเน้นในส่วนของการดึงข้อมูลมาแสดงผลบน TreeView ในเชิงโปรแกรมกันบ้าง เพื่อให้ผู้อ่านได้ความรู้ทั้งในส่วนการกำหนดคุณสมบัติและการดึงข้อมูลมาแสดงไปประยุกต์ใช้ในงานพัฒนาร่วมกันได้ ขั้นตอนในการดึงข้อมูลจากฐานข้อมูลมาแสดงใน TreeView สร้าง TreeView ที่ต้องการใช้ในการแสดงผลข้อมูลตัวอย่าง code ในฝั่ง Client <body> <form id=”form1″ runat=”server”> <asp:TreeView ID=”TvOrganization” runat=”server” > </asp:TreeView> </form> </body> ติดต่อฐานข้อมูลเพื่อใช้ในการแสดงผล ซึ่งในตัวอย่างนี้จะขอสมมุติข้อมูลจาก datatable ที่สร้างขึ้นแทนตัวอย่าง code ในฝั่ง Server (C#) ฟังก์ชั่นตอน Page_Load protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { ///////ดึงข้อมูลวิทยาเขต โดยในการใช้งานจริงจะเป็นการติดต่อกับฐานข้อมูลเพื่อดึงค่าวิทยาเขตมาแสดง DataTable dt = this.GetCampusData(); ///////เรียกใช้งานฟังก์ชั่น PopulateTreeView() เพื่อนำค่าข้อมูลวิทยาเขตมาแสดงผลใน TreeView โดยในกรณีนี้จะเริ่มสร้างจาก root node โดยส่งค่าพารามิเตอร์ของ parentId เป็น 0 this.PopulateTreeView(dt, 0, null); } } ฟังก์ชั่นดึงข้อมูลวิทยาเขตและคณะ/หน่วยงาน private DataTable GetCampusData() { ///////เตรียมข้อมูลวิทยาเขต เนื่องจากในกรณีนี้เป็นการสมมุติโครงสร้างและข้อมูลวิทยาเขตโดยสร้างเป็น DataTable เสมือนเป็นตารางวิทยาเขตในฐานข้อมูล DataTable dtCampus = new DataTable(); dtCampus.Columns.AddRange(new DataColumn[2] { new DataColumn(“CampID”, typeof(int)), new DataColumn(“CampNameThai”,typeof(string)) }); dtCampus.Rows.Add(“01”, “วิทยาเขตหาดใหญ่”); dtCampus.Rows.Add(“02”, “วิทยาเขตปัตตานี”); dtCampus.Rows.Add(“03”, “วิทยาเขตภูเก็ต”); dtCampus.Rows.Add(“04”, “วิทยาเขตสุราษฎร์ธานี”);dtCampus.Rows.Add(“05”, “วิทยาเขตตรัง”); return dtCampus; } private DataTable GetFacultyData() { ///////เตรียมข้อมูลคณะ/หน่วยงาน ในกรณีนี้เป็นการสมมุติโครงสร้างข้อมูลคณะ/หน่วยงานและสร้างเป็น DataTable โดยมีการระบุรหัสของวิทยาเขตไว้ด้วย ซึ่งในการทำงานจริงจะเป็นการดึงข้อมูลจากตารางที่เก็บข้อมูลคณะ/หน่วยงานแทน DataTable dtFaculty = new DataTable(); dtFaculty.Columns.AddRange(new DataColumn[3] { new DataColumn(“FacID”, typeof(int)), new DataColumn(“FacNameThai”,typeof(string)) , new DataColumn(“CampID”,typeof(string)) }); dtFaculty.Rows.Add(“01”, “สำนักงานอธิการบดี”,”01″); dtFaculty.Rows.Add(“02”, “ศูนย์คอมพิวเตอร์”, “01”); dtFaculty.Rows.Add(“03”, “วิศวกรรมศาสตร์”, “01”); dtFaculty.Rows.Add(“54”, “คณะรัฐศาสตร์”, “02”); dtFaculty.Rows.Add(“07”, “ศึกษาศาสตร์”, “02”); dtFaculty.Rows.Add(“36”, “วิทยาการสื่อสาร”, “02”); dtFaculty.Rows.Add(“81”, “ศูนย์การเรียนรู้”, “03”); dtFaculty.Rows.Add(“56”, “คณะศิลปศาสตร์และวิทยาศาสตร์”, “04”); dtFaculty.Rows.Add(“44”, “คณะเทคโนโลยีและการจัดการ”, “04”); dtFaculty.Rows.Add(“46”, “คณะพาณิชยศาสตร์และการจัดการ”, “05”); dtFaculty.Rows.Add(“66”, “คณะสถาปัตยกรรมศาสตร์”, “05”); return dtFaculty; } ฟังก์ชั่นที่ใช้ในการวนแสดงข้อมูลที่ได้จากวิทยาเขตและคณะ/หน่วยงานมาแสดงใน TreeView private void PopulateTreeView(DataTable dtParent, int parentId, TreeNode treeNode) { ///////ดึงค่าข้อมูลคณะ/หน่วยงาน DataTable dtChild = this.GetFacultyData(); DataRow[] drChild; ///////วนค่าข้อมูลวิทยาเขตจาก dtParent ที่เป็นพารามิเตอร์ที่ส่งมา foreach (DataRow

มาทำความรู้จักกับพื้นฐานการใช้งาน “TreeView” สำหรับมือใหม่กันดีกว่า

March 29, 2020 11:19

เชื่อว่านักพัฒนาโปรแกรม Web application ด้วย .Net หลายๆท่านอาจจะเคยได้ยินชื่อของเจ้า “TreeView” กันมาบ้างแล้ว หรือบางท่านก็อาจจะเกือบลืมเจ้าเครื่องมือตัวนี้ไปแล้วก็ตามเพราะมันอาจจะไม่ใช่เครื่องมือที่ถูกหยิบมาใช้บ่อยนัก ในบทความนี้ผู้เขียนจึงขอหยิบยกเจ้า “TreeView” มาปัดฝุ่น แนะนำลูกเล่นการใช้งาน การกำหนดคุณสมบัติต่างๆ และวิธีการใช้งานกันอย่างคร่าวๆก่อน เพื่อเป็นการปูพื้นฐานให้กับมือใหม่หัดใช้ TreeView และรื้อความทรงจำให้กับผู้ที่เคยใช้ TreeView มาก่อนหน้านี้ เผื่อความสามารถที่ซ่อนอยู่จะไปเตะตาตรงใจท่านใดที่กำลังมองหาการทำงานแบบนี้อยู่พอดี จนอยากนำเครื่องมือตัวนี้ไปประยุกต์ใช้เป็นอีกหนึ่งทางเลือกในการแสดงผลข้อมูลในงานพัฒนาของท่านกันอีกครั้งได้ค่ะ แต่ก่อนจะพูดถึงลูกเล่นการทำงานของ TreeView คงต้องเกริ่นนำกันก่อนว่าเจ้าเครื่องมือตัวนี้ถูกจัดอยู่ในจำพวก Navigation Control ซึ่งบางคนอาจเกิดคำถามว่า ข้อมูลแบบใดบ้างจึงจะเหมาะนำมาใช้งานแสดงผลกับเจ้า TreeView นี้ ซึ่งโดยความเห็นส่วนตัวแล้วนั้น ผู้เขียนคิดว่าข้อมูลที่เหมาะจะมาแสดงผลด้วย TreeView ควรจะเป็นข้อมูลที่มีลักษณะเป็นแบบ Hierarchy หรือเป็นลักษณะโครงสร้าง มีลักษณะข้อมูลเป็นลำดับชั้นย่อยๆ เช่น โครงสร้างหน่วยงาน โครงสร้างองค์กร หรือข้อมูลที่เป็นประเภทหลักและประเภทย่อย เป็นต้น และเพื่อไม่ให้เป็นการเสียเวลา เรามาเรียนรู้วิธีจัดการกับ TreeView ของเรากันเลยดีกว่าค่ะ ขั้นตอนสร้าง TreeView อย่างง่ายจาก Tool box ของ Visual studio .Net สามารถทำได้ดังนี้ สร้าง TreeView โดยเลือกจากแท็บเครื่องมือ ในกลุ่ม Navigation มาวางในหน้าจอ design ของเรา ดังรูป การเพิ่มและจัดการ node ให้กับ TreeView ได้โดยการคลิกเลือก “Edit Nodes…” ดังภาพ การจัดการเพิ่ม-ลดข้อมูล node ในระดับต่างๆ จะแสดงภาพดังหน้าจอต่อไปนี้ เพื่อใช้ในการจัดการเพิ่ม-ลดข้อมูล node ในระดับต่างๆ ดังนี้ โดยขั้นตอนการเพิ่ม – ลด node อย่างคร่าวๆ มีดังนี้ การเพิ่ม node ที่เป็น root (ลำดับแรกสุด) โดยการกดปุ่ม การเพิ่ม node ระดับย่อย(child node) โดยการกดปุ่ม การลบ node ที่ไม่ต้องการ สามารถทำได้โดยการกดปุ่ม ปรับเปลี่ยนระดับความลึกของ node โดยคลิกเลือก node ที่ต้องการจัดการและกดปุ่ม เพื่อเลื่อนระดับความลึกมากน้อยได้ตามต้องการ ซึ่งจะเห็นได้ว่ามีการทำงานคล้ายกับการเยื้องย่อหน้าใน MS Word ที่เราคุ้นเคยกันดี การเลื่อนลำดับบน-ล่างให้กับ node สามารถทำได้โดยกดปุ่ม ตัวอย่าง หน้าจอการจัดการ node ใน TreeView จากภาพตัวอย่าง มีการเพิ่มและจัดการ node ข้อมูลโครงสร้างองค์กรตั้งแต่ระดับมหาวิทยาลัย วิทยาเขต และคณะ โดยการกำหนดค่าตายตัวจากหน้าจอ design ด้วยการระบุเอง ไม่ได้ดึงจากฐานข้อมูล ซึ่งท่านสามารถทดลองเพิ่มและจัดการได้ด้วยตัวเองเพื่อให้เข้าใจการทำงานมากขึ้น โดยลองทำตามขั้นตอนการจัดการ node ข้างต้น นอกจากการเพิ่ม-ลด node แล้ว ท่านยังสามารถกำหนดคุณสมบัติให้กับ node ได้ด้วย โดยคลิกข้อมูล node ที่ต้องการจัดการจากฝั่งซ้ายมือ และกำหนดคุณสมบัติของ node ดังกล่าวในฝั่งขวามือ ซึ่งรายละเอียดการกำหนดคุณสมบัติต่างๆ ในแต่ละ node จะขอพูดในหัวข้อถัดไป (ข้อ 4.)ค่ะ กำหนดคุณสมบัติให้กับแต่ละ node เราสามารถกำหนดคุณสมบัติ (Properties) เฉพาะให้กับแต่ละ node ได้ โดยจะขอพูดถึงคร่าวๆ ที่คิดว่าน่าจะใช้อยู่บ่อยๆและน่าสนใจ ดังนี้ ShowCheckBox : เป็นการระบุว่าจะให้ node ดังกล่าวแสดงช่องให้เลือกหรือไม่ Checked : เป็นการระบุว่า ต้องการให้มีการทำเครื่องหมายถูกไว้ในกล่อง check box หรือไม่ ซึ่งต้องมีการกำหนดควบคู่กับ ShowCheckBox = “true” นั่นเอง Text : ระบุว่าต้องการให้ node ดังกล่าวแสดงข้อความอะไร Value : ระบุค่าที่จะกำหนดให้กับ node ดังกล่าว

ปัญหา “A potentially dangerous Request.Form value was detected from the client (ctl00$ContentPlaceHolder1$txtAbstractEng="…ontrol ” แก้ไขได้อย่างไร

January 29, 2020 16:31

ในการป้อนข้อมูลลงในเว็บ บางครั้งเราอาจจะพบปัญหาว่าไม่สามารถบันทึกข้อมูลที่ป้อนได้ ทั้งๆ ที่ปกติก็บันทึกได้อยู่ แล้วมันเกิดจากอะไร เรามาดู ปัญหา สาเหตุ และวิธีการแก้ไขกันค่ะ เผื่อจะเป็นปัญหาเดียวกัน ปัญหา : ในการบันทึกข้อมูลลงบางเว็บไซต์เราจะอาจจะพบปัญหาว่าหลังจากเราป้อนข้อมูลเสร็จแล้ว แต่ทำไมไม่สามารถบันทึกข้อมูลได้ เกิด error เช่น เมื่อบันทึกจะมีข้อความขึ้นดังภาพข้างล่าง ป้อนใหม่บันทึกใหม่ก็ยังไม่ได้ โอ๊ยเครียด จะทำยังไงดี สาเหตุ : อาจจะเนื่องมาจากมีการ copy ข้อมูลมาจากแหล่งอื่นที่มีตัวอักษรพิเศษบางตัว เช่น ? ติดมาด้วย ทำให้เราจะไม่สามารถบันทึกข้อมูลลงฐานได้ เราจะทำอย่างไร การแก้ไข : สามารถแก้ไขได้หลายวิธี คือ ในกรณีที่เป็นผู้ใช้งาน เราสามารถแก้ไขง่ายๆ ได้โดยการ นำ ? ออกจากข้อความ ดังรูปข้างล่าง แล้วบันทึกใหม่ 2. ในกรณีที่เป็นผู้พัฒนาระบบ เราจะเพิ่มข้อความ ValidateRequest=”false” ลงใน source ของหน้าจอที่ error ดังรูปข้างล่าง เพียงเท่านี้ปัญหาดังกล่าวก็จะหมดไปแล้วค่ะ ไม่ยากเลยใช่มั้ยคะ แล้วพบกันใหม่ค่ะ