Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 103,036

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



Update Visual Studio 2008 SP1

หลังจากดาวน์โหลดแล้วให้ดับเบิ้ลคลิกเพื่อ ติดตั้ง เลือก 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

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

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



Update jQuery IntelliSense

หลังจากดาวน์โหลดแล้วให้ดับเบิ้ลคลิกเพื่อ ติดตั้ง เลือก 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


17

สร้าง ปุ่ม 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

18

จากตัวอย่างจะเห็นว่ามีการอ้างถึง 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

19

มีการใช้ 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


       
Bookmark.   
       

 

  By : TC Admin
  Score Rating : -
  Create Date : 2011-10-26 11:40:31
  Download : Download  Basic ASP.NET jQuery Framework (พื้นฐานง่าย ๆ ด้วย ASP.NET กับ jQuery) (1.00 MB)
     


Related Links
ออกรายงาน Crystal Report บน Web(ASP.NET) Step by Step
ออกรายงาน Crystal Report บน Web(ASP.NET) Step by Step
ตัวอย่างการออกรายงานบน crystal report บนเว็บ web(asp.net) อธิบายขั้นตอนทีล่ะ step เข้าใจง่าย ทำงานได้จริง
Rating :
Update :
2017-03-17 21:19:24 View : 37,603
ASP.NET GridView Popup and jQuery Lightbox  สร้าง Popup บน GridView
ASP.NET GridView Popup and jQuery Lightbox สร้าง Popup บน GridView
เทคนิคการใช้ GridView ของ ASP.NET กับการเปิด Popup เพื่อแสดงข้อมูลใน Popup และการใช้ Lightbox ของ jQuery ในการแสดงผล
Rating :
Update :
2017-03-24 21:26:25 View : 16,585
ADO.NET and Oracle  (VB.NET/C#) เขียนโปรแกรมติดต่อกับฐานข้อมูล Oracle Database
ADO.NET and Oracle (VB.NET/C#) เขียนโปรแกรมติดต่อกับฐานข้อมูล Oracle Database
ADO.NETกับฐานข้อมูล Oracle การสร้าง Connection String และการเชื่อมต่อผ่าน TNS Name
Rating :
Update :
2017-03-24 21:28:07 View : 14,886
สร้าง Crystal Report บน Visual Studio (VB.NET , C#) Step by Step
สร้าง Crystal Report บน Visual Studio (VB.NET , C#) Step by Step
บทความการสร้างรายงานแบบง่าย ๆ บน Crystal Report ซึ่งเป็น Report Tools ที่ได้รับความนิยมมากที่สุด ทำงานร่วมกับ VB.NET และ C#
Rating :
Update :
2017-03-24 21:25:06 View : 70,981
.NET Windows Form กับการส่งอีเมล์ (Send Mail) แบบง่าย ๆ ด้วย System.Net.Mail (VB.NET , C#)
.NET Windows Form กับการส่งอีเมล์ (Send Mail) แบบง่าย ๆ ด้วย System.Net.Mail (VB.NET , C#)
ง่าย ๆ กับ .NET Framework การเขียน Windows Form ส่งอีเมล์ แบบง่าย ๆ ด้วย Namespace ของ System.Net.Mail
Rating :
Update :
2017-03-17 22:15:41 View : 12,341
ติดตั้ง Crystal Report ลงใน Tab Reporting บน Visual Studio 2010 (.NET 4.0)
ติดตั้ง Crystal Report ลงใน Tab Reporting บน Visual Studio 2010 (.NET 4.0)
วิธีการติดตั้ง tools ของ crystal report บน visual studio 2010 (.net framework 4.0) ซึ่งในเวอร์ชั่นนี้จะไม่มีมาพร้อมกับใน pacakge install จะต้องหาดาวน์โหลดมาติดตั้งเอง
Rating :
Update :
2017-03-24 21:31:07 View : 52,811
ThaiCreate.Com Forum

Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน Struts การเขียนโปรแกรม Java Struts Framework
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน Yii  Framework การเขียนโปรแกรม ภาษา PHP กับ Yii
สอน .Net การเขียนโปรแกรม ภาษา .Net
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
ปรับแต่งเว็บให้โหลดเร็ว

สุดยอด Source Code V2.0
 

แจ้งชำระเงิน/โอนเงิน
 

Hit Link
   


Acc : thaicreate@hotmail.com






Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2017 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 084-715-5121 อัตราราคา คลิกที่นี่