JavascriptLike coffee if coffee could read a script
(that would be coffeescript)
JavascriptClient side code
All the code we’ve seen so far runs on the server
Javascript is one way to run code on the client side You can avoid needing to do postbacks
Javascript runs on all major browsersYou can even write a Windows 8 app with it
JavacriptTons of libraries exist with new ones created/updated all
the timehttp://en.wikipedia.org/wiki/List_of_JavaScript_libraries
How to add it to a pageAdd this script tag to the header section of
your page:<script src="Content/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
If you plan on using this throughout your website, this would be something to put in a master page
How to use itAdd a script tag for javascripts
You can add it to the page or reference a separate .js file containing other javascripts
<script type="text/javascript"> alert("Hello world!");</script>
Accessing elementsHere’s our ASPX page:<div id="divContent" runat="server"> <div> <asp:Label ID="Label1" runat="server"
Text="Enter Some Text:"></asp:Label> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </div> <div> <asp:Button ID="Button1" runat="server"
Text="Do Stuff" /> </div></div>
Accessing ElementsIt Looks like this:
Accessing ElementsSuppose we want to show an alert when the
user clicks the buttonfunction showMessage() { var textbox = document.getElementById(
"TextBox1") alert(textbox.value);}
Why didn’t that work?Value is null???
Name ManglingASP.NET mangles control names. We have to
use the ClientIDThe actual name of this textbox is:
“ctl00$ContentPlaceHolder1$Button1“
<input type="submit" name="ctl00$ContentPlaceHolder1$Button1" value="Do Stuff" onclick="showMessage();" id="ContentPlaceHolder1_Button1" />
How to get the correct IDTwo ways:
Static Id This turns off the name mangling You now have to manage the ID’s yourself Very easy to end up with name conflicts
Use the Client Id Easy to use, but has a funny syntax
Static IdWe need to set the ClientIDMode of the
control<asp:TextBox ID="TextBox1" ClientIDMode="Static" runat="server"></asp:TextBox>
Static IDWhen the control renders, it will render
without mangling the name. The ID is Static – it will not change
<input name="ctl00$ContentPlaceHolder1$TextBox1" type="text" id="TextBox1" />
Static IdThe ID is static, but the name is still mangled
Our javascript will now work as is.
Accessing the ClientIDTo access the client ID, we need to change
our javascript
function showMessage() { var textbox = document.getElementById(
"<%=TextBox1.ClientID%>") alert(textbox.value);}
Accessing the ClientIDOur javascript will now render like this:
function showMessage() { var textbox = document.getElementById("ContentPlaceHolder1_TextBox1") alert(textbox.value);}
Accessing the ClientIDAnd it works:
jQueryWe’re going to focus on jQuery
Easy to useWidely acceptedDecent documentation
http://api.jquery.com/
Accessing ElementsjQuery uses a funny syntax for selecting
elements$(“#IdOfControl”)
function showMessageJquery() { var textbox = $("#" + "<%=TextBox1.ClientID%>"); alert(textbox.val());}
Accessing ElementsValue of a textbox is not .value in jquery
Most properties like this are accessed through methods
.val()More concise syntax to access values
Simple to useReturn value is a jQuery object
You now have access to other jquery methods
Show/HideAdjusts the visibility of an elementYou can change the appearance of the
document without needing a postbackAdjusts the display style
Show/Hide<div id="divShowHideContent"> <asp:Label ID="Label2" runat="server" Text="content 1"></asp:Label> <br /> <asp:Label ID="Label3" runat="server" Text="content 2"></asp:Label> <br /> <asp:Label ID="Label4" runat="server" Text="content 3"></asp:Label> <br /> <asp:Label ID="Label5" runat="server" Text="content 4"></asp:Label></div>
Show/Hidefunction showContent() { var content = $("#divShowHideContent"); content.show();}function hideContent() { var content = $("#divShowHideContent"); content.hide();}
Show/Hide
Show/Hide
Toggle()Same method to show/hide contentAll 3 of these methods can take arguments to
adjust the animationfunction toggleContent() { var content = $("#divShowHideContent"); content.toggle("Blind");}
Toggle()
Other EffectsThere are tons of thesePreviews online: http://jqueryui.com/
DatePicker()Dates are annoying to type by hand. jQueryUI has a pre-built date picker to make
this easierAssociate a textbox with a datepicker
DatePicker()This one is found in jQueryUI
In this case, we’re using a custom theme http://jqueryui.com/themeroller/
<link href="~/Styles/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css"runat="server" /><script src="../Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript“/>
DatePicker()$("#" + "<%=TextBox2.ClientID%>")
.datepicker();
DatePicker()
Modal PopupsThis is also found in jQueryUI
Shows content in a window
<div id="dialog" title="Basic dialog">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. </div>
Modal Popups$("#dialog").dialog();
Top Related