Microsoft Expression Web - แหล่งข้อมูล SQL

Expression Web มีเครื่องมือมากมายสำหรับการทำงานกับเพจ HTML แบบคงที่ แต่ก็มีเครื่องมือสำหรับสร้างเพจแบบไดนามิกเพิ่มเติม ไดนามิกเพจมักจะดึงข้อมูลหรือเนื้อหาจากแหล่งข้อมูล ในบทนี้เราจะเรียนรู้วิธีการสร้าง SQL DataSource เพื่อใช้ในไดนามิกเพจ

ตัวอย่าง

มาดูตัวอย่างง่ายๆที่เราสร้างรายการแบบหล่นลงและเติมรายการโดยการดึงข้อมูลจากฐานข้อมูลโดยใช้ SQL DataSource

Step 1 - เริ่มต้นด้วยการสร้างเว็บไซต์ใหม่ที่ว่างเปล่า

ขอเรียกว่า SQLDataSource. คลิกตกลง

Step 2- คุณจะเห็นว่าเว็บนิพจน์ได้สร้างโฟลเดอร์ให้เรา อย่างไรก็ตามเนื่องจากเราเลือกที่จะสร้างโปรเจ็กต์เปล่าดังนั้นเราจึงยังไม่มีไฟล์ใด ๆ

Expression Web ไม่จำเป็นต้องใช้เพื่อสร้างไซต์ HTML แบบคงที่ เราสามารถสร้างไซต์แบบไดนามิกโดยใช้เพจและการควบคุมได้อย่างง่ายดาย

Step 3- เว็บ Expression ยังช่วยให้เราสร้างเนื้อหาแบบไดนามิกได้มากมายโดยไม่จำเป็นต้องเป็นนักพัฒนา ลองเพิ่มไฟล์ ASPX จากไฟล์File → New Pageตัวเลือกเมนู เลือก ASPX ในรุ่นกลางแล้วคลิกตกลง

Step 4 - ที่นี่เราจะสร้างการควบคุมในรูปแบบของเราที่ต้องการเข้าถึงข้อมูลจากฐานข้อมูลเพื่อสร้างเว็บไซต์แบบไดนามิก

ในกรณีนี้เราจะสร้าง SQL DataSource ซึ่งจะดึงข้อมูลจากฐานข้อมูล

Step 5 - ไปที่ Toolbox แล้วลากไฟล์ DropDownList แล้ววางลงในไฟล์ <form>แท็กในมุมมองโค้ดหรือคุณสามารถวางลงในส่วนฟอร์มในมุมมองออกแบบ คุณจะเห็นว่ามีการเพิ่มโค้ดโดย Expression Web

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

Step 6 - สร้างโฟลเดอร์ใหม่ในโฟลเดอร์ Project ของคุณโดยไปที่ไฟล์ New → Folder ตัวเลือกเมนู

Step 7 - เรียกโฟลเดอร์นี้ App_Data.

Step 8 - เราจำเป็นต้องนำเข้าฐานข้อมูลในโครงการของเราโดยใช้ไฟล์ File → Import → File… ตัวเลือกเมนู

Step 9 - จะเปิดไฟล์ Importดังที่แสดงด้านล่าง คลิกที่ปุ่มเพิ่มไฟล์ ... ซึ่งจะเปิดกล่องโต้ตอบเปิดไฟล์

Step 10 - เรียกดูฐานข้อมูล (*.mdf file) ที่คุณต้องการรวมไว้ในเว็บไซต์แล้วคลิกเปิด

Step 11- เปิด MyTestDatabase.mdf จะแสดงกล่องโต้ตอบต่อไปนี้ คลิกตกลง

Step 12- ตอนนี้คุณจะเห็นว่ามีการเพิ่มไฟล์ฐานข้อมูลในโฟลเดอร์ App_Data เมื่อคุณมีตัวควบคุมเช่นรายการแบบเลื่อนลงและ Expression Web อนุญาตให้คุณผูกข้อมูลเข้ากับข้อมูลนั้นคุณจะเห็นลูกศรเล็ก ๆ ที่มุมบนขวาในมุมมองออกแบบ

Step 13- นี่คือเมนูบริบทปัจจุบันที่ช่วยให้เราทำงานที่เฉพาะเจาะจงมากสำหรับการควบคุมนั้น ๆ และหนึ่งในนั้นคือการเลือกแหล่งข้อมูล มาคลิกกันเลยChoose Data Source… และจะเปิดวิซาร์ดการกำหนดค่าแหล่งข้อมูล

Step 14- ขณะนี้เราไม่มีแหล่งข้อมูล มาเลือกตัวเลือกแหล่งข้อมูลใหม่จากเมนู

ที่นี่เราจะนำเข้าฐานข้อมูล SQL เลือกฐานข้อมูลแล้วคลิกตกลง

Step 15- ตอนนี้เราต้องระบุสตริงการเชื่อมต่อ คลิกปุ่มการเชื่อมต่อใหม่

Step 16 - เลือกไฟล์ฐานข้อมูล Microsoft SQL Server แล้วคลิกตกลง

Step 17 - คลิกปุ่มเรียกดูเพื่อค้นหาไฟล์ฐานข้อมูล

Step 18 - เลือกไฟล์ฐานข้อมูลแล้วคลิกปุ่มเปิดหรือดับเบิลคลิกที่ไฟล์ฐานข้อมูล

Step 19 - หากต้องการทดสอบการเชื่อมต่อให้คลิกปุ่มทดสอบการเชื่อมต่อ

จะแสดงหน้าจอต่อไปนี้ คลิกปุ่ม OK

Step 20- ตอนนี้เราจะกำหนดค่าแหล่งข้อมูล คลิกถัดไปบนหน้าจอต่อไปนี้

เลือกช่องทำเครื่องหมายแล้วคลิกถัดไปอีกครั้ง

Step 21- ที่นี่คุณจะเห็นตารางทั้งหมดจากฐานข้อมูลของคุณ มาเลือกไฟล์Student ตาราง.

Step 22- และคุณจะเห็นคอลัมน์ทั้งหมดในกล่องรายการ เลือกID และ LastName. ที่ด้านล่างคุณจะเห็นว่ากำลังสร้างแบบสอบถาม คุณยังสามารถใช้ไฟล์Where หรือ ORDER BY clauses. เมื่อคุณทำแบบสอบถามเสร็จแล้วให้คลิกถัดไป

Step 23 - คลิกไฟล์ Test Queryปุ่ม. มันจะแสดงไฟล์query result ดังแสดงด้านล่าง

Step 24- ในกล่องโต้ตอบต่อไปนี้แหล่งข้อมูลจะถูกเลือกโดยค่าเริ่มต้น "เลือกฟิลด์ข้อมูลที่จะแสดงใน DropDownList" คือฟิลด์ที่จะแสดงจริง มาเลือก LastName และเลือก ID จาก“ เลือกฟิลด์ข้อมูลสำหรับค่าของ DropDownList” แล้วคลิกตกลง

ดังที่คุณเห็นในภาพหน้าจอต่อไปนี้ DataSource จะถูกเพิ่มในมุมมองการออกแบบ

ต่อไปนี้เป็นโค้ดที่สมบูรณ์ในไฟล์ ASPX ซึ่งสร้างโดย Expression Web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language = "C#" %> 
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">  
   <head runat = "server"> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body>  
      <form id = "form1" runat = "server"> 
         <asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"  
            DataTextField = "LastName" DataValueField = "ID"> 
         </asp:DropDownList> 

         <asp:SqlDataSource ID = "SqlDataSource1" runat = "server"   
            ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"  
               SelectCommand = "SELECT [ID], [LastName] FROM [Student]"> 
         </asp:SqlDataSource> 
      </form>  
   </body>  
</html>

Step 25 - มาบันทึกหน้าเว็บโดยกด Ctrl + S

เรียกหน้านี้ SQLDatasource.aspx แล้วคลิกบันทึก

Step 26- ดูตัวอย่างหน้านี้ในเบราว์เซอร์ คุณจะเห็นรายการแบบเลื่อนลงซึ่งมีนามสกุลของนักเรียนจากไฟล์Student ตาราง.