.NET Code Catto Blogger Blog: .NET 4 AJAX - Catto Code Crackin

Hey Now Everybody,

Microsoft announced the .NET 4.0 Beta Exams on St. Patrick’s day which are a free exam & if passed you get certified. Much of the study & prep materials are not available yet, therefore I’ve been studing for a similar exam 70-562 which is the .NET 3.5 ASP.NET Application Development. I hope by posting this content it will help myself along with other people in the community learn .NET 4.

The section I’m going to review for our third post in the series is going to be AJAX. JavaScript is very fun to code & it creates a rich user experience. Let’s start by looking at the official skills measured in detail for the Client-Side Scripting & AJAX:

Implementing Client-Side Scripting and AJAX (16%)

1 Add dynamic features to a page by using JavaScript.
This objective may include but is not limited to:
referencing client ID;
Script Manager;
Script combining;
Page.clientscript.registerclientscriptblock;
Page.clientscript.registerclientscriptinclude;
sys.require (scriptloader)
This objective does not include:
interacting with the server;
referencing JavaScript files;
inlining JavaScript
2 Alter a page dynamically by manipulating the DOM.
This objective may include but is not limited to:
using jQuery,
adding, modifying, or removing page elements,
adding effects,
jQuery selectors
This objective does not include: AJAX
3 Handle JavaScript events.
This objective may include but is not limited to:
DOM events,
custom events,
handling events by using jQuery
4 Implement ASP.NET AJAX.
This objective may include but is not limited to:
client-side templating,
creating a script service,
extenders (ASP.NET AJAX Control Toolkit),
interacting with the server,
Microsoft AJAX Client Library,
custom extenders;
multiple update panels;
triggers;
UpdatePanel.UpdateMode;
Timer
This objective does not include:
basic update panel and
progress
5. Implement AJAX by using jQuery.
This objective may include but is not limited to:
$.get,
$.post,
$.getJSON,
$.ajax,
xml,
html,
JavaScript Object Notation (JSON),
handling return types
This objective does not include: creating a service

Let’s continue with some more content from the book from the lesson summaries:

v AJAX communicates between code running on the client side & code running on the server.

v ASP.NET includes both a set of server controls for working with AJAX and a set of client-side JavaScript files called the MS AJAX library

v ScriptManager is required on all pages that work with AJAX extensions for ASP.NET It manages the JavaScript files sent to the client and the communication between the server & the client.

v The UpdatePanel control allows you to define an area within your page that can PostBack to the server & receive updates independent of the rest of the page.

v The UpdateProgress control is used to provide notice to the user that the page has initiated a call back to the server.

v The Timer control is used to periodically send a partial-page request updating an UpdatePanel to the server at timed intervals.

Lesson 2 summaries:

v You can define client script for a page using the Script tag. You can write JavaScript inside this tag or you can use it to point to a .js file.

v The ClientScriptManager is used to register client script dynamically from server side code. An instance of this class is accessible from the PageClientScript Property

v The ScriptManager control can also be used to register your own custom client scripts. This is useful if you are already using this control for partial page updates or to leverage the Microsoft AJAX library.

v The MS AJAX Library provides object-orientated support for building JavaScript code that extends the features of the client’s browser. This includes a set of base classes & a framework.

v There are typically 3 types of objects you can create for use with the MS AJAX library

o Components

o Controls

o Behaviors.

v You can wrap an AJAX client into a custom server control. To do this you implement the IScriptControl interface.

------------------- Question Key Points ------------------

Below are some key points made by the questions asked in the practice exam. The numbers are not important & I’m only using them as a little guide along with a way to separate each key point.

3 The UpdateProgress control provides status information about partial-page updates in UpdatePanel controls. You can customize the default content and the layout of the UpdateProgress control.

4 The ClientScriptManager.GetCallbackEventReference method obtains a reference to an automatically generated client function that, when invoked, initiates a client callback to a server event. Call the function returned by this method to invoke a callback. The automatically generated client function will invoke the actual request.

5 Define the JavaScript in an .aspx page that includes a ScriptManager control. The presence of a ScriptManager class will ensure that ASP.NET AJAX client libraries are available to your client code

6 You are implementing a Web page. You must configure the page and Web application to ensure that you can use the Sys.Services.AuthenticationService to verify credentials from the browser using JavaScript. ?

You must include a ScriptManager control to ensure that the Sys.Services.AuthenticationService is defined.
The application must use Forms authentication.

7 You are creating a custom ASP.NET server control that uses JavaScript functions to implement AJAX functionality for ASP.NET. You want to distribute the functions with the server control's assembly.

Put the JavaScript functions in a JavaScript (.js) file and embed the file into the assembly and apply the WebResourceAttribute attribute to the assembly to reference the resource.
Simply including a JavaScript (.js) file does not ensure it is included in the same assembly as the server control.

8 By using the complex JavaScript type generated by the ScriptManager class you can easily access complex type data members with no additional custom code.

9 Any ASP.NET page that includes an UpdatePanel control also requires a ScriptManager control. To use UpdatePanel controls with master pages, you can put a ScriptManager control on the master page. The ScriptManagerProxy class enables nested components such as content pages and user controls to add script and service references to pages when a ScriptManager control is already defined in a parent element. Include a ScriptManager on the master page and include the ScriptManagerProxy on the content page.

10 The RegisterClientScriptBlock method adds a script block to the top of the page. You create the script as a string, and then pass it to the method, which adds it to the page. You can use this method to insert any script into the page.

11 You are implementing a Web page. You must add a service that will allow you to verify credentials from the browser by using JavaScript. Credentials are stored as part of the ASP.NET membership service.

Add the following to the application's Web.config file:

<system.web.extensions>

<authenticationService enabled="true" />

</webServices>

</scripting>

</system.web.extensions>

Enable the built-in ASP.NET AJAX application service by adding the configuration values shown to the Web.config file.

12 To load the JavaScript code, add a script reference to the page's ScriptManager control. Set the script reference's assembly attribute to the assembly name and set the name attribute to the resource name.

13 Define triggers to indicate which control events will cause an UpdatePanel to render itself. By designating the DropDownList control as an AsyncPostBackTrigger and setting the trigger event name to SelectedIndexChanged, you can cause the UpdatePanel to refresh even if the DropDownList is not in the UpdatePanel.

14 The enableWebScript behavior sets the default data format for the service to JSON instead of XML.

15 The UpdatePanel class enables sections of a page to be partially rendered without a PostBack. Include the button in the UpdatePanel to trigger the partial refresh.

16 The ScriptManager control is used to make a proxy to the service accessible through JavaScript. Add a service reference to the ScriptManager as shown here:

<asp:ScriptManager ID="ScriptManager" runat="server">

<asp:ServiceReference Path="service.svc" />

</Services>

</asp:ScriptManager>

17 The EnablePartialRendering property enables or disables partial rendering of a page. Set this property to True to enable the update regions of the page individually by using UpdatePanel controls

19 Use the following markup:

<asp:button id="Button1" runat="server"

text="Button1" onClientClick="validateCallbackComplete();" />

Adding a client script onclick event to buttons requires a special procedure. Set the OnClientClick attribute to set the client-side script that executes when a Button control's Click event is raised.

20 The Sys.Services.RoleService class provides a client proxy class for the ASP.NET role service. Use this class in client-side code to test role membership.

21 The ScriptMethodAttribute attribute specifies which HTTP verb is used to invoke a method, and the format of the response. It defaults to the JSON format.

23 To ensure run time information is available dynamically, generate a string that gives the script. Call the RegisterOnSubmitStatement method of the ClientScriptManager to configure the script to execute on submit.

25 The Timer control enables you to perform PostBacks at a specified interval. When you use the Timer control as a trigger for an UpdatePanel control, the UpdatePanel control is updated by using an asynchronous, partial-page update. You use the Timer control to update an UpdatePanel control by including the timer inside the UpdatePanel control. Alternatively, you can place the timer outside the UpdatePanel control and set the timer as a trigger.

27 You are implementing an ASP.NET Web page. The page uses client script that is implemented in a JavaScript (.js) file named Contosolib.js. You must add markup to ensure that the page meets the following requirements.

* The page includes the JavaScript file functions when the page renders.

* The page supports partial rendering.

28 Register a new class you intend to use as an extension to a DOM element :
MyNamespace.MyClass.registerClass('MyNamespace.MyClass ', Sys.UI.Control);
You must derive from the Sys.UI.Control class to create an AJAX UI control.

30 An UpdateProgress control is used to display text or graphics during a partial-page update. The DisplayAfter attribute controls how long the page waits from the start of the request until it displays the progress indicator. If the request returns during this time, the progress indicator is not shown.

31 The Copy Web tool detects when a version of a file has been modified on the Web server after it is synchronized with the local copy of a file. Therefore, it can detect versioning conflicts when multiple developers work on a single site.

Whew! Let’s get to a little more fun section the Catto Code Cracker section, this is the section where we review code & how to really make it happen. Whoo Ha!

This is a nice little example that enters a record in a gridview & the page doesn’t postback.

Here is the ASPX file important lines:

<title>Ajax Example</title>

</head>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<div style="font-size: large;">Vendors</div>

<hr />

Name<br />

<asp:TextBox ID="TextBoxName" runat="server" Width="200"></asp:TextBox>

<br />

Location<br />

<asp:TextBox ID="TextBoxLocation" runat="server" Width="200"></asp:TextBox>

<br />

Contact Name<br />

<asp:TextBox ID="TextBoxContact" runat="server" Width="200"></asp:TextBox>

<br />

Contact Phone<br />

<asp:TextBox ID="TextBoxPhone" runat="server" Width="200"></asp:TextBox>

<br />

<asp:Button ID="ButtonEnter" runat="server" Text="Enter"

style="margin-top: 15px" onclick="ButtonEnter_Click" />

</div>

<asp:UpdatePanel ID="UpdatePanelVendors" runat="server">

<asp:AsyncPostBackTrigger ControlID="ButtonEnter" EventName="Click" />

</Triggers>

<asp:GridView ID="GridView1" runat="server" AllowPaging="True"

AutoGenerateColumns="False" DataKeyNames="id"

DataSourceID="SqlDataSourceVendors" Width="580px" Font-Size="Small"

CellPadding="4" ForeColor="#333333" GridLines="None">

<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False"

ReadOnly="True" SortExpression="id" />

<asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" />

<asp:BoundField DataField="location" HeaderText="Location"

SortExpression="location" />

<asp:BoundField DataField="contact_name" HeaderText="Contact Name"

SortExpression="contact_name" />

<asp:BoundField DataField="contact_phone" HeaderText="Contact Phone"

SortExpression="contact_phone" />

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSourceVendors" runat="server"

ConnectionString="<%$ ConnectionStrings:ConnectionStringVendors %>"

SelectCommand="SELECT [id], [name], [location], [contact_name], [contact_phone] FROM [vendor] Order by [name]">

</asp:SqlDataSource>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

Here is the important lines from the .CS code behind file:

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void ButtonEnter_Click(object sender, EventArgs e)

{

System.Configuration.Configuration webConfig =

System.Web.Configuration.WebConfigurationManager.

OpenWebConfiguration("/AjaxExample");

string cnnStr =

webConfig.ConnectionStrings.ConnectionStrings[

"ConnectionStringVendors"].ConnectionString;

SqlConnection cnn = new SqlConnection(cnnStr);

SqlCommand cmd = new SqlCommand("insert_vendor", cnn);

cmd.CommandType = CommandType.StoredProcedure;

SqlParameter pName = new SqlParameter("@name", SqlDbType.VarChar);

pName.Value = TextBoxName.Text;

cmd.Parameters.Add(pName);

SqlParameter pLocation = new SqlParameter("@location", SqlDbType.VarChar);

pLocation.Value = TextBoxLocation.Text;

cmd.Parameters.Add(pLocation);

SqlParameter pContactName = new SqlParameter("@contact_name",

SqlDbType.VarChar);

pContactName.Value = TextBoxContact.Text;

cmd.Parameters.Add(pContactName);

SqlParameter pContactPhone = new SqlParameter("@contact_phone",

SqlDbType.VarChar);

pContactPhone.Value = TextBoxPhone.Text;

cmd.Parameters.Add(pContactPhone);

cnn.Open();

cmd.ExecuteNonQuery();

//rebind the grid

GridView1.DataBind();

}

We’ve covered some the AJAX section by viewing the skills measured in the exam, the main points from the chapter in the book. Reviewed some key points from samples questions & reviewed some code. I’m ready to view some more code now & go onto the next section.

That’s all there is there will be more,

Catto

.NET Code Catto Blogger Blog

Saturday, March 20, 2010

.NET 4 AJAX - Catto Code Crackin - ASP.NET Web Dev Exam Prep

No comments: