Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 108,068

HOME > .NET Framework > Basic ASP.NET jQuery Framework (พื้นฐานง่าย ๆ ด้วย ASP.NET กับ jQuery)

Basic ASP.NET jQuery Framework (พื้นฐานง่าย ๆ ด้วย ASP.NET กับ jQuery)

Basic ASP.NET jQuery Framework เริ่มต้น jQuery กับ พื้นฐานง่าย ๆ ASP.NET jQuery Framework
บทความนี้เป็นการเริ่มต้นง่าย ๆ ASP.NET กับ jQuery การติดตั้งและเตรียมความพร้อมในการพัฒนาโปรแกรม ASP.NET กับ jQuery บน Visual Studio 2008 และ Visual Studio 2010 สำหรับผู้เริ่มต้น และ กำลังศึกษา jQuery และ ASP.NET (สำหรับ jQuery คืออะไร ให้กลับไปอ่านตามลิ้งค์ที่แนะนำ หรือบทความ Basic jQuery ก็สามารถหาอ่านได้เช่นเดียวกัน)

ASP.NET & jQuery

ใน Visual Studio 2010 ได้มีการ Include jQuery เข้าใน Library ของ Framework ซึ่งสามารถเรียกใช้ได้ในทัน เมื่อมีการ Create Project ที่เป็น ASP.NET Web Application

jQuery Visual Studio 2010

แต่ในตัวอย่างนี้จะใช้ Visual Studio 2008 ในการพัฒนาโปรแกรมด้วย ASP.NET กับ jQuery ซึ่งจะต้องทำการ Update ตัวโปรแกรม Visual Studio 2008 SP1 ก่อน โดยให้ดาวน์โหลดได้ที่

ขั้นตอนที่ 1 Download และ Update Visual Studio 2008 SP1

http://www.microsoft.com/download/en/details.aspx?id=10986

หลังจากดาวน์โหลดแล้วให้ดับเบิ้ลคลิกเพื่อ ติดตั้ง เลือก Next ตามรูป

Update Visual Studio 2008 SP1

ติ๊กเลือก I have read and accept the license terms. และ Next ตามลำดับ

Update Visual Studio 2008 SP1

การดาวน์ดโหลดและติดตั้ง ซึ่งขั้นตอนนี้จะมีการดาวน์โหลด Source จากเว็บของ Microsoft ซึ่งอาจจะต้องรอนานหน่อย ขึ้นอยู่กับความเร็วของ Internet

Update Visual Studio 2008 SP1

การติดตั้งเรียบร้อย

ขั้นตอนที่ 2. Update และติดตั้ง JScript jQuery IntelliSense
jQuery IntelliSense คืออะไร ทำงานบนไฟล์ "-vsdoc.js" ซึ่งเป็นไฟล์ jQuery for Visual Studio เป็นเหมือน IntelliSense Tooltip / AutoComplete หรือคำอธิบาย เมื่อเราสร้าง function หรือ event ต่าง ๆ ใน jQuery เพื่อช่วยให้การเขียนโปรแกรมด้วย jQuery นั้นง่ายยิ่งขึ้น ดูตัวอย่างเพื่อความเข้าใจ

รูปตัวอย่าง jQuery IntelliSense

Download Fix for: JSCript Intellisense fix - need to enhance javascript VS flavors to fully support Intellisense and third-parties ได้ที่

http://connect.microsoft.com/VisualStudio/Downloads/DownloadDetails.aspx?DownloadID=14883
http://archive.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736

หลังจากดาวน์โหลดแล้วให้ดับเบิ้ลคลิกเพื่อ ติดตั้ง เลือก Next ตามรูป

Update jQuery IntelliSense

เลือก Next

Update jQuery IntelliSense

คลิกเลือก I have read and accept the license terms. และ Next ตามลำดับ

Update jQuery IntelliSense

กำลังติดตั้งโปรแกรม ซึ่งถ้าติดตั้งเรียบร้อยแล้ว โปรแกรมจะให้ทำการ Restart เครื่อง 1 รอบ

เริ่มต้นการเขียนโปรแกรม ASP.NET กับ jQuery บนโปรแกรม Visual Studio

เปิดโปรแกรม Visual Studio 2008

ASP.NET and jQuery

เลือกเมนู File -> New -> Web Site

ASP.NET and jQuery

เลือก ASP.NET Web Site และกำหนดเชื่อ Project ในที่นี่กำหนดเป็น ASPNetjQuery

ASP.NET and jQuery

หน้าหลักของโปรเจค ซึ่งยังไม่มีอะไร เป็นหน้าจอเปล่า ๆ

ASP.NET and jQuery

ขั้นตอนนี้จะสร้างโฟเดอร์เพื่อเก็บไฟล์ jQuery โดยให้คลิกขวาที่โปรเจคให้เลือก New Folder

ASP.NET and jQuery

ให้ตั้งชื่อโฟเดอร์ว่า Scripts และคลิกขวาที่โฟเดอร์ และเลือก Add Existing Items

ASP.NET and jQuery

ให้เลือกไฟล์ 2 ตัว คือ jquery-1.4.1.js และ jquery-1.4.1-vsdoc.js ( jquery-1.4.1.js เป็นไฟล์ของ jQuery Library ส่วน jquery-1.4.1-vsdoc.js เป็นไฟล์ที่ถูกสร้างมาเพื่อให้สะดวกต่อการใช้งานกับ Visual Studio ถ้ามี Version ใหม่กว่านี้ก็สามารถนำมาใช้ได้เช่นเดียวกัน)

สำหรับไฟล์ jquery-1.4.1.js และ jquery-1.4.1-vsdoc.js สามารถดาวน์โหลดได้จากข้างล่าง

ASP.NET and jQuery

ไฟล์ jquery-1.4.1.js และ jquery-1.4.1-vsdoc.js ได้ถูก Include เข้ามาในโปรเจค

ASP.NET and jQuery

กลับมายังหน้า Webpage (.aspx) ตัวนี้เป็นมุมมองของ Design ซึ่งสามารถสลับการทำงานระหว่า Design กับ Source ได้

ASP.NET and jQuery

มุมมองของ Source ซึ่งเป็น HTML Tags จะใช้สำหรับการแก้ไขหรือปรับปรุง Source ต่าง ๆ ตั้ง HTML Tag หรือ ASP.NET Tags หรือไม่กระทั่ง CSS , JavaScript และ jQuery ก็สามารถแก้ไขได้ในมุมมองนี้เช่นเดียวกัน

ASP.NET and jQuery

กลับมายังมุมมองของ Source ให้ include Library ทั้ง 2 ตัวเข้ามาในหน้า Webpage ด้วยคำสั่ง

     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>

หรือดูที่รูปเป็นตัวอย่าง ซึ่งการ Include Library จะต้องทำการ Include ในหน้า Webpage (.aspx) ทุกหน้าที่ต้องการเรียกใช้ jQuery หรือสามารถใช้ร่วมกับ Master Page หรือ Web User Control ได้

ASP.NET and jQuery

หลังจาก Include เรียบร้อยแล้วเมื่อลองพิมพ์คำสั่งง่าย ๆ จะปรากฏ jQuery IntelliSense ซึ่งจะช่วยให้การพัฒนา jQuery ได้ง่ายและสะดวกยิ่งขึ้น

ASP.NET and jQuery

หรือแม้แต่ Event หรือ Property , Method อื่น ๆ ก็มีให้เลือกเช่นเดียวกัน ซึ่งจะดวกมากต่อการเขียนโปรแกรมด้วย jQuery

ทดสอบ Script ง่าย ๆ ของ ASP.NET กับ jQuery

สร้าง ปุ่ม Button1 และสร้าง event เมื่อมีการคลิกแล้ว alert คำว่า "Sawatdee ThaiCreate.Com"

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            $(document).ready(function() {
            
                $("#Button1").click(function() {
                    alert("Sawatdee ThaiCreate.Com");
                });
     
            });
        </script> 
        <asp:Button ID="Button1" runat="server" Text="Button" />
    
    </div>
    </form>
</body>
</html>

Screeshot

จากตัวอย่างจะเห็นว่ามีการอ้างถึง element ของ Web Control ชื่อ ID="Button1" และเมื่อมีการคลิกที่ปุ่ม จะแสดงคำว่า "Sawatdee ThaiCreate.Com" และหลังจากนั้นก็จะทำการ PostBack ไป ซึ่งเป็น Event ของ ASP.NET ซึ่งถ้าไม่ต้องการให้มีการ PostBack() สามารถกำหนด return false; ได้หลังจากคำสั่ง alert();

นอกจากนี้ยังสามารถใช้ HTML Control ในการกำหนด Event ต่าง ๆ ได้เช่นเดียวกัน ลองมาดูอีกตัวอย่าง

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
     <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            $(document).ready(function() {

                $("#btn1").click(function() {
                    $("#div1").slideUp();
                });

                $("#btn2").click(function() {
                    $("#div1").slideDown();
                });

                $("#btn3").click(function() {
                    $("#div1").slideToggle();
                });
     
            });
        </script> 
        
        <div id="div1">www.ThaiCreate.Com <br />www.ThaiCreate.Com <br />www.ThaiCreate.Com <br />www.ThaiCreate.Com <br /></div>
        <input type="button" id="btn1" value="Up" />
        <input type="button" id="btn2" value="Down" />
        <input type="button" id="btn3" value="Toggle" />
    </div>
    </form>
</body>
</html>

Screeshot

มีการใช้ HTML Control เพื่อมาจัดการ Event ด้วย jQuery ให้เลื่อนขั้นเลื่อนลง ซึ่งสามารถสร้าง Effect ได้อย่างง่าย ๆ ตามสไตล์ของ jQuery

จะเห็นว่า jQuery ได้มีบทบาทต่อการเขียนโปรแกรมหรือพัฒนาโปรแกรมบน Web Browser อย่างมาก และช่วยให้การจัดการอะไรหลาย ๆ อย่างที่เป็นข้อจำกัด และทำเรื่องยาก ๆ ให้สามารถทำงานได้อย่างง่าย ๆ ซึ่งบทความนี้เป็นเพียงตัวอย่าง Basic เท่านั้น แต่ถ้าหากต้องการเขียนรู้คำสั่งอื่น ๆ ของ jQuery สามารถศึกษาได้จากลิ้งค์ข่างล่าง ซึ่งทางเว็บไทยครีเอทได้รวบรวมคำสั่ง ที่ใช้งานกันบ่อย ๆ ไว้อย่างมากมาย และถ้ามีโอากาสจะได้ทำบทความที่น่าสนใจและฝึกทักษะในการเขียนโปรแกรมด้วย ASP.NET กับ jQuery ไว้ให้ได้อ่านกัน

บทความ jQuery พื้นฐาน
Go to : jQuery Tutorial : สอน jQuery เขียน jQuery กับ JavaScript เรียน jQuery ในประเทศไทย
Go to : jQuery : Whats a jQuery , jQuery คืออะไร ??
Go to : jQuery : How to use , จะเขียน jQuery จะต้องทำอย่างไร
Go to : jQuery Syntax : jQuery Basic Syntax
Go to : jQuery Selectors : jQuery Selectors and Element
Go to : jQuery HTML : jQuery and HTML
Go to : jQuery Css : jQuery and Css
Go to : jQuery Events : jQuery and Events
Go to : jQuery Effects : jQuery and Effects
Go to : jQuery Ajax: jQuery and Ajax

หัวข้ออื่น ๆ ที่น่าสนใจ
Go to : jQuery Introduction : jQuery Introduction เกี่ยวกับ jQuery การเขียนโปรแกรมด้วย jQuery
Go to : jQuery Selectors : jQuery and Selectors การเรียกใช้งาน Selectors ของ jQuery ในการอ้างถึง element
Go to : jQuery Attributes : jQuery and Attributes การเรียกใช้งาน Attributes
Go to : jQuery Traversing : jQuery and Traversing คำสั่งพื้นฐาน การเรียกใช้งาน jQuery กับ Traversing
Go to : jQuery Manipulation : jQuery and Manipulation การเรียกใช้งาน jQuery กับ Manipulation
Go to : jQuery Css and Class : jQuery and CSS คำสั่งพื้นฐาน การเรียกใช้งาน jQuery กับ CSS
Go to : jQuery Events : jQuery and Events คำสั่งพื้นฐาน การเรียกใช้งาน jQuery กับ Events
Go to : jQuery Effects : jQuery and Effects คำสั่งพื้นฐาน การเรียกใช้งาน jQuery กับ Effects
Go to : jQuery Ajax : jQuery and Ajax คำสั่งพื้นฐาน การเรียกใช้งาน jQuery กับ Ajax Framework
Go to : jQuery Utilities : jQuery and Utilities คำสั่งพื้นฐาน การเรียกใช้งาน Utilities อื่น ๆ ของ jQuery


	By :	TC Admin
	Score Rating :	-
	Create Date :	2011-10-26 11:40:31
	Download :	(1.00 MB)

-->

Related Links

.NET Smart Device เขียนโปรแกรมบน Smartphone, Pocket PC , Windows CE , Window Mobile 5-6, Hand Held,...
.NET Smart Device Project เขียนโปรแกรมบน Smartphone, Pocket PC , Windows CE , Window Mobile 5-6, Hand Held,...
Rating :

Update : 2017-03-24 21:17:48 View : 37,172

DataGridView , ComboBox , ListBox : Basic in (.NET) Windows Forms Application
Basic พื้นฐานการสร้าง DataGridView , ComboBox , ListBox บน Windows Form ด้วย Wizard ของ Visual Studio
Rating :

Update : 2017-03-24 21:18:46 View : 28,057

การสร้างฟอร์มด้วย DataGridView เบื้องต้นแบบ Step by Step [ VB.NET (Windows App+SQL Server) ]
การสร้างฟอร์มด้วย DataGridView เบื้องต้นแบบ Step by Step Development Tool: Visual Studio 2010 Express Database Engine: MS SQL Server 2005 Express
Rating :

Update : 2011-07-24 19:33:14 View : 17,330

ASP.NET กับ JSON และการรับ-ส่งข้อมูล JSON ผ่าน Web Service (VB.NET , C#)
การนำ json มาใช้งานร่วมกับ asp.net ในการรับส่งข้อมูล json ผ่าน web service การเข้ารหัสและถอดรหัส json บนภาษา vb.net และ c#
Rating :

Update : 2017-03-24 21:33:02 View : 48,586

การสร้าง Crystal Report กับการสร้าง Class และ DataSource (.NET)
ตัวอย่างการสร้าง class บน .net framework เพื่อสร้าง dataset และ datatable กำหนดค่า datasource ให้กับ crystal report
Rating :

Update : 2017-03-24 21:32:24 View : 17,173

C# .NET Create Word Document (Windows 7 and Office 2003 , Office Word 2007)
ตัวอย่างการใช้ C# ในการสร้างเอกสาร Word (.doc) โดยใช้ Class Library ของ Microsoft.Office.Interop.Word
Rating :

Update : 2017-03-17 22:12:40 View : 9,142

สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8

สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI

Free Tutorial

	สอน Google Maps Api
	สอน Windows Service
	สอน Entity Framework
	สอน Android
	สอน Java เขียน Java
	Java GUI Swing
	สอน JSP (Web App)
	iOS (iPhone,iPad)
	Windows Phone
	Windows Azure
	Windows Store
	Laravel Framework
	Yii PHP Framework
	สอน jQuery
	สอน jQuery กับ Ajax
	สอน PHP OOP (Vdo)
	Ajax Tutorials
	SQL Tutorials
	สอน SQL (Part 2)
	JavaScript Tutorial
	Javascript Tips
	VBScript Tutorial
	VBScript Validation
	Microsoft Access
	MySQL Tutorials
	-- Stored Procedure
	MariaDB Database
	SQL Server Tutorial
	SQL Server 2005
	SQL Server 2008
	SQL Server 2012
	-- Stored Procedure
	Oracle Database
	-- Stored Procedure
	SVN (Subversion)
	แนวทางการทำ SEO
	ปรับแต่งเว็บให้โหลดเร็ว