javascript textbox length

Javascript ซ อน แสดง textbox เม อคล กป ม

บทความนี้ผมจะแสดงการทำ web page ที่แสดงรายการข้อมูลด้วย ASP.NET DropDownList และเมื่อเลือกข้อมูลใน DropDownList นี้แล้วจะแสดงรายการข้อมูลย่อยใน DropDownList อีกอันด้วยกลไก AJAX เช่น เมื่อเลือก Catalog สินค้าแล้ว ก็จะแสดงรายการข้อมูลลูกออกมาที่ DropDownList อีกตัวที่เตรียมไว้เพื่อให้เลือกรายการลูกนี้ต่อไป และด้วยกลไก AJAX ผู้ใช้จึงไม่รู้สึกว่าหน้า page นี้ทำงานช้าเลย ทั้งๆที่มีการ request ข้อมูลใหม่จาก server มาแสดงเสมอ ก็เพราะว่ามันไม่มีการ refresh page เพื่อดึงข้อมูลรายการลูกใหม่นี้มาแสดงที่ DropDownList เลยนั่นเอง

ผลลัพย์ที่ทำเสร็จแล้ว

ลงมือทำ เตรียม web form และ service

1. download Source Code นี้เพื่อมาทำต่อเลยครับ

2. เปิด web projects นี้ด้วย Visual Studio แล้วเพิ่ม Web Form ใหม่เข้าไปใน project นี้ตั้งชื่อว่า AjaxDropDownList.aspx

3. เพิ่ม CSS เพื่อใช้ซ่อน control ตามที่เราต้องการ

3. เพิ่ม control DropDownList 2 ตัว เข้าไปใน web form และใส่ class hidden เพื่อซ่อน DropDownList ของรายการลูก กับ label ด้วย ตาม code ข้างล่างนี้

<table cellpadding=”3″ cellspacing=”3″ border=”0″> <tr><td>เลือกชื่อผู้แต่ง: </td> <td align=”left”> <asp:DropDownList ID=”ddlAuthor” runat=”server”> <asp:ListItem Text=”Please select” Value=”[-]”></asp:ListItem> <asp:ListItem Text=”Martin Fowler” Value=”MartinFowler”></asp:ListItem> <asp:ListItem Text=”Robert C. Martin” Value=”UncleBob”></asp:ListItem> <asp:ListItem Text=”Steve McConnell” Value=”SteveMcConnell”></asp:ListItem> </asp:DropDownList> </td></tr> <tr><td> <label id=”lblBookList” runat=”server”>รายการที่เลือกได้: </label> </td> <td align=”left”> <asp:DropDownList ID=”ddlBookList” CssClass=”hidden” runat=”server”/> </td></tr> </table> </div> </form>

4. ไปที่ code-behide ของ web form AjaxDropDownList.aspx ผมจะใส่ code ทำงานค้นข้อมูลขึ้นกับ value ของ ddlAuthor เมื่อผู้ใช้เลือก โดยประกาศ service แบบ page method

ให้ using System.Web.Services เข้ามาก่อนครับ แล้วเติม page method นี้เข้าไป

[WebMethod] public static ArrayList GetBookList(string sAuthor) { ArrayList listArr = new ArrayList();

if (sAuthor== “MartinFowler”) { listArr.Add(new ListItem(“Analysis Patterns: Reusable Object Models”, “MartinFowler0”)); listArr.Add(new ListItem(“Refactoring: Improving the Design of Existing Code “, “MartinFowler1”)); listArr.Add(new ListItem(“Patterns of Enterprise Application Architecture “, “MartinFowler2”)); listArr.Add(new ListItem(“Domain-Specific Languages”, “DSL”)); } else if (sAuthor== “UncleBob”) { listArr.Add(new ListItem(“Designing Object Oriented C++ Applications Using The Booch Method”, “UncleBob0”)); listArr.Add(new ListItem(“Agile Principles, Patterns, and Practices in C#”, “UncleBob1”)); listArr.Add(new ListItem(“Clean Code: A Handbook of Agile Software Craftsmanship”, “UncleBob2”)); listArr.Add(new ListItem(“The Clean Coder: A Code of Conduct for Professional Programmers”, “UncleBob3”)); } else if (sAuthor== “SteveMcConnell”) { listArr.Add(new ListItem(“Rapid Development Taming Wild Software Schedules”, “SteveMcConnell0”)); listArr.Add(new ListItem(“Software Project Survival Guide Pro Best Practices”, “SteveMcConnell1”)); listArr.Add(new ListItem(“Code Complete A Practical Handbook of Software Construction”, “SteveMcConnell2”)); listArr.Add(new ListItem(“Software Estimation Demystifying the Black Art”, “SteveMcConnell3”)); } return listArr; }

เอาละครับ form พร้อมแล้ว service แบบ page method ก็พร้อมแล้ว ขั้นต่อไปก็เติมกลไล jQuery AJAX ลงไป

เติมกลไก jQuery AJAX

1. เพิ่ม jQuery library เข้ามาใน web form

2. เปิด tag javascript ใส่ function ให้ document ready และใช้ jQuery selector ค้นหา ddlAuthor และ ddlBookList มาพักไว้ก่อน

ddlAuthor”);

var ddlBookList = $(“

ddlBookList”);

3. ผูก event change กับ function คือเมื่อผู้ใช้เลือก DropDownList ผู้แต่งและ value ไม่เท่ากับ [-] ให้ sendData ไปที่ server เพื่อดึงข้อมูลลูกเพื่อแสดง และในกรณีอื่นให้ซ้อน label และ DropDownList ของข้อมูลลูก

ddlAuthor.bind(‘change’, function (e) { if (ddlAuthor.val() != ‘[-]’) sendData(ddlAuthor.val()); else { $(“

lblBookList”).addClass(“hidden”);

ddlBookList.addClass(“hidden”); } });

4. เพิ่ม function sendData เพื่อเรียก service ดึงข้อมูลรายการย่อยโดยรับ parameter Author และจบ tag javascript

function sendData(sAuthor) { var loc = window.location.href; loc = (loc.substr(loc.length – 1, 1) == “/”) ? loc + “AjaxDropDownList.aspx” : loc; $.ajax({ type: “POST”, url: loc + “/GetBookList”, data: ‘{“sAuthor”:”‘ + sAuthor+ ‘”}’, contentType: “application/json; charset=utf-8”, dataType: “json”, success: function (msg) { $(“

lblBookList”).removeClass(“hidden”);

ddlBookList.removeClass(“hidden”); ddlBookList.empty().append($(“<option></option>”).val(“[-]”).html(“Please select”)); $.each(msg.d, function () { ddlBookList.append($(“<option></option>”).val(this[‘Value’]).html(this[‘Text’])); }); }, error: function () { alert(“เกิดข้อผิดพลาดในระหว่างการเรียก service “); } }); } }); </script>

สำหรับคำอธิบาย request service แบบ AJAXจะเหมื่อนกับบทความ ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Page Method ผมจะไม่อธิบายซ้ำ ครับก็ขอจบบทความเพียงเท่านี้

ขอบคุณครับ 🙂

asp-net,

javascript,

jquery

สวัสดีครับ

กลับมาต่อกันกับการประยุกต์ใช้ jQuery AJAX เพื่อเรียก logic ที่ประกาศ contract แบบ web services ครับ ซึ่งผลลัพย์จะเป็นแบบเดียวกับบทความ ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Page Method

เรามาเริ่มทำกันเลยดีกว่า

1. load Source Code นี้เพื่อเอามาทำต่อได้เลย หลังจาก load มาแล้วแตก file ออกมา เปิด projects ด้วย Visual Studio 2010 ครับ

2. เพิ่ม web services UserNameWS.asmx เข้าไปใน projects นี้ ดูภาพข้างล่างครับ

3. เพื่อเปิดให้สามารถเรียก web services โดยใช้ AJAX ได้ให้เพิ่ม atribute นี้เข้าไปที่ class UserNameWS ซึ่งมันอยู่ใน code-behide ของ UserNameWS.asmx

[System.Web.Script.Services.ScriptService]

4. เพิ่ม web method เพื่อ validate user name ง่ายๆตามข้างล้างนี้เข้าไป

[WebMethod] public bool CheckUserName(string sUserName) { List<string> UserNameList = new List<string>(new string[] { “testid01”, “testid02”, “testid03” }); return UserNameList.Contains(sUserName); ; }

5. เพิ่ม Web Form ใหม่ โดย Add New Item > Web Form เข้าไปใน projects ตั้งชื่อว่า AjaxWebServices.aspx

6. เพิ่ม TextBox และ Button control เข้าไปใน form ตามนี้

จากขั้นตอนข้างต้น สรุปว่าผมสร้าง web services method และเปิดให้สามารถเรียกแบบ AJAX ได้ และสร้าง web form ไว้สำหรับเรียก web services ไว้ลำดับต่อไป ผมจะเพิ่มกลไก jQuery AJAX เพื่อเรียก web services

เติมกลไก AJAX อีกเล็กน้อย

1. ใน jQuery script block ของ function document.ready() ให้ประกาศ event handler สำหรับ click event ของ button control

$(“

btnSubmit”).click(function(e) {

2. ให้หยุดการ submit form เพราะเราต้องการใช้กลไก AJAX ของเราแทน

e.preventDefault();

3. สรวจสอบถ้า TextBox มีค่าว่างและให้ alert บอกผู้ใช้

if ($(“

txtUserName”).val() == ”)

alert(“Please enter the UserName”);

4. ถ้า TextBox นี้มีค่าให้เรียก function sendData() และเอาข้อมูลจาก TextBox ใส่เข้าไปใน function ด้วย

else sendData($(“

txtUserName”).val());

});

5. มาถึงขั้นนี้ให้ประกาศ function sendData โดยให้รับ parameter เป็น string UserName

function sendData(sUserName) {

6. เรียก .ajax() method

$.ajax({

7. กำหนด option เป็นแบบ POST method

type: “POST”,

8. กำหนด option URL ของ web services เพื่อ request แบบ AJAX

url: “UserNameWS.asmx/CheckUserName”,

9. กำหนด option pass parameter เพื่อเรียก web services CheckUserName ในแบบ JSON format

data: ‘{“sUserName”:”‘ + sUserName + ‘”}’,

10. กำหนด option content type ของ request/response

contentType: “application/json; charset=utf-8”,

11. กำหนด option dataType เป็นแบบ JSON format

dataType: “json”,

12. ประกาศ callback function เมื่อเราเรียก web services AJAX ที่ สำเร็จแล้ว(success)

success: function (msg) { if (msg.d) alert(“ชื่อผู้ใช้นี้มีในระบบน๊ะ”); else alert(“ชื่อผู้ใช้นี้ไม่มีในระบบอะ!”); },

13. ประกาศ callback function เมื่อเราเรียก web services AJAX แล้วมีข้อผิดพลาดเกิดขึ้น(error)

error: function () { alert(“มี error บางอย่างเกิดขึ้น”); } }); } });

สรุป jQuery ทั้งหมดจากขั้นตอนข้างต้นได้แบบนี้

btnSubmit”).click(function (e) {

e.preventDefault(); if ($(“

txtUserName”).val() == ”)

alert(“กรุณากรอกชื่อผู้ใช้”); else sendData($(“

txtUserName”).val());

});

}); </script>

จบแล้วครับ ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Web Services

ขอบคุณครับ 🙂

asp-net,

javascript,

jquery

สวัสดีครับ

ถ้าจะกล่าวถึงวิธีการเพื่อที่จะติดต่อสื่อสารกับ ASP.NET code-behind ที่เป็น logic ด้าน server โดยการ raise event บน web page จากด้าน client ด้วย jQuery นั้นจะมีอยู่ 2 หนทางก็คือ

แบบใช้ page method ซึ่งผมจะกล่าวในบทความนี้ มันคือการประกาศ method ไว้ใน code-behide ของ web page นี้ตรงๆเลย
แบบใช้ web services ก็คือจะแยก method นี้โดยประกาศไว้แบบ web services โดยเรียกไปที่ file *.asmx ซึ่งมันจะมี code-behide ที่เป็น service contract

เอาละครับเรามาเริ่มทำกันดีกว่า โดยผมจะแสดงผลที่ทำสำเร็จแล้วให้ดูก่อน มันก็คือ web application ง่ายๆที่ทำงานตรวจสอบว่า username ที่ใส่เข้ามาใน textbox นี้มีอยู่ในระบบหรือไม่ โดยการกดปุ่มเพื่อ raise event

ผลลัพย์ที่เสร็จแล้ว

อธิบายรูปด้านบน

1. กรอกอะไรก็ได้เข้าไปใน textbox

2. กดปุ่ม ตรวจสอบชื่อผู้ใช้ ก็จะขึ้น popup ข้อความว่า ชื่อผู้ใช้นี้ไม่มีในระบบอะ!

3. ทีนี้กรอก testid01 เข้าไปใน textbox อีกที

4. กดปุ่ม ตรวจสอบชื่อผู้ใช้ ก็จะขึ้น popup ข้อความว่า ชื่อผู้ใช้นี้มีในระบบน๊ะ

หลักจากดูว่ามันทำอะไรแล้ว ต่อไปเราก็มาลงมือทำมันกันเลย

เหตุที่มาของผลลัพย์ที่เสร็จแล้ว

1. load SourceCode นี้แล้วเปิด web projects นี้ขึ้นมา เพิ่ม Web Form ใหม่ โดย Add New Item > Web Form เข้าไปใน projects ตั้งชื่อว่า AjaxPageMethod.aspx

2. ใน code-behide ของ Web Form AjaxPageMethod.aspx ให้เพิ่ม namespace System.Web.Services เข้ามา

using System.Web.Services;

3. หลังจากนั้นประกาศ object เป็น string list ของ User Name เพื่อไว้เก็บ user name สำหรับ logic ตรวจสอบ

public static List<string> UserNameList = null;

4. เพิ่ม code ที่ทำงานเพิ่ม User Name เข้าไปใน object UserNameList ใน Page_Load เพื่อเป็นตัวอย่างที่ valid ในระบบง่ายๆลงไป สักสอง สามชื่อ

protected void Page_Load(object sender, EventArgs e) { UserNameList = new List<string>(new string[] { “testid01”, “testid02”, “testid03” }); }

5. เขียน page method ที่เป็น logic ทำงานตรวสอบ user name ตามนี้

[WebMethod()] public static bool CheckUserName(string sUserName) { return UserNameList.Contains(sUserName); }

6. กลับมาที่ file web form AjaxPageMethod.aspx เพิ่มหน้าตาของ UI แบบผลลัพย์ที่เสร็จแล้วลงไป

7. เพิ่ม jQuery library javascript เข้ามาที่ web form นี้

8. ใน jQuery script block ของ function document.ready() ให้ประกาศ event handler สำหรับ click event ของ button control

$(function () { $(“

btnSubmit”).click(function (e) {

9. ให้หยุดการ submit form เพราะเราต้องการใช้กลไก AJAX ของเราแทน

e.preventDefault();

10. สรวจสอบถ้า TextBox มีค่าว่างและให้ alert บอกผู้ใช้

if ($(“

txtUserName”).val() == ”)

alert(“กรุณากรอกชื่อผู้ใช้”);

11. ถ้า TextBox นี้มีค่าให้เรียก function sendData() และเอาข้อมูลจาก TextBox ใส่เข้าไปใน function ด้วย

else sendData($(“

txtUserName”).val());

});

12. มาถึงขั้นนี้ให้ประกาศ function sendData โดยให้รับ parameter เป็น string UserName

function sendData(sUserName) {

13. เอา base path ของ page นี้

var loc = window.location.href; loc = (loc.substr(loc.length – 1, 1) == “/”) ? loc + “Recipe3.aspx” : loc;

14. เรียก .ajax() method

$.ajax({

15. กำหนด option เป็นแบบ POST method

type: “POST”,

16. กำหนด option URL ของ page method ให้สมบูรณ์ เพื่อที่จะส่ง request

url: loc + “/CheckUserName”,

17. กำหนด option pass parameter เพื่อเรียก page method CheckUserName ในแบบ JSON format

data: ‘{“sUserName”:”‘ + sUserName + ‘”}’,

18. กำหนด option content type ของ request/response

contentType: “application/json; charset=utf-8”,

19. กำหนด option dataType เป็นแบบ JSON format

dataType: “json”,

20. ประกาศ callback function เมื่อเราเรียก page method AJAX ที่สำเร็จแล้ว(success)

21. ประกาศ callback function เมื่อเราเรียก page method AJAX แล้วมีข้อผิดพลาดเกิดขึ้น(error)

error: function () { alert(“มี error บางอย่างเกิดขึ้น”); } }); } });

OK เสร็จแล้วครับสำหรับ javascript เรียก page method แบบ AJAX โดยใช้ jQuery สรุป code ที่สมบูรณ์สำหรับกลไกทำงานนี้อีกทีครับ

btnSubmit”).click(function (e) {

e.preventDefault(); if ($(“

txtUserName”).val() == ”)

alert(“กรุณากรอกชื่อผู้ใช้”); else sendData($(“

txtUserName”).val());

});

}); </script>

ผมขอจบบทความ ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Page Method เพียงเท่านี้ครับ

ขอบคุณครับ 🙂

“การออกมาทำงาน ก็คือการออกมาใช้ชีวิต”

— สรยุทธ สุทัศนะจินดา —

asp-net,

javascript,

jquery

สวัสดีครับมาพบกับวีธีที่ช่วยให้คุณตรวจดู HTTP request/response เมื่อเราใช้วิธีการ AJAX โดย Mozilla Firefox browser ได้จัดเตรียมเครื่องมือ add-on พัฒนา web ที่เรียกว่า Firebug ไว้แล้วเพื่อช่วยให้นักพัฒนาสามารถตรวจสอบ log javascript หรือ AJAX request/response การสื่อสารว่าเกิดอะไรกับ client page บน browser ของเรานี้บ้าง

มาเริ่มทำตามผมกันเลยดีกว่าครับ

1. เปิด Firefox แล้วติดตั้ง Firebug โดยไปที่ //getfirebug.com/.

2. down load SourceCode จาก SourceCode เพื่อนำมาทำต่อ

3. เปิด projects ขึ้นมาแล้ว run page ด้วย Firebug ครับ จะขึ้นหน้าจอดังข้างล่างนี้ แล้วกดไปที่ icon รูปแมลง ตามภาพ

4. กดที่ปุ่ม กดเลยเซ่ ครับ จะแสดงตามภาพ

5. จะสังเกตุว่าที่ console ของ Firebug จะแสดงข้อความที่อยู่ใน code javascript ที่อยู่ใน page เป็นคำสั่งเพื่อแสดงข้อความ ซึ่งผมตัดส่วนสำคัญนี้มาให้ดู ดังนี้ครับ

beforeSend: function () { console.log(‘log นี้เกิดใน Ajax beforeSend’); }, complete: function () { console.log(‘log นี้เกิดใน Ajax complete’); }

6. เอาละครับ เพื่อให้แสดงข้อความได้หลากหลายขึ้น ผมจะแสดงด้วยตัวอย่าง javascript ง่ายๆละกัน โดยให้คุณใส่ code javascript นี้เพิ่มเข้าไปใน page ที่ function complete คล้ายๆแบบนี้เลยครับ

complete: function () { console.log(‘log นี้เกิดใน Ajax complete function – Log Message’); console.debug(‘log นี้เกิดใน Ajax complete function – Debug Message’); console.error(‘log นี้เกิดใน Ajax complete function – Error Message’); console.info(‘log นี้เกิดใน Ajax complete function – Info Message’); console.warn(‘log นี้เกิดใน Ajax complete function – Warning Message’); }

7. เปิด page ขึ้นมาใหม่แล้วกดปุ่ม กดเลยเซ่ จะแสดงตามหน้าจอข้างล่างนี้

เป็นไงครับที่ console ของ Firebug แสดงข้อความพร้อม icon ตามความหมายของ log แล้ว ลอง click Firebug ไปดูที่ tab อื่นกันบ้างดีกว่า โดย click ไปที่ Net>XHR>Response คุณจะเห็น content ของ HTML page ที่ผมได้เขียนเตรียมไว้ให้ AJAX เพื่อ get มาแล้วครับ ดังภาพนี้

เสร็จแล้วครับ การ log บน AJAX ด้วย Firebug

ขอบคุณครับ 🙂

asp-net,

javascript,

jquery

สวัสดีครับ ชุดบทความของ ASP.NET กับ jQuery: กลไก AJAX(Asynchronous JavaScript and XML) โดยผมจะนำเสนอหัวข้อต่างๆ ดังต่อไปนี้

ASP.NET กับ jQuery: การตั้งค่า jQuery AJAX กับ ASP.NET (อธิบายในบทความนี้แล้ว)
ASP.NET กับ jQuery: ใช้ Firebug เพื่อดูการ request/response ของ AJAX
ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Page Method
ASP.NET กับ jQuery: ประยุกต์ใช้ AJAX เรียก Web Services
ASP.NET กับ jQuery: การใช้ AJAX เพื่อแสดงข้อมูล ASP.NET DropDownList
ASP.NET กับ jQuery: สร้าง Auto Complete Search Box

แนะนำให้รู้จัก AJAX กันเล็กๆน้อยๆก่อน

AJAX อธิบายง่ายๆมันก็คือกลไกการติดต่อสื่อสารกันระหว่าง client กับ server แบบ Asynchronous หรือเว้ากันซื่อๆก็คือ ผม(client)สั่งงานคุณ(server)ไปแล้วโดยไม่รอคุณทำงานจนเสร็จ แต่ผมจะไปทำงานอย่างอื่นต่อ แล้วเมื่อคุณทำงานเสร็จเมื่อไรแล้ว ค่อยตอบผมกลับมาตรงนี้(callback method)ก็แล้วกัน และด้วยกลไกแบบนี้นี่เอง จึงทำให้ web page ที่มีการประยุกต์ใช้กลไกติดต่อสื่อสารด้วย AJAX แล้วไม่จำเป็นต้อง refresh page หรือ submit post form ทั้งหมดอีกต่อไป ซึ่งจะส่งผลให้ web application ของเราจะดูหรู่หรา และประหยัดข้อมูลที่ต้องส่งไปยัง server ขึ้นมาอีกเยอะเลยทิเดียว

เรามาเริ่มตัวอย่างแรกกันเลยดิกว่า

ตัวอย่างนี้ผมจะแสดงวิธีการ setup jQuery AJAX ใน web page ของ ASP.NET โดยจะใช้ AJAX เรียก html content page ง่ายๆมาแทนที่พื้นที่ของปุ่มเมื่อมีการกดปุ่ม ดูภาพข้างล่าง

ก่อนจะเริ่มแสดงให้คุณดู ผมจะบอกว่าผมใช้ Firebug แสดง web page และ Visual Studio 2010 เป็นเครื่องมือพัฒนา web application เอาละ มาเริ่มทำตามผมดังนี้

1. สร้าง new web projects ในแบบ ASP.NET Empaty Web Application ตั้งชื่อว่า AjaxWeb

2. เพิ่ม web page เปล่าๆเข้าไป 1 page ใช้ชื่อเดิมๆมันไปเลยว่า Default.aspx ได้แล้วก็ เพิ่มพื้นที่(contentArea)เพื่อใช้แสดง content และเพิ่มปุ่ม(btnSubmit)เข้าไปในพื้นที่นี้ จะได้ไว้กดเพื่อให้กลไล request แบบ AJAX มันทำงาน

3. เพิ่ม page html ธรรมดาๆชื่อว่า Content.htm และเติม content ตัวอย่างนี้ลงไป

<body> <p> <table cellpadding=”3″ cellspacing=”3″ id=”box-table-a”> <tr><td>Title</td><td>Author</td><td>Genre</td></tr> <tr><td>Test Driven Development: By Example </td><td>Kent Beck</td><td>Science</td></tr> <tr><td>Planning Extreme Programming </td><td>Kent Beck</td><td>Science</td></tr> <tr><td>Domain-Specific Languages </td><td>Martin Fowler</td><td>Science</td></tr> <tr><td>Analysis Patterns: Reusable Object Models</td><td>Martin Fowler</td><td>Science</td></tr> </table> </p> </body>

เติมกลไก jQuery AJAX

1. setup jQuery โดยใช้ NuGet จาก //nuget.org/List/Packages/jQuery เมื่อติดตั้งแล้วเปิด NuGet Package Manager Console แล้วพิมพ์คำสั่งนี้ PM> Install-Package jQuery

2. include jquery เข้ามาใน ASP.NET page (ผมแนะนำให้คุณใส่ javascript ไว้ที่ด้านล่างสุดของ page ตามคำแนะนำที่ดีจากตรงนี้ Put Scripts at the Bottom)

3. ใน script block jQuery function ของ document.ready() เรียก method ajaxSetup() เพื่อกำหนดค่า default properties ทั้งหมดของ Ajax

$.ajaxSetup({

4. ปิด cache โดยกำหนดให้เป็น false cache: false,

5. กำหนดชนิดของการสื่อสารข้อมูลเป็น html dataType: “html”,

6. กำหนด callback function เมื่อเกิด error จากการคิดต่อสื่อสารด้วย Ajax ไปยัง server ให้ alert ข้อความ error: function (xhr, status, error) { alert(‘มี error เกิดขึ้น: ‘ + error); },

7. กำหนด timeout 30 วินาที คือเมื่อ client เรียกร้องบริการไปยัง server มันจะรอผมกลับมาแบบ asynchronous ไม่เกินเวลา 30 วินาที timeout: 30000, //กำหนด Timeout เท่ากับ 30 วินาที

8. กำหนดชนิดของ HTTP request เป็นแบบ GET type: “GET”,

9. กำหนด callback function HTTP request ก่อนส่ง และเมื่อสำเร็จแล้ว โดยแค่ log ไว้เฉยๆ beforeSend: function () { console.log(‘log นี้เกิดใน Ajax beforeSend’); }, complete: function () { console.log(‘log นี้เกิดใน Ajax complete’); } });

เสร็จขั้นตอนการ set default properties ของ jQuery Ajax ละครับ ต่อไปใส่กลไล Ajax ให้กับปุ่ม btnSubmit กันต่อเลย

10. ใช้ jQuery selector กำหนด หรือ bind function กับ event click

$(“

btnSubmit”).click(function (e) {

11. หยุดกลไกปกติของการกดปุ่ม submit ซึ่งโดยปกติ(default) แล้วมันจะ post form ซึ่งเราไม่ต้องการกลไกแบบนั้น เราต้องการส่งแบบกลไก AJAX e.preventDefault();

12. เรียก method ajax เพื่อส่ง HTTP request GET content page Content.htm ที่เราได้เตรียมไว้ พร้อมกับกำหนด callback function success โดยแทน content ที่ได้ไปที่ contentArea ที่ได้เตรียมไว้แล้วข้างต้น $.ajax({ url: “Content.htm”, success: function (data) { $(“

contentArea”).html(“”).append(data);

} }); });

สรุปว่าผมจะมี กลไก jQuery setup AJAX และ ผูก function เรียก AJAX ไว้กับ event click ของปุ่ม กดเลยเซ่ ได้ตามนี้

$(“

btnSubmit”).click(function (e) {

e.preventDefault(); $.ajax({ url: “Content.htm”, success: function (data) { $(“

contentArea”).html(“”).append(data);

} }); }); }); </script>

OK เสร็จแล้วกับวิธีเติมกลไก AJAX ด้วย jQuery ง่ายๆเพียงเท่านี้ web page ของคุณก็ไม่จำเป็นต้อง refresh page อีกต่อไป แล้วค่อยๆติดตาม บทความในชุด ASP.NET กับ jQuery: กลไก AJAX นี้ในลำดับต่อไปครับ

SourceCode

ขอบคุณครับ 🙂

asp-net,

javascript,

jquery

เกริ่นนำ

สวัสสดีครับ บทความนี้ก็เป็นบทความสุดท้าย ที่เกี่ยวกับ ASP.NET GridView กับ jQuery แล้วครับ ก็จะนำเสนอวิธีดึงข้อมูล(content)มาจาก cell ใน gridview ตอน click ที่ cell ครับ

ผลลัพย์ที่เสร็จแล้ว

เหตุผลที่มา

1. download GridView เพื่อมาเติมกลไกต่อจาก SourceCode

2. ใส่ CSS highlight เมื่อ click บน cell และ เปลี่ยน cursor ของ mouse ตอนชี้ที่ cell

.highlight { background-color:

9999FF;

} td { cursor:pointer;}

3. เพิ่ม div message เพื่อแสดงข้อมูลของ cell บน form

4. ใส่กลไก jQuery ใน code javascript block ไปตามขั้นตอน ดังนี้

4.1 เริ่มต้นใช้ jQuery selector row(tr) ของ GridView แล้วใช้ function filter ใส่ query string เพื่อไม่เอา row ที่เป็น header และ bind function กับ event click

$(“#<%=GridView1.ClientID%> tr”).filter(“:not(:has(table, th))”).click(function (e) {

4.2 ค้นหา cell เป้าหมายที่ถูก click อยู่

var $cell = $(e.target).closest(“td”);

4.3 เอา highlight ออกทุกๆ cell ใน GridView แล้วกำหนดให้ cell ที่ได้จาก 4.2

$(“#<%=GridView1.ClientID%> td”).removeClass(“highlight”); $cell.addClass(“highlight”);

4.4 แสดงข้อความของ cell ที่ message ก็เป็นอันจบ function ของ event click

$(“

message”).text(‘คุณได้เลือก: ‘ + $cell.text());

});

สรุป code กลไกที่เสร็จสมบูรณ์แล้ว ได้แบบนี้

message”).text(‘คุณได้เลือก: ‘ + $cell.text());

}); }); </script>

ขอบคุณครับ 🙂

asp-net,

javascript,

jquery

เกริ่นนำ

บทความนี้ผมจะแสดงวิธีเปลี่ยนรูปแบบของ cursor ที่ชี้บน row ของ GridView โดยจะสลับรูปแบบของ cursor ไปมาระหว่าง row คู่(even) กับ row คี่(odd)

ผลลัพย์ที่เสร็จแล้ว

เหตุผลที่มา

1. download GridView เพื่อมาเติมกลไกต่อจาก SourceCode

2. ใส่กลไก jQuery ใน code javascript block ไปตามขั้นตอน ดังนี้

2.1 ใน document.ready() function (หรือ $(function ()) ) ของ jQuery script block ใช้ jQuery selector สืบค้น row ของ GridView1 แล้ว filter เอาเฉพาะ row คู่เท่านั้น เพื่อผูก(bind) event mouseover ด้วย function ที่กำหนด cursor ในรูปแบบ pointer(เป็นรูป icon นิ้วมือชี้ ดูรูป ผลลัพย์ที่เสร็จแล้ว )

$(function () { $(“#<%=GridView1.ClientID%> tr”).filter(“:even”).bind(“mouseover”, function () { $(this).css(“cursor”, “pointer”); });

2.2 บรรทัดต่อมา ให้ ใช้ jQuery selector เหมือนข้อ 2.1 แต่ให้ผูก(bind) event mouseover ด้วย function ที่กำหนด cursor ในรูปแบบ pointer(เป็นรูป icon load กลมๆดูรูป ผลลัพย์ที่เสร็จแล้ว ) และเมื่อจบ function นี้แล้วให้ปิด scope ของ ready function ครับ $(“#<%=GridView1.ClientID%> tr”).filter(“:odd”).bind(“mouseover”, function () { $(this).css(“cursor”, “wait”); }); });

สรุป code กลไกที่เสร็จสมบูรณ์แล้ว ได้แบบนี้

เสร็จแล้วครับ การเปลี่ยนรูปแบบของ cursor เมื่อมีการชี้ mouse ไปที่ row ของ GridView

ขอบคุณครับ 😉

จริงๆแล้วรูปแบบที่ซับซ้อนนั้น ประกอบมาจากรูปแบบที่เรียบง่ายหลายๆชิ้น

แต่ที่เรายังคงคิดว่ารูปแบบมันซับซ้อนเกินกว่าจะเข้าใจได้ มันเป็นเพราะว่่า

เราไม่เคยพยายามทำความเข้าใจรูปแบบที่เรียบง่ายนั้นก่อน รูปแบบที่ซับซ้อน

Chav:P

asp-net,

javascript,

jquery

เกริ่นนำ …

บทความนี้ผมจะแสดงการ drag/drop ย้าย row ใน GridView โดยใช้ jQuery plugin ซึ่งทำให้เราสามารถสร้างงานแบบ drag/drop ได้ง่ายมากขึ้นอีกเยอะ

เริ่มต้นสร้าง GridView Control …

1. ให้ดูที่บทความนี้ ASP.NET กับ jQuery: การทำงานกับ GridView Control เริ่มต้น เพื่อสร้าง GridView พร้อม รายการข้อมูลตัวอย่าง หรือ download base SourceCode มาทำต่อเลยก็ได้ครับ

2. ไป download plugin jQuery ทำ drag/drop ได้จากที่ //www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

more-79 หลังจาก load มาเสร็จแล้ว include เข้ามาใน web page

ใส่กลไก jQuery remove row …

1. ใน script block jQuery function ของ document.ready() ใช้ jQuery selector GridView1 แล้วเรียก function tableDnD()

$(“#<%=GridView1.ClientID %>”).tableDnD();

สรุปกลไก jQuery ที่เสร็จแล้ว

ทดสอบ drag/drop …

ทดลอง click mouse ขวาค้างไว้ แล้วเลื่่อนไปยังตำแหน่งที่ต้องการบน grid แล้ว ปล่อย ตามภาพ

เสร็จแล้วครับกับ drag/drop บน row ของ GridView ง่ายมากๆเลยใช่มั้ยครับ

SourceCode

ขอบคุณครับ 😉

Code มันบอกทุกอย่างไว้หมดแล้ว

ทั้ง Design และ Algorithm มีอยู่ใน Code ที่เดียวเท่านั้น

— Chav:P —

asp-net,

javascript,

jquery

เตรียมตัวกันก่อน

บทความนี้ผมจะนำเสนอวิธีการติดต่อสื่อสารกับ database server ด้วย Fluent NHibernate ใน application web ที่พัฒนาด้วย ASP.NET MVC สิ่งที่จำเป็นมากก่อนที่คุณจะทำตามบทความนี้ได้ คุณจะต้องอ่านบทความ

สร้าง mapping fluently Domain Model ด้วย Fluent NHibernate… Actions! นี้ซะก่อน แล้วทำการปฏิบัติตามขั้นตอน จนกระทั้งทดสอบผ่านแล้ว คุณจึงจะสามารถทำตามบทความนี้ได้สมบูรณ์ ส่วนเนื้อหาเบื้องต้นของ ASP.NET MVC อ่านได้จากบทความ ASP.NET MVC 3: แนะนำให้รู้จัก หลังจากที่คุณอ่านบทความเรื่อง Fluent NHibernate แล้วคุณก็จะมี domain model พร้อมกับ mapping fluently class ตามภาพข้างล่างนี้ไว้พร้อมแล้วนะครับ

ลำดับต่อไปคุณต้องแน่ใจว่ามี database server ติดตั้งอยู่ในเครื่องของคุณแล้ว ของผมใช้ PostgreSQL ครับ เมื่อเปิดมาแล้วคุณจะต้องมีฐานข้อมูล enterprise พร้อมกับ table Product เตรียมไว้เรียบร้อยแล้ว ตามภาพ

เอาละเมื่อคุณพร้อมแล้ว ผมจะเริ่มเลยละกัน

Actions!

เริ่มต้นสร้าง ASP.NET 3 Web Application

1. เปิด Visual Studio 2010 เลือก New Projects > Web > ASP.NET 3 Web Application ตั้งชื่อว่า MyEnterpriseApplication ตามภาพครับ

2. ที่หน้าจอที่ 2 ให้ click เลือก Empaty , View Engine เป็น Razor, check HTML5 หลังจากนั้นกด OK

ตอนนี้เราก็มี project wep แล้วขั้นต่อมาเราจะต้อง add library ทุกสิ่งอย่างที่จำเป็นเข้ามาที่ projects

Add All Library

1. ไปที่ menu > Tools > Library Packege Manager > Package Manager Console ตามภาพ (ขั้นต้อนนี้ผมลืมบอกคุณ โดยปกติเครื่องคุณจะไม่มี เครื่องมือนี้อยู่ ให้ไป downlaod แล้ว install มันก่อนได้จาก //nuget.codeplex.com/)

2. มันจะ show console ที่มี shell PK> ขึ้นมา ให้พิมพ์ Install-Package FluentNHibernate ลงไป กด enter รอจนกระทั้งมัน load เสร็จครับ

Successfully installed ‘Iesi.Collections 3.1.0.4000’. Successfully installed ‘NHibernate 3.1.0.4000’. Successfully installed ‘Castle.Core 2.5.2’. Successfully installed ‘NHibernate.Castle 3.1.0.4000’. Successfully installed ‘FluentNHibernate 1.2.0.712’. Successfully added ‘Iesi.Collections 3.1.0.4000’ to MyEnterpriseApplication. Successfully added ‘NHibernate 3.1.0.4000’ to MyEnterpriseApplication. Successfully added ‘Castle.Core 2.5.2’ to MyEnterpriseApplication. Successfully added ‘NHibernate.Castle 3.1.0.4000’ to MyEnterpriseApplication. Successfully added ‘FluentNHibernate 1.2.0.712’ to MyEnterpriseApplication.

``3. add reference .Net Data Provider for PostgreSQL เข้าไปครับโดยมันจะอยู่ที่ folder ประมาณนี้ครับ C:\Program Files (x86)\PostgreSQL\Npgsql\ms.net4.0\ ถ้าไม่มีให้ไปอ่านบทความ Fluent NHibernate ก่อนครับ

4. สุดท้ายเราก็เพิ่ม library Enterprise.Domains และ Infrastructure.Orm.FluentNHibernate ที่ทำไว้แล้วเข้ามาใน project สรุป project web ของคุณจะต้องมี references ตามภาพนี้

การ add references ทั้งหมดเรียบร้อยครับ ขั้นต่อไปก็ เริ่ม code กันเลย

เติม Code สร้าง App

ผมจะทำ application แสดงรายการหนังสือ ที่สามารถแก้ไข เพิ่มรายการหนังสือใหม่ และลบออกได้

1.ก่อนอื่นผมต้องการจัดการ session factory เพื่อให้ web application หน้าใดๆก็แล้วแต่ใช้ session factory เดียวกันทุกครั้งที่เกิด action เปิดไปที่ file Global.asax.cs แล้ว using library ต่างๆตามนี้เข้าไป

using FluentNHibernate.Cfg; using NHibernate.ByteCode.Castle; using FluentNHibernate.Cfg.Db; using Infrastructure.Orm.FluentNHibernate;

2. เพิ่ม propery SessionFactory ของ class MvcApplication และให้กำหนดได้จากตัวเองเท่านั้น(private)

public static ISessionFactory SessionFactory{ get; private set; }

3. ไปที่ method Application_Start ของ class MvcApplication เพิ่ม code fluently NHibernate configuration ไปยังฐานข้อมูล และ config mapping class ตามนี้

protected void Application_Start() { AreaRegistration.RegisterAllAreas();

RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoutes(RouteTable.Routes);

//fluently Nhibernate configuration ไปยังฐานข้อมูล และ config mapping class var nhConfig = Fluently.Configure() .ProxyFactoryFactory<ProxyFactoryFactory>() .Database(PostgreSQLConfiguration.Standard .ConnectionString(connstr => connstr .Host(“localhost”) .Port(5432) .Database(“enterprise”) .Username(“kading”) .Password(“1234”))) .Mappings(mappings => mappings.FluentMappings.AddFromAssemblyOf<ProductMapping>()) .BuildConfiguration() .SetProperty(“current_session_context_class”, “thread_static”);

SessionFactory = nhConfig.BuildSessionFactory();

}

4. ตอนนี้ผมได้ SessionFactory จากที่เดียวแล้ว ต่อมาเมื่อผมต้องการใช้ session ใน controller ที่ใดๆ ผมก็เพียงแต่เรียกได้จาก MvcApplication ของผมได้เลย แล้วตอนนี้ผมต้องการ persit domain model ไปยัง database ของผมใน action controller ใดๆโดยทุกครั้งที่เริ่ม action session จะถูกเปิด และหลังจากเสร็จ action แล้ว session จะต้องถูกปิดดดยอัตโนมัติ ผมจึงต้องเขียน ActionFilterAttribute แล้วระบุไว้ใน action ทุกครั้งที่ต้องการ persitance domain model ไปยัง database ดังนั้นเพิ่ม class NHibernateSessionAttribute ที่มี base เป็น ActionFilterAttribute ได้ดังนี้

//NHibernateSessionAttribute.cs

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false)] public class NHibernateSessionAttribute : ActionFilterAttribute { public NHibernateSessionAttribute() {

} protected ISessionFactory sessionFactory { get { return MvcApplication.SessionFactory; } } public override void OnActionExecuting(ActionExecutingContext filterContext) { var session = sessionFactory.OpenSession(); CurrentSessionContext.Bind(session); } public override void OnActionExecuted(ActionExecutedContext filterContext) { var session = CurrentSessionContext.Unbind(sessionFactory); session.Close(); } }

5. เพิ่มอีก attribute เพื่อสนับสนุนการ action ที่ต้องการควบคุม transaction เช่นการ edit, create และ delete

//NHibernateSessionAttribute.cs

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false)] public class NHibernateSessionAttribute : ActionFilterAttribute { public NHibernateSessionAttribute() {

6. เพิ่ม class BookController ไว้ที่ folder Controllers แบบ Empty controller ตามภาพ

7. เพิ่ม code action ใน BookController เพื่อทำงานต่างๆตามนี้ครับ

public class BookController : Controller { // // GET: /Book/ [NHibernateSession] public ActionResult Index() { //หน้าแรกให้แสดงรายการหนังสือทั้งหมด var session = MvcApplication.SessionFactory.GetCurrentSession(); var books = session.QueryOver<Book>().List(); return View(books); }

public ActionResult Create() { return View(); }

[HttpPost] [NeedsPersistenceAttribute] public ActionResult Create(Book newBook) { var session = MvcApplication.SessionFactory.GetCurrentSession(); session.Save(newBook); return RedirectToAction(“Index”); }

[NeedsPersistenceAttribute] public ActionResult Edit(int id) { var session = MvcApplication.SessionFactory.GetCurrentSession(); var book = session.QueryOver<Book>().Where(b => b.Id == id).SingleOrDefault(); UpdateModel(book); return View(book); }

[NeedsPersistenceAttribute] public ActionResult Delete(int id) { var session = MvcApplication.SessionFactory.GetCurrentSession(); var book = session.QueryOver<Book>().Where(b => b.Id == id).SingleOrDefault(); session.Delete(book); return RedirectToAction(“Index”); } }

8. สร้าง view โดย click ขวาที่ action Index แล้วเลือก options ต่างๆตามภาพข้างล่างนี้ครับ

9. ลอง run ดูผลครับแต่ก่อน run ให้เปลี่ยน MapRoute Default ที่ Global.asax.cs กันก่อน ให้เปลี่ยนจาก Home เป็น Book เท่านี้ แล้ว run web ขึ้นมาได้เลย

10. คราวนี้ลอง click ที่ Create New ครับ

11. จบกัน error ซะแล้ว อ่าน error ตัวแดงๆดูก็จะรู้ว่ามัน Create view ไม่เจอนั่นเอง ครับกลับไปที่ BookController แล้ว เลือก action Create click ขวา สร้าง view เลือก options ตามภาพครับ

12. OK ละลองใหม่ครับเปิดขึ้นมาหน้าแรก แล้ว click ที่ New Create

ลองกรอกข้อมูลลงไป แล้วกดปุ่ม Create ดูเลยจะแสดงหน้านี้

13. ต่อไปก็สร้างหน้า Edit เหมือนเดิมกลับไปที่ BookController click ขวาที่ action method Edit แล้วเลือก Opetions ตามภาพ

OK เสร็จแล้วครับ ผมฝากให้ทดสอบ function Edit และลองกด Delete ดูนะครับ

สุดท้ายผมคิดว่าที่แนะนำ ASP.NET MVC และ Fluent NHibernate เพราะมันเป็นคู่หูที่ ยอดเยี่ยมเลยทีเดียวสำหรับพัฒนา Web Application ที่มี Logic ที่มีความซับซ้อนมากๆอย่าง Business, ERP, Game หรือ Social Web Application แต่อาจจะไม่เหมาะสม และต้องใช้ความรู้มากไปกับ web ที่ต้องการแสดง Contents เฉยๆเท่านั้น

กระทู้ที่เกี่ยวข้อง

Toplist

โพสต์ล่าสุด

แท็ก

แปลภาษาไทย ไทยแปลอังกฤษ โปรแกรม-แปล-ภาษา-อังกฤษ พร้อม-คำ-อ่าน lmyour แปลภาษา ห่อหมกฮวกไปฝากป้าmv แปลภาษาอาหรับ-ไทย แปลภาษาอังกฤษเป็นไทย pantip แอพแปลภาษาอาหรับเป็นไทย ค้นหา ประวัติ นามสกุล ห่อหมกฮวกไปฝากป้า หนังเต็มเรื่อง ไทยแปลอังกฤษ ประโยค Terjemahan เมอร์ซี่ อาร์สยาม ล่าสุด แปลภาษาจีน กรมส่งเสริมการปกครองท้องถิ่น ่้แปลภาษา Google Translate ข้อสอบคณิตศาสตร์ พร้อมเฉลย พร บ ระเบียบบริหารราชการแผ่นดิน ระเบียบกระทรวงการคลังว่าด้วยการจัดซื้อจัดจ้างและการบริหารพัสดุภาครัฐ พ.ศ. 2560 วิธีใช้มิเตอร์วัดไฟดิจิตอล สหกรณ์ออมทรัพย์กรมส่งเสริมการปกครอง ส่วนท้องถิ่น ห่อหมกฮวก แปลว่า Bahasa Thailand Thailand translate mu-x มือสอง รถบ้าน การวัดกระแสไฟฟ้า ด้วย แอมมิเตอร์ การ์ดแคปเตอร์ซากุระ ภาค 4 ก่อนจะนิ่งก็ต้องกลิ้งมาก่อน เนื้อเพลง ก่อนจะนิ่งก็ต้องกลิ้งมาก่อน แคปชั่น พจนานุกรมศัพท์ทหาร ภูมิอากาศ มีอะไรบ้าง สถาบันพัฒนาบุคลากรท้องถิ่น อาจารย์ ตจต อเวนเจอร์ส ทั้งหมด เขียน อาหรับ แปลไทย ใบรับรอง กรมพัฒนาฝีมือแรงงาน Google map Spirited Away 2 spirited away ดูได้ที่ไหน tor คือ จัดซื้อจัดจ้าง กินยาคุมกี่วัน ถึง ปล่อยในได้ ธาตุทองซาวด์เนื้อเพลง บช.สอท.ตำรวจไซเบอร์ ล่าสุด บบบย มิติวิญญาณมหัศจรรย์ ตอนจบ รหัสจังหวัด อําเภอ ตําบล ศัพท์ทางทหาร military words สอบ O หยน