70 515 client side ajax quiz

Upload: riley1987

Post on 02-Jun-2018

220 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/11/2019 70 515 client Side Ajax quiz

    1/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 1 (515P_3.1_01)

    __________________________________________________________________________________________________________

    You are developing an ASP.NET page that allows users to browse lists of data. When a user clicks a link to view the next page ofresults, you want the browser to perform a partial-page update and load only the results portion of the page.

    Which controls should you add to the page? (Each correct answer presents part of the solution. Choose two.)

    1. WebPartZone

    2. SiteMapPath

    3. >>UpdatePanel

    4. DynamicEntity

    5. DataPager

    6. >>ScriptManager

    Explanation:

    To update a portion of a webpage, place the partial page in an UpdatePanel control. The UpdatePanel control requires aScriptManager control on the page.

    The DataPager control facilitates paging data from a database.

    The SiteMapPath control is a navigational control to help users find their way around a website.

    The WebPartZone control allows you to use Web Parts on a webpage; it is not related to loading partial pages.

    The DynamicEntity control allows you to access entities at runtime.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Add dynamic features to a page by using JavaScript

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 2

    Partial-Page Rendering OverviewMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/bb386573.aspx

    ScriptManager ClassMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    2/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 2 (515P_3.1_02)

    __________________________________________________________________________________________________________

    You are developing an ASP.NET page that will display a JavaScript-based slideshow. To display the slideshow, you need to addthe /scripts/slideshow.js script to the page. You copy the script to the /scripts folder without adding it to the ASP.NET project. Youwant to display the slideshow on a content page that is based on a master page.

    Which approaches could you use to accomplish this goal? (Each correct answer presents a complete solution. Choose two.)

    1. In the Load event handler of the master page, call Page.ClientScript.RegisterClientScriptResource.

    2. Add to the ASPX source of the content page.

    3. >>In the Load event handler of the master page, call Page.ClientScript.RegisterClientScriptInclude.

    4. >>Add to the ASPX source of the content page.

    Explanation:You can load JavaScript files by adding a reference to the content page. You cannot use the markup to load aJavaScript file. You could also reference it from the master page, but that would cause it to be loaded on all pages that use the

    same master page. Alternatively, you can call the Page.ClientScript.RegisterClientScriptInclude method from the master page andprovide the URI of the JavaScript file.

    If you specify the JavaScript file by calling the Page.ClientScript.RegisterClientScriptResource method, you must add theJavaScript file to your ASP.NET project as a resource.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Add dynamic features to a page by using JavaScript

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 2

    ClientScriptManager ClassMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/0skaxdwf.aspx

    ClientScriptManager.RegisterClientScriptInclude Method (String, String)MSDN LibraryLink: http://msdn.microsoft.com/en-us/library/2552td66.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    3/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 3 (515P_3.1_03)

    __________________________________________________________________________________________________________

    You are developing an ASP.NET page. When a user right-clicks the page, a JavaScript script runs. You want to embed the scriptdirectly into the HTML that is sent to the browser in order to prevent the browser from making a separate request for the file. Youdynamically generate part of the script in the code-behind file.

    Which method should you call to dynamically add the script to the page?

    1. ClientScriptManager.RegisterStartupScript

    2. ClientScriptManager.RegisterClientScriptInclude

    3. ClientScriptManager.RegisterClientScriptResource

    4. >>ClientScriptManager.RegisterClientScriptBlock

    Explanation:You can add a JavaScript script to a page by calling the ClientScriptManager.RegisterClientScriptBlock method and providing thescript as a string.

    If you call the ClientScriptManager.RegisterStartupScript method, ASP.NET will configure the page to automatically run the scriptwhen the page loads.

    The ClientScriptManager.RegisterClientScriptInclude method adds a reference to a script so that the page loads it automaticallyfrom a separate file. It doesn't add the script to the page.

    The ClientScriptManager.RegisterClientScriptResource method adds a reference to a script that is included in the ASP.NETproject. It doesn't add the script to the page.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Add dynamic features to a page by using JavaScript

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 2

    ClientScriptManager ClassMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/0skaxdwf.aspx

    ClientScriptManager.RegisterClientScriptInclude Method (String, String)MSDN LibraryLink: http://msdn.microsoft.com/en-us/library/2552td66.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    4/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 4 (515P_3.1_04)

    __________________________________________________________________________________________________________

    You are troubleshooting an ASP.NET website. Individual webpages require from 5 to 20 scripts, which causes high page-loadtimes because of the time required to separately download each script. You need to optimize the performance of the webpages.

    Which actions should you take? (Each correct answer presents part of the solution. Choose two.)

    1. Call each required script by using the RegisterStartupScript method.

    2. Add a ClientScriptManager control.

    3. >>Add a ScriptManager control.

    4. Call each required script by using the RegisterClientScriptResource method.

    5. >>Add each required script to the CompositeScript property.

    Explanation:You can use ASP.NET to combine multiple scripts into a single script by adding a ScriptManager control to the page, and thenspecifying each script by using the ScriptManager.CompositeScript property. ASP.NET will then combine the scripts into a single

    script and send the script to the client using a single file transfer. Depending on the number of simultaneous requests the clientbrowser supports and the network latency, you can reduce load time by up to several seconds.

    The ClientScriptManager control allows you to add scripts or script references to a page.

    The ClientScriptManager.RegisterStartupScript method causes scripts to run automatically when the page loads, which doesn'timprove performance.

    The ClientScriptManager.RegisterClientScriptResource method adds a reference to a client script. It does not combine multiplescripts together or improve performance.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Add dynamic features to a page by using JavaScript

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 2

    ScriptManager.CompositeScript PropertyMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.compositescript(v=VS.90).aspx

    Using Script Combining to Improve AJAX PerformanceMSDN LibraryLink: http://www.asp.net/aspnet-in-net-35-sp1/videos/using-script-combining-to-improve-ajax-performance

  • 8/11/2019 70 515 client Side Ajax quiz

    5/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 5 (515P_3.1_05)

    __________________________________________________________________________________________________________

    You are developing an ASP.NET webpage that requires the MicrosoftAjaxApplicationServices.js script. You need to load the scriptand any files on which the script is dependent.

    Which actions should you take? (Each correct answer presents part of the solution. Choose two.)

    1. Add a ScriptManager control.

    2. >>Add the following code to the ASPX source:

    3. Add a ClientScriptManager control.

    4. Call the MicrosoftAjaxApplicationServices.js script by using the RegisterStartupScript method.

    5. Add the MicrosoftAjaxApplicationServices.js script to the CompositeScript property.

    6. >>Add the following code to the ASPX source:

    Sys.require([Sys.scripts.ApplicationServices], function() {

    //Application services loaded});

    Explanation:You can use the Sys.Require function to load AJAX libraries along with any dependencies. Sys.require is defined in Start.js, so youneed to load that first. Then you can call Sys.Require and specify members of the Sys.scripts collections. By specifyingSys.scripts.ApplicationServices, AJAX will automatically load the following dependencies:

    * MicrosoftAjaxCore.js

    * MicrosoftAjaxNetwork.js* MicrosoftAjaxSerialization.js* MicrosoftAjaxWebServices.js

    The ScriptManager control (and its CompositeScript property) and the ClientScriptManager control (and its RegisterStartupScriptproperty) can be used to load JavaScript scripts. However, they do not automatically load dependencies--you would need tomanually identify the dependencies and specify them.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Add dynamic features to a page by using JavaScript

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 2

    HOW TO Load Required ScriptsMicrosoft ASP.NETLink: http://www.asp.net/ajaxlibrary/HOW%20TO%20Load%20Required%20Scripts.ashx

  • 8/11/2019 70 515 client Side Ajax quiz

    6/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 6 (515P_3.1_06)

    __________________________________________________________________________________________________________

    You are upgrading a webpage from ASP.NET 2.0 to ASP.NET 4.0. As part of the upgrade, you are moving functionality from theserver to the client. The server-side implementation required a postback. You are writing a custom JavaScript script that populatesa text box with the item a user selects from a DropDownList ASP.NET server control. You need to ensure that the script canidentify the DropDownList control even if you later reorganize the contents of the .aspx page.

    Which action should you take?

    1. Set the DropDownList.ClientIDMode mode to Predictable.

    2. Set the DropDownList.ClientIDMode mode to AutoID.

    3. >>Set the DropDownList.ClientIDMode mode to Static.

    4. Set the DropDownList.ClientIDMode mode to Inherit.

    Explanation:JavaScript identifies HTML elements by using the client ID. To ensure consistency, set the client ID mode to Static. This will set theclient ID to the server control's ID property.

    In earlier versions of ASP.NET, ASP.NET automatically generated a client ID. The algorithm used provided unique client IDs forevery element, but the client IDs could change each time the page was requested, making it difficult to reliably identify servercontrols. If you upgrade a project from an earlier version of ASP.NET, the project will use the AutoID client ID mode setting tocontinue this behavior.

    If you create a new ASP.NET 4.0 project, server controls use the Predictable client ID behavior. This ensures that client IDs remainconsistent between page requests. The best way to identify a server control's client ID is to render the page and look at the HTMLsource code. While predictable, the client ID might change if you move the server control to a different container.

    If you choose Inherit, the setting is inherited from the parent.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Add dynamic features to a page by using JavaScript

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 2

    Control.ClientID PropertyMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    7/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 7 (515P_3.4_01)

    __________________________________________________________________________________________________________

    You are updating an existing ASP.NET page. The page allows partial-page updates by using nested UpdatePanel controls. EachUpdatePanel control displays the time it was last updated. The outer panel contains a Button control, and the inner panel containsa Calendar control. The ASPX code is as follows:

    Last refresh

    Last refresh

    Which update scenarios will occur? (Each correct answer presents a complete solution. Choose two.)

    1. >>OuterPanel will be updated when the user updates the calendar.

    2. InnerPanel will be updated when the user clicks the button.

    3. >>InnerPanel will be updated when the user updates the calendar.

    4. OuterPanel will be updated when the user clicks the button.

    Explanation:Normally, updating the calendar in the inner control would not cause the outer panel to be updated. However, in this scenario, theouter panel has an AsyncPostBackTrigger property configured for the calendar. Therefore, if the user updates the calendar, theouter panel updates.

    Because the inner panel has not defined the ChildrenAsTriggers property, it defaults to True. The calendar is a child of the innerpanel; therefore, updating the calendar also causes the inner panel to update.

    By default, clicking a button within a panel will cause the panel to update. However, the outer panel has the ChildrenAsTriggersproperty set to false. A button will not, by default, cause nested UpdatePanel controls to update.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement ASP.NET AJAX

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 1

    Partial-Page Rendering Overview

  • 8/11/2019 70 515 client Side Ajax quiz

    8/53

    MSDN LibraryLink: http://msdn.microsoft.com/en-us/library/bb386573.aspx

    UpdatePanel Control OverviewMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/bb386454.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    9/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 8 (515P_3.4_02)

    __________________________________________________________________________________________________________

    You are developing an ASP.NET page that allows partial-page updates using nested UpdatePanel controls. Each UpdatePanelcontrol displays the time it was last updated. The outer panel has contains a Button control, and the inner panel contains aCalendar control. The ASPX code is:

    Last refresh

    Last refresh

    You want the update panels to behave as follows:

    * When a user either Button control, both UpdatePanel controls are updated.* When a user updates the calendar, only the inner update panel is updated.* The date the user selects in the calendar control is maintained regardless of which button is pressed.

    Which of these properties should you define? (Each correct answer presents part of the solution. Choose two.)

    1. >>Set OuterPanel.UpdateMode to Conditional.

    2. >>Add an AsyncPostBackTrigger to OuterPanel.Triggers for Button2.

    3. Set InnerPanel.ChildrenAsTriggers to False.

    4. Set Calendar1.EnableViewState to False.

    Explanation:By default, all UpdatePanel controls update during every postback. In this scenario, that default behavior is correct for the innerUpdatePanel. However, the outer update panel should not update when the user updates the calendar. Therefore, you shouldchange OuterPanel.UpdateMode to Conditional. Changing this setting would prevent OuterPanel from updating when the userclicks Button2, however. To correct that, add an AsyncPostBackTrigger to OuterPanel.Triggers for Button2.

    You cannot set InnerPanel.ChildrenAsTriggers to False without also setting InnerPanel.UpdateMode to Conditional.

    Disabling view state for the calendar control would prevent it from maintaining the user's selection.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement ASP.NET AJAX

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 1

  • 8/11/2019 70 515 client Side Ajax quiz

    10/53

    Partial-Page Rendering OverviewMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/bb386573.aspx

    UpdatePanel Control OverviewMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/bb386454.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    11/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 9 (515P_3.2_01)

    __________________________________________________________________________________________________________

    You are updating an ASP.NET 2.0 page to ASP.NET 4. The ASP.NET page contains two controls: a HyperLink control namedmyHyperLink, and a Button control named myButton. Clicking the button sets the hyperlink's target to http://www.contoso.com. Thebutton's only purpose is to update the hyperlink; the postback is not required for any other reason.

    The ASP.NET 2.0 page performed dynamic page changes on the server by using postbacks. The ASP.NET 4 page will perform

    the same changes by using client-side JavaScript. You need to ensure that the update occurs on the client side.

    Which actions should you perform? (Each correct answer presents part of the solution. Choose three.)

    1. >>Change the Button control to an HTML input button.

    2. Set the Button control's Click ASP.NET event to call the updatelink() function.

    3. >>Create a JavaScript function that updates myHyperLink.href.

    4. Create a JavaScript function that updates myHyperLink.target.

    5. >>Set the HTML input button's onclick event to call the updatelink() function.

    Explanation:Moving a page's functionality from the server to the client makes the page more responsive to users. For that reason, manydevelopers are converting ASP.NET server-side code to JavaScript client-side code, as in this scenario.

    To write ASP.NET server-side code when a user clicks a button, use a Button server control and handle the Button.Click event.This will cause the browser to send a request to the server, allowing the server to update the page. To make the update on theclient, use an HTML input button instead of a server control. To respond to a button click by using JavaScript, handle the button'sonclick event, and pass it the name of the JavaScript function.

    Within the JavaScript function, you will need to isolate the hyperlink by using the Document Object Model (DOM), and then updatethe href property. The target property specifies which browser window to open the page in.

    Objective:

    Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Alter a page dynamical ly by manipulating the DOM

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    Manipulating the HTML DOM of an ASP.NET Page with JavaScriptDot Net RulesLink: http://dotnetstories.wordpress.com/2009/02/24/manipulating-the-html-dom-of-an-aspnet-page-with-javascript/

    DOM Manipulation with JQueryJoe On ASP.NETLink: http://weblogs.asp.net/joestagner/archive/2008/02/12/dom-manipulation-with-jquery.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    12/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 10 (515P_3.2_02)

    __________________________________________________________________________________________________________

    You are adding an open source JavaScript function to the section of an ASP.NET page. The JavaScript functiondynamically updates the contents of a hyperlink based on a user's client-side activities on the page. The JavaScript functionrequires the hyperlink to have the ID dynamicHyperLink.

    You add a HyperLink server control to the page and set the ASP.NET ID to dynamicHyperLink, as shown in the following code

    example.

    Click!

    You view the page and perform an action that should update the hyperlink. The debugger starts and the error message shown inthe exhibit appears. You need to resolve the problem without editing the JavaScript function.

    Which action should you perform?

    1. Enclose the hyperlink in a tag.

    2. >>Set dynamicHyperLink.ClientIDMode to Static.

    3. Move the JavaScript function into the section of the webpage.

    4. Set dynamicHyperLink.runat to Client.

    Explanation:By default, ASP.NET 4 creates HTML IDs for server controls based on the ID properties of the server controls. However, ASP.NETwill prepend an extra identifier to the ASP.NET ID you specify. For example, in this scenario, ASP.NET created an HTML ID ofMainContent_dynamicHyperLink. Because the JavaScript was hard-coded to work with the ID dynamicHyperLink, it generated anerror when it could not find an element with that ID.

    To configure ASP.NET to simply use the ID you specify, set the ClientIDMode to Static.

    Enclosing the hyperlink in a tag would not affect the ID of the element.

    You cannot set the runat property of a HyperLink server control to Client; HyperLink server controls must run on the server.

    Moving the JavaScript to a different portion of the page would have no impact.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Alter a page dynamical ly by manipulating the DOM

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    ClientIDMode in ASP.NET 4.0Rick Strahl Web LogLink: http://www.west-wind.com/weblog/posts/54760.aspx

    ASP.NET, Part 8: Introducing ClientIDModeDan Maharry BlogLink: http://blog.hmobius.com/post/2010/02/25/ASPNET-Part-8-Introducing-ClientIDMode.aspx

    Cleaner HTML Markup with ASP.NET 4 Web Forms - Client IDs (VS 2010 and .NET 4.0 Series)ScottGu Blog

  • 8/11/2019 70 515 client Side Ajax quiz

    13/53

    Link: http://weblogs.asp.net/scottgu/archive/2010/03/30/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    14/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 11 (515P_3.2_03)

    __________________________________________________________________________________________________________

    You are writing a JavaScript function that will cause a hyperlink target on an ASP.NET page to open in a new browser window. TheHTML ID of the hyperlink is myHyperLink. You need to update the setting of the myHyperlink control within the JavaScript function.

    Which code segment should you use?

    1. >>document.getElementById('myHyperLink').target = "_blank";

    2. document.childNodes('myHyperLink').target = "_blank";

    3. document.documentElement.childNodes('myHyperLink').target = "_blank";

    4. document.getElementsByName('myHyperLink').target = "_blank";

    Explanation:You can dynamically change HTML elements by using JavaScript. To identify elements, use the Document Object Model (DOM).The root of the DOM is document. Within the document object, the easiest way to identify an HTML control is to call thegetElementById() function and specify the ID of the element. With the element identified, you can set the target property to"_blank", which will cause the link to open in a new window.

    The document.getElementsByName() function returns multiple elements. In order to update their properties, you would need toselect one element from the collection.

    You cannot access a member of the childNodes collection by specifying the ID.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Alter a page dynamical ly by manipulating the DOM

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    JavaScript Tutorial - DOM nodes and treewww.HowToCreate.co.ukLink: http://www.howtocreate.co.uk/tutorials/javascript/dombasics

    getElementById MethodMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/ms536437.aspx

    Document Object Model (DOM) Level 1 Specification (Second Edition)W3CLink: http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/

  • 8/11/2019 70 515 client Side Ajax quiz

    15/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 12 (515P_3.2_04)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page. When a user points to an ASP.NET TextBox control, a jQuery-scripted function will changethe background color of that text box to green.

    You create an ASPX page that contains the code shown in the following code example.

    $("input").mouseenter(function () { $(this).css("background-color", "green"); });$("input").mouseleave(function () { $(this).css("background-color", "white"); });

    When you view the page and point to a text box, its background color does not change. You need to ensure that the text boxbackground color changes.

    What are two possible ways to achieve this goal? (Each correct answer presents a complete solution. Choose two.)

    1. In the jQuery script, change "input" to "TextBox".

    2. >>Move the jQuery script into a $(document).ready(function () {}); block.

    3. In the jQuery script, change "this" to "TextBox".

    4. >>Move the entire jQuery script to the end of the section.

    5. In the jQuery script, change "this" to "input".

    Explanation:You can dynamically change HTML elements by using jQuery. To identify elements, use a dollar sign ($), and specify the elementtype in parentheses. To solve the problem in this scenario, you must understand that ASP.NET renders TextBox controls as HTML elements. Therefore, the code sample is correctly applying the functions to the input controls' mouseenter and mouseleaveevents.

    The original code does not change the background color because the jQuery script is stored in the section. The browserprocesses the page from top to bottom. Therefore, when it processes the code in the section, the HTML elementsdo not yet exist, and the jQuery script cannot bind to their events. Solving the problem simply requires you to delay the browser'sprocessing of the script until it has processed the section of the page. There are two ways to do that:

    1. Move the script to the bottom of the section, after the text boxes.2. The preferred method, use the jQuery function $(document).ready to cause the script to run only after the browser has renderedthe complete HTML page.

    Changing "input" to "TextBox" would not match any elements, because HTML does not have an element type named TextBox.

    With jQuery, you can use "this" to refer to the current object. In this example, the jQuery script correctly specifies HTML elements, including text boxes. Therefore, you do not need to change "this" to anything different.

    You should be very familiar with $(document).ready, because most developers use it to create jQuery scripts that manipulate userinterface elements.

  • 8/11/2019 70 515 client Side Ajax quiz

    16/53

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Alter a page dynamical ly by manipulating the DOM

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    17/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 13 (515P_3.2_05)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery to add dynamic elements to the user interface. In the CSS file, you define thestyle shown in the following code example.

    p.hide {display: none;

    }

    You assign the hide class to several

    elements, and create an HTML input button that has the ID showButton. You need todisplay the hidden

    elements when the user clicks the button.

    Which code segment should you use?

    1. $("#showButton").click(function () {$("p").hide.show();

    });

    2. $("showButton").click(function () {$("#p.hide").show();

    });

    3. $("showButton").click(function () {$("#p").hide.show();

    });

    4. >>$("#showButton").click(function () {$("p.hide").show();

    });

    Explanation:

    jQuery allows you to manipulate user interface elements. To make use of jQuery, you must understand jQuery's syntax foridentifying parts of the Document Object Model (DOM).

    To specify an element by its ID, prepend the ID with a number sign (#). For example, to properly identify the button that has the IDshowButton, specify #showButton.

    To specify an element by element type, name the type. For example, to run a function on all input elements, specify "input". In thisexample, you specify "p" to run the show() function on paragraph elements.

    To restrict a selection to a specific class, use the dot notation. To specify all

    elements with the class set to "hide", specify"p.hide".

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Alter a page dynamical ly by manipulating the DOM

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    Using jQuery with ASP.NET

  • 8/11/2019 70 515 client Side Ajax quiz

    18/53

    DotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    19/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 14 (515P_3.2_06)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery to add a

    element containing text to an existing element. You createan ASPX page that contains the code shown in the following code example.

    $(document).ready(function () {// TODO: Add code

    });

    You need to display text in the greeting element shown.

    Which code segment should you use?

    1. $("div class=greeting").add("p").html("Hello, world!");

    2. $("#div.greeting").add("#p").html("Hello, world!");

    3. $("#div class=greeting").add("#p").html("Hello, world!");

    4. >>$("div.greeting").add("p").html("Hello, world!");

    Explanation:

    jQuery allows you to manipulate user interface elements. To make use of jQuery, you must understand jQuery's syntax foridentifying parts of the Document Object Model (DOM).

    To specify an element by element type, name the type. For example, to run a function on all input elements, specify "input". In thisexample, you need to identify an instance of , so you specify "div".

    To restrict a selection to a specific class, use the dot notation. To specify all elements with the class set to "greeting", specify"div.greeting".

    The # notation is used to specify an element by its ID.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Alter a page dynamical ly by manipulating the DOM

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    Using jQuery with ASP.NETDotNetSlackers.com

  • 8/11/2019 70 515 client Side Ajax quiz

    20/53

    Link: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    21/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 15 (515P_3.2_07)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery to update the URL and text of an existing anchor element. You create anASPX page that contains the code shown in the following code example.

    $(document).ready(function () {// TODO: Add code

    });

    Visit Contoso

    You need to change the anchor text to "Visit Fabrikam" and the anchor URL to "http://fabrikam.com".

    Which code segment should you use?

    1. >>$('div.greeting > a').html('Visit Fabrikam!');$('div.greeting > a').attr('href', 'http://fabrikam.com');

    2. $('#a>div.greeting').add("a").html('Visit Fabrikam!');$('#a>div.greeting').add("a").attr('href', 'http://fabrikam.com');

    3. $('div.greeting:a').html('Visit Fabrikam!');$('div.greeting:a').attr('href', 'http://fabrikam.com');

    4. $('div.greeting:has(a)').add("a").html('Visit Fabrikam!');

    $('div.greeting:has(a)').add("a").attr('href', 'http://fabrikam.com');

    Explanation:jQuery allows you to manipulate user interface elements. To make use of jQuery, you must understand jQuery's syntax foridentifying parts of the Document Object Model (DOM).

    To specify an element by element type, simply name the type. For example, to run a function on all input elements, specify "input".In this example, you need to identify an instance of , so you specify "div".

    To restrict a selection to a specific class, use the dot notation. To specify all elements with the class set to "greeting", specify"div.greeting".

    To select a child of an element, use the right angle bracket (>). In this example, "div.greeting > a" selects all elements withinthe greeting element.

    With the correct element selected, you can set the HTML markup of an anchor by using the html() function. Because the URL iscontained within the href attribute, you must use the attr() function to update the URL.

    The # notation is used to specify an element by its ID.

    Objective:Implementing Client-Side Scripting and AJAX

  • 8/11/2019 70 515 client Side Ajax quiz

    22/53

    Sub Objective(s):Alter a page dynamical ly by manipulating the DOM

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    23/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 16 (515P_3.3_01)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery to animate an HTML button. When the user clicks the button it will expand tothe width of the browser window over the course of a second. You add the HTML button control shown in the following codeexample to the ASPX page.

    You add the reference shown in the following code example to the section of the ASPX page.

    You need to expand the button to the full width of the browser window when a user clicks the button.

    Which code segment should you add to the section of the ASPX page?

    1. $(document).ready(function() {

    $("#animateButton").animate(function() {$("#animateButton").click({

    width: "100%"}, 1000);

    });});

    2. $(document).ready(function() {

    $("#animateButton").triggerHandler(function() {$("#animateButton").animate({

    width: "100%"}, 1000);

    });

    });

    3. $(document).ready(function() {

    $("#animateButton").animate(function() {$("#animateButton").triggerHandler({

    width: "100%"}, 1000);

    });});

    4. >>$(document).ready(function() {

    $("#animateButton").click(function() {$("#animateButton").animate({

    width: "100%"}, 1000);

    });});

  • 8/11/2019 70 515 client Side Ajax quiz

    24/53

    Explanation:In this scenario, you have added a reference to jQuery as stored on Microsoft's Content Delivery Network (CDN). To respond toHTML events by using jQuery, first ensure that all code is wrapped in a call to $(document).ready(), which ensures that thebrowser completely renders the page before registering the events.

    To respond to a button click by using jQuery, reference the button ID (in this example, #animateButton) and call the click() function.Provide the function that should run when the button is clicked as an argument to the click() function. To slowly change the button'swidth, call the animate() function.

    Nesting the click() function inside the animate() function would not properly register the event handler.

    Calling the triggerHandler() function runs event handlers that have already been registered. It does not register a new eventhandler.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Handle JavaScript events

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    .animate()jQuery APILink: http://api.jquery.com/animate/

  • 8/11/2019 70 515 client Side Ajax quiz

    25/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 17 (515P_3.3_02)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that includes a button with the ID hideButton. You assign the hiddentext class to specificparagraphs. The page contains the code shown in the following code example.

    This text will be hidden

    This text won't be hidden

    You need to hide the hiddentext paragraphs when a user clicks the button.

    Which code segments will achieve this goal? (Each correct answer presents a complete solution. Choose two.)

    1. $(".hideButton").click(function () {$("p#hiddentext").hide();

    });

    2. >>$("#hideButton").bind("click", function () {$("p.hiddentext").hide();

    });

    3. $("#hideButton").each(function() {$("p.hiddentext").hide();

    });

    4. >>$("#hideButton").click(function () {$("p.hiddentext").hide();

    });

    5. $(".hideButton").each(function() {$("p#hiddentext").hide();

    });

    6. $(".hideButton").bind("click", function () {$("p#hiddentext").hide();

    });

    Explanation:To respond to a button click by using jQuery, reference the button ID (#hide, in this scenario) and call the bind() function.Alternatively, you can call the click() function, which is a shortcut for registering an event handler to the click event.

    In the event handler, select the

    elements by specifying "p". Restrict the selection to

    elements with the class set tohiddentext by adding ".hiddentext".

    To specify an ID by using jQuery, prepend the name with a number sign (#). To specify a class, prepend the name with a period (.).To specify an element type, provide the type, such as "p" or "input".

    The each() function iterates through a selection. jQuery handles iterating through the selection automatically, so it is not necessaryin this scenario.

    Objective:Implementing Client-Side Scripting and AJAX

  • 8/11/2019 70 515 client Side Ajax quiz

    26/53

    Sub Objective(s):Handle JavaScript events

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    27/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 18 (515P_3.3_03)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery. The page includes the code shown in the following code example.

    This text will be hidden

    This text won't be hidden

    You need to alternately hide or show the hiddentext paragraphs when a user clicks the button.

    Which code segment should you use?

    1. $("#hideButton").click(function () {$("p.hiddentext").hide();

    }, function () {$("p.hiddentext").show();

    });

    2. >>$("#hideButton").toggle(function () {$("p.hiddentext").hide();

    }, function () {$("p.hiddentext").show();

    });

    3. $("#hideButton").bind("click", function () {$("p.hiddentext").hide().show();

    });

    4. $("#hideButton").bind("click", function () {$("p.hiddentext").hide();

    }, function () {$("p.hiddentext").show();

    });

    Explanation:To respond to a default event such as a button click with alternating functions, use the jQuery toggle() function. Then specify twomethods that will handle the default event alternatingly.

    In the event handler, select the

    elements by specifying "p". Restrict the selection to

    elements with the class set tohiddentext by adding ".hiddentext". To specify an ID by using jQuery, prepend the name with a number sign (#). To specify a class,prepend the name with a period (.). To specify an element type, provide the type, such as "p" or "input".

    You can use the click() function or the bind() function to bind an event handler to a button, but they do not support providingmultiple functions.

    Calling hide().show() would result in both the hide() function and the show() function running each time the button is clicked-effectively always showing the paragraphs.

    A more concise way to write the same code would be:

    $("#hideButton").click(function () {$("p.hiddentext").toggle();

    });

    Objective:

  • 8/11/2019 70 515 client Side Ajax quiz

    28/53

    Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Handle JavaScript events

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    .toggle()jQuery APILink: http://api.jquery.com/toggle/

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    29/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 19 (515P_3.3_04)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses both ASP.NET Button server controls and HTML buttons. The page includes thecode shown in the following code example.

    You need to ensure that when a user clicks the HTMLButton button, the ASPNetButton button performs a postback as if it hadbeen clicked.

    Which code segments will achieve this goal? (Each correct answer presents a complete solution. Choose two.)

    1. $("#HTMLButton").click(function () {trigger("#ASPNetButton");

    });

    2. >>$("#HTMLButton").click(function () {$("#ASPNetButton").trigger('click');

    });

    3. >>$("#HTMLButton").click(function () {$("#ASPNetButton").click();

    });

    4. $("#HTMLButton").click(function () {triggerhandler("#ASPNetButton");

    });

    5. $("#HTMLButton").click(function () {$("#ASPNetButton").triggerhandler('click');

    });

    6. $("#HTMLButton").click(function () {click("#ASPNetButton");

    });

    Explanation:You can use jQuery to initiate and respond to Document Object Model (DOM) events. To initiate a click event in another control,you can either call the click() function or call the trigger() function and specify the name of the event.

    The triggerHandler() function does not submit a form submission.

    You cannot provide the name of the HTML element as a parameter to the trigger(), click(), or triggerhandler() functions.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Handle JavaScript events

    References:

  • 8/11/2019 70 515 client Side Ajax quiz

    30/53

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    .trigger()jQuery APILink: http://api.jquery.com/trigger/

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    31/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 20 (515P_3.3_05)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery and custom DOM events. The page includes a button with the ID hideButton.You add capabilities to the element to allow blocks of HTML to be shown or hidden when a custom event namedtoggleHidden is called. You need to call the toggleHidden event when a user clicks the button.

    Which code segment should you use?

    1. >>$("#hideButton").click(function () {$("div").trigger("toggleHidden");

    });

    2. $("#hideButton").click(function () {$("div").triggerHandler("toggleHidden");

    });

    3. $("#hideButton").click(function () {$("div").toggleHidden();

    });

    4. $("#hideButton").click(function () {$("div").toggleHidden("trigger");

    });

    Explanation:Custom events allow you to add capabilities to the HTML objects that exercise the capability, rather than adding the functionality tothe object that triggers the functionality. In this scenario, you could simply call $("div.expandable").toggle() within the hideButtonclick event handler. However, by creating a custom event handler, you provide a more object-oriented approach that is well-suitedto adding more complex capabilities.

    To trigger an event, call the trigger() function and provide the name of the event to be triggered.

    You cannot call a custom event as a function.

    You cannot use the triggerHandler() function because it only affects the first matched element. In other words, if you calledtriggerHandler(), you would only hide the first element on the page.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Handle JavaScript events

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    .trigger()jQuery APILink: http://api.jquery.com/trigger/

    .triggerHandler()jQuery APILink: http://api.jquery.com/triggerHandler/

  • 8/11/2019 70 515 client Side Ajax quiz

    32/53

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    33/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 21 (515P_3.3_06)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery and custom DOM events. You create an HTML button with the ID hideButton,and a custom event named toggleHidden. The page contains the code shown in the following code example.

    $("#hideButton").click(function () {$("div.expandable").trigger("toggleHidden");

    });

    You need to show or hide elements with a class of "expandable" when the toggleHidden event is trigged.

    Which code segment should you use?

    1. $("div.expandable").toggleHidden.toggle();

    2. >>$("div.expandable").bind("toggleHidden", function () {$(this).toggle();

    });

    3. $("div.expandable").trigger("toggleHidden", function () {$(this).toggle();

    });

    4. $("div.expandable").toggleHidden(function () {$(this).toggle();

    });

    Explanation:Custom events allow you to add capabilities to the HTML objects that exercise the capability, rather than adding the functionality tothe object that triggers the functionality. In this scenario, you could simply call $("div.expandable").toggle() within the hideButtonclick event handler. However, by creating a custom event handler, you provide a more object-oriented approach that is well-suited

    to adding more complex capabilities.

    This scenario begins by showing you how the custom event will be called. To create the custom event itself, call the bind() functionand specify the name of the custom event and the function that should be executed.

    You cannot call a custom event as a method, and you cannot respond to a custom event by calling the trigger() function.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Handle JavaScript events

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    .bind()jQuery APILink: http://api.jquery.com/bind/

    Using jQuery with ASP.NETDotNetSlackers.com

  • 8/11/2019 70 515 client Side Ajax quiz

    34/53

    Link: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.comLink: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    35/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 22 (515P_3.3_07)

    __________________________________________________________________________________________________________

    You create an ASPX page that includes two buttons. The page contains the code shown in the following code example.

    protected void greenButton_Click(object sender, EventArgs e){

    greenButton.Text = "Blue";}

    $(document).ready(function () {$("#redButton").click(function () {

    $("#redButton").attr("value", "Yellow");$("#greenButton").triggerHandler("click");

    });

    $("#greenButton").click(function () {$("#greenButton").attr("value", "Orange");

    });});

    Examine the code.

    Which values will the two buttons display when you click the redButton button? (Each correct answer presents part of the solution.Choose two.)

    1. Blue

    2. >>Yellow

    3. >>Orange

    4. Red

    5. Green

    Explanation:The ASPX page includes a combination of client-side JavaScript and server-side .NET Framework code. The page has twobuttons: one HTML button (redButton) and one server control (greenButton).

    If you were to click the greenButton button, the browser would initiate a postback and handle the greenButton.Click event, leavingthe redButton button value as Red but changing the greenButton button value to Blue.

    When you click the redButton button, jQuery handles the event in the browser. The first line of the jQuery redButton click eventhandler sets the value of the redButton button to Yellow. The second line of the jQuery redButton click event handler initiates thegreenButton button's click event handler by using the triggerHandler() method, which bypasses the default click event handler andthus prevents the greenButton button from initiating a postback. Instead, it calls only the custom click event handler, whichchanges the greenButton button value to Orange.

  • 8/11/2019 70 515 client Side Ajax quiz

    36/53

    If the redButton click event handler called the trigger() method instead of the triggerHandler() method, the default click eventhandler would still be fired, initiating a postback that would reset the values to Red and Blue.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Handle JavaScript events

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    .triggerHandler()jQuery APILink: http://api.jquery.com/triggerHandler/

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

    Using jQuery with ASP.NET - A Beginner's GuideDotNetCurry.com

    Link: http://www.dotnetcurry.com/ShowArticle.aspx?ID=231

    jQueryjQueryLink: http://jquery.com/

  • 8/11/2019 70 515 client Side Ajax quiz

    37/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 23 (515P_3.4_03)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that will allow users to edit the HTML description of products for sale on your website. Youplan to use the Editor control that is included with the AJAX control toolkit. You create a blank webpage in Microsoft Visual Studio2010. You need to prepare the page to run AJAX scripts.

    Which actions should you perform? (Each correct answer presents part of the solution. Choose two.)

    1. >>Add the Editor control to the page.

    2. >>Add a ToolkitScriptManager control to the page.

    3. Add an Extender.

    4. Add a ScriptManager control to the page.

    Explanation:To use the HTML editor control included with the AJAX Control Toolkit, first install the AJAX Control Toolkit, as described athttp://www.asp.net/ajax/tutorials/get-started-with-the-ajax-control-toolkit-cs. Then drag the ToolkitScriptManager control to the pageand add an Editor control.

    The standard ScriptManager will not work with the AJAX Control Toolkit. Instead, you must add the ToolkitScriptManager that isincluded with the AJAX Control Toolkit.

    You can use Extenders to add client-side features to controls. However, it is not necessary in this scenario.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement ASP.NET AJAX

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 1

    Get Started with the AJAX Control Toolkit (C#)Microsoft ASP.NETLink: http://www.asp.net/ajax/tutorials/get-started-with-the-ajax-control-toolkit-cs

    HTMLEditor DemonstrationMicrosoft ASP.NETLink: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/HTMLEditor/HTMLEditor.aspx

    How do I use the HTML Editor Control? (C#)Microsoft ASP.NETLink: http://www.asp.net/ajax/tutorials/how-do-i-use-the-html-editor-control--cs

  • 8/11/2019 70 515 client Side Ajax quiz

    38/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 24 (515P_3.4_04)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses AJAX to submit a query to a web service and display the result to the user on thecurrent page. The web service accepts two numbers and returns the value of those numbers multiplied. The web form currentlycontains the code shown in the following code example.

    Numbers to multiply: x = Multiply

    You need to submit the values the user enters in the text boxes to a method named Multiply.MultiplyTwoNumbers().

    Which code segment should you use?

    1. function doMath() {Multiply.MultiplyTwoNumbers( $get("num1"), $get("num2"), displayResponse, displayError);

    }

    function displayResponse(result) {$get("response") = result;

    }

    function displayError(result) {$get("response") = "ERROR";

    }

    2. >>function doMath() {Multiply.MultiplyTwoNumbers( $get("num1").value, $get("num2").value, displayResponse, displayError);

    }

    function displayResponse(result) {

    $get("response").innerHTML = result;}

    function displayError(result) {$get("response").innerHTML = "ERROR";

    }

    3. function doMath() {Multiply.MultiplyTwoNumbers( $("#num1").value, $("#num2").value, displayResponse, displayError);

    }

    function displayResponse(result) {$("#response").innerHTML = result;

    }

    function displayError(result) {$("#response").innerHTML = "ERROR";

    }

    4. function doMath() {Multiply.MultiplyTwoNumbers( $("#num1"), $("#num2"), displayResponse, displayError);

    }

  • 8/11/2019 70 515 client Side Ajax quiz

    39/53

    function displayResponse(result) {$("#response") = result;

    }

    function displayError(result) {$("#response") = "ERROR";

    }

    Explanation:You can use AJAX to simplify the process of connecting to web services. When you use AJAX, you can retrieve values from formfields by using the $get() function. To specify a field by name, use the name. To retrieve a value from an input field, specify thevalue property. To access the HTML within a or element, specify the innerHTML property.

    When you use jQuery, you add a number sign (#) to specify elements by ID. AJAX does not use this convention.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement ASP.NET AJAX

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 1

    Tip/Trick: Cool UI Templating Technique to Use with ASP.NET AJAX for non-UpdatePanel scenariosScottGu BlogLink: http://weblogs.asp.net/scottgu/archive/2006/10/22/Tip_2F00_Trick_3A00_-Cool-UI-Templating-Technique-to-use-with-ASP.NET-AJAX-for-non_2D00_UpdatePanel-scenarios.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    40/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 25 (515P_3.4_05)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses AJAX to submit a query to a web service and display the result to the user on thecurrent page. The ASMX code-behind file contains the code shown in the following code example.

    public class Multiply : System.Web.Services.WebService {

    public int MultiplyTwoNumbers(int num1, int num2){return num1 * num2;

    }}

    You need to ensure that you can query the web service by using AJAX.

    Which actions should you perform? (Each correct answer presents part of the solution. Choose two.)

    1. >>Apply the System.Web.Script.Services.ScriptService attribute to the Multiply class.

    2. Apply the GenerateScriptType attribute to the MultiplyTwoNumbers method.

    3. >>Apply the WebMethod attribute to the MultiplyTwoNumbers method.

    4. Apply the System.Web.Services.WebService attribute to the Multipy class.

    Explanation:You can use AJAX to simplify the process of connecting to web services. To create a web service that can be easily accessed byAJAX JavaScript scripts, add the ScriptService attribute to the class. This causes ASP.NET to automatically generate proxyobjects for any methods marked with the WebMethod attribute. Then mark any public methods with the WebMethod attribute. Thisconfigures ASP.NET to accept web service requests for that method.

    You can add the WebService attribute to the class to specify a namespace. However, it's not required in this scenario.

    You would need to add the GenerateScriptType attribute only if the web service method uses generic types and arrays that havemore than one argument. The web service method in this example accepts and returns integers, which do not require it.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement ASP.NET AJAX

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 1

    ScriptServiceAttribute ClassMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/system.web.script.services.scriptserviceattribute.aspx

    Using the WebMethod AttributeMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/byxd99hx%28VS.71%29.aspx

    GenerateScriptTypeAttribute ClassMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/system.web.script.services.generatescripttypeattribute.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    41/53

    Using the WebService AttributeMSDN LibraryLink: http://msdn.microsoft.com/en-us/library/czf3k293%28v=VS.71%29.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    42/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 26 (515P_3.4_06)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET AJAX client-side template by using an HTML fieldset. The template will format personnel dataretrieved from the server by using JavaScript. In the tag, you intend to display each person's first name and last name,separated by a space. The first name and last name are stored in fields named FirstName and LastName. You need to correctlyformat the name.

    Which template should you use?

    1. #FirstName #LastName

    2. >>{{ FirstName }} {{ LastName }}

    3.

    4. FirstName + ' ' + LastName

    Explanation:When using ASP.NET AJAX, specify fields by placing double-curly brackets around the field names, such as {{FirstName}} or{{LastName}}.

    The number sign (#) is used to specify fields by ID when using jQuery.

    You can add JavaScript code within comments in a template by using the notation. However, the scripting enginewould not output the value of a variable directly in that way.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement ASP.NET AJAX

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 1

    Using client templates, part 1Bertrand Le Roy BlogLink: http://weblogs.asp.net/bleroy/archive/2008/07/30/using-client-templates-part-1.aspx

    ASP.NET AJAX and Client-Side TemplatesMSDN MagazineLink: http://msdn.microsoft.com/en-us/magazine/cc546561.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    43/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 27 (515P_3.5_01)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery to retrieve the result of a mathematical calculation from an ASP.NET webmethod. The method is stored in the Math.asmx file. The method is shown in the following code example.

    [System.Web.Script.Services.ScriptService]public class Math : System.Web.Services.WebService {

    [WebMethod]public int Square(int num){

    return num * num;}

    }

    User input is stored in a text box with the ID num1. You need to submit user input and pass the result to a function namedSquareSucceeded().

    Which code segment should you use?

    1. $.ajax({

    type: "POST",contentType: "text/javascript; charset=utf-8",url: "Math.asmx/Square",data: "{'num': '" + $("#num1").val() + "'}",dataType: "json",success: function (msg) {

    SquareSucceeded(msg);},error: SquareFailed

    });

    2. $.ajax({type: "GET",contentType: " text/javascript; charset=utf-8",

    url: "Math.asmx/Square",data: "{'num': '" + $("#num1").val() + "'}",dataType: "json",success: function (msg) {

    SquareSucceeded(msg);},error: SquareFailed

    });

    3. >>$.ajax({type: "POST",contentType: "application/json; charset=utf-8",url: "Math.asmx/Square",data: "{'num': '" + $("#num1").val() + "'}",dataType: "json",success: function (msg) {

    SquareSucceeded(msg);},error: SquareFailed

    });

    4. $.ajax({type: "GET",

  • 8/11/2019 70 515 client Side Ajax quiz

    44/53

    contentType: "application/json; charset=utf-8",url: "Math.asmx/Square",data: "{'num': '" + $("#num1").val() + "'}",dataType: "json",success: function (msg) {

    SquareSucceeded(msg);},error: SquareFailed

    });

    Explanation:Use JavaScript Object Notation (JSON) to submit web service queries from jQuery to an ASP.NET class decorated with[ScriptService]. Regardless of the method, you must always set the contentType to "application/json; charset=utf-8". If the methodaccepts a parameter, you must set the type to "POST".

    Choosing any other values will cause the server to return an "HTTP Error 500 - Internal Server Error" error message.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement AJAX by using jQuery

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    Using jQuery with ASP.NETDotNetSlackers.comLink: http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

  • 8/11/2019 70 515 client Side Ajax quiz

    45/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 28 (515P_3.5_02)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that uses jQuery. You need to retrieve a page named weather.aspx from a server and displayit in an alert window.

    Which code segments will achieve this goal? (Each correct answer presents a complete solution. Choose two.)

    1. function getPage() {$.get('weather.aspx', alert('Page returned: ' + response));

    }

    2. >>function getPage() {$.get('weather.aspx', function(data) {

    alert('Page returned: ' + data);});

    }

    3. >>function getPage() {$.ajax({

    url: 'weather.aspx',success: function (data) {

    alert('Page returned: ' + data);}

    });}

    4. function getPage() {$.ajax({'weather.aspx', function (data) {

    alert('Page returned: ' + data);}

    });}

    Explanation:In jQuery, the $.get() function is a shortcut to the $.ajax() function to retrieve a page by using the HTTP/GET command. Therefore,you can call either the $.get() function or the $.ajax() function with identical results. However, each function requires you to formatthe parameters differently.

    If you call the $.get() function, the only parameter you must specify is the URL of the page being requested. If you need to processthe return value, you must pass a function that jQuery will call after the page is successfully retrieved. You must create the functionby using the function keyword; you cannot simply specify the function as a parameter.

    If you call the $.ajax() function, you must specify the parameters in typical jQuery fashion (comma-delimited Parameter: Valuetuples).

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement AJAX by using jQuery

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

  • 8/11/2019 70 515 client Side Ajax quiz

    46/53

    jQuery.get()jQuery APILink: http://api.jquery.com/jQuery.get/

  • 8/11/2019 70 515 client Side Ajax quiz

    47/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 29 (515P_3.5_03)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that allows users to rate articles on a scale from 1 to 5 and submit a comment with the rating.No response will be displayed to the user. You create an ASP.NET page named vote.aspx that processes the rating and commentvalues as query parameters from an HTTP POST request. The HTML user input form is shown in the following code example.

    Rate (1-5):


    Comment: Vote

    You need to submit the rating and comment.

    Which code segment should you use?

    1. >>function postVote() {$.post('vote.aspx', { Vote: $('#VoteRating').val(), Comment: $("#VoteComment").val() });

    }

    2. function postVote() {

    $.post('vote.aspx', { $('#VoteRating') AS Vote, $("#VoteComment") AS Comment });}

    3. function postVote() {$.post('vote.aspx', { Vote: $('#VoteRating'), Comment: $("#VoteComment") });

    }

    4. function postVote() {$.post('vote.aspx', { $('#VoteRating').val() AS Vote, $("#VoteComment").val() AS Comment });

    }

    Explanation:In jQuery, the $.post() function is a shortcut to the $.ajax() function to send data to a page by using the HTTP/POST command.Therefore, you can call either the $.post() function or the $.ajax() function with identical results. This scenario used the $.postshortcut.

    Use jQuery selectors to select values from the Document Object Model (DOM). While many types of elements, such as , canbe accessed directly by ID, you must call the val() function when accessing the value entered into an input text box by a user. Toaccess an element by using its ID, preface the ID with a number sign (#).

    To pass multiple parameters to a page, use JavaScript Object Notation (JSON) within curly brackets, as shown in the followingcode example.

    { Vote: $('#VoteRating').val(), Comment: $("#VoteComment").val() }

    The names you specify for each value will be used as the parameter names in the POST request. Therefore, they must match thevalues the web form is expecting.

    You cannot use the AS keyword in jQuery.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement AJAX by using jQuery

  • 8/11/2019 70 515 client Side Ajax quiz

    48/53

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    jQuery.post()jQuery APILink: http://api.jquery.com/jQuery.post/

  • 8/11/2019 70 515 client Side Ajax quiz

    49/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 30 (515P_3.5_04)

    __________________________________________________________________________________________________________

    You are creating an ASP.NET page that submits a query with user data to an ASP.NET web service. The web service class isdecorated with the ScriptService attribute, and the web method is decorated with the WebMethod attribute. You need to use jQueryto submit the request to the web service from the client browser.

    Which method should you use?

    1. $.get()

    2. >>$.ajax()

    3. $.getJSON()

    4. $.post()

    Explanation:In jQuery, the $.post(), $.get(), and $.getJSON() functions are shortcuts to the $.ajax() function to send data to a page by using theHTTP/GET command or the HTTP/POST command. Those shortcuts all have one severe limitation: they do not allow you tospecify the content type. Requests received by ASP.NET web services decorated with the ScriptService attribute that submit data

    to the server must have the content type set to "application/json; charset=utf-8". Only the $.ajax() function allows you to set thecontent type correctly.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement AJAX by using jQuery

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    jQuery.ajax()jQuery APILink: http://api.jquery.com/jQuery.ajax/

    Using jQuery to Consume ASP.NET JSON Web ServicesEncosiaLink: http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

  • 8/11/2019 70 515 client Side Ajax quiz

    50/53

    Web Applications Development with Microsoft .NET Framework 4 - C#

    Question Number (ID) : 31 (515P_3.5_05)

    __________________________________________________________________________________________________________

    You create an ASP.NET page that returns a simple text string. The Page.Load event handler for the ASP.NET page is shown inthe following code example.

    Response.Clear();Response.Write("Hello, world!");

    You are creating an ASP.NET page that displays the response from the first page within a element when the user clicksthe element. The main form is shown in the following code example.

    Click to load from Ajax!

    You need to display a message informing users that the response is loading, and then display the response within the element when the user clicks the element.

    Which code segment should you use?

    1. >>$(document).ready(function () {

    $("#ajax_holder").click(function () {$(this).html("Loading...").load("ajax-responder.aspx");

    });});

    2. $(document).ready(function () {$("#ajax_holder").click(function () {

    $(this).html("Loading...").get("ajax-responder.aspx");});

    });

    3. $(document).ready(function () {$("#ajax_holder").click(function () {

    $(this).get("Loading...", "ajax-responder.aspx");});

    });

    4. $(document).ready(function () {$("#ajax_holder").click(function () {

    $(this).load("Loading...", "ajax-responder.aspx");});

    });

    Explanation:In jQuery, after you select an element, you can call multiple functions on the element in sequence by chaining them. Therefore, thiscode:

    $(document).ready(function () {$("#ajax_holder").click(function () {

    $(this).html("Loading...").load("ajax-responder.aspx");});

    });

    Is exactly equivalent to this:

  • 8/11/2019 70 515 client Side Ajax quiz

    51/53

    $(document).ready(function () {$("#ajax_holder").click(function () {

    $(this).html("Loading...")$(this).load("ajax-responder.aspx");

    });});

    The load() function retrieves content from a page and returns the exact response from the server. The get() function is used forweb services. It does not directly return the response; rather, it is asynchronous. The get() function completes immediately aftersubmitting the request to the server, without waiting for a response. To process the response from the get() function, provide afunction that will process the data returned by the server and update the Document Object Model (DOM) appropriately.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement AJAX by using jQuery

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    5 Ways to Make Ajax Calls with jQueryNet Tuts Plus

    Link: http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

    .load()jQuery APILink: http://api.jquery.com/load/

  • 8/11/2019 70 515 client Side Ajax quiz

    52/53

  • 8/11/2019 70 515 client Side Ajax quiz

    53/53

    We are adding the response to the clientTimeLabel ID element. You will select the element by using the jQuery function, and use itto call the load() function.

    The timeLabel ID element is the element containing the time on the ajax-responder.aspx page. Therefore, you will specify it whenextracting the time from within the load() function.

    Objective:Implementing Client-Side Scripting and AJAX

    Sub Objective(s):Implement AJAX by using jQuery

    References:

    MCTS Self-Paced Training Kit (Exam 70-515): Web Applications Development with Microsoft .NET Framework 4Chapter 9 - Lesson 3

    5 Ways to Make Ajax Calls with jQueryNet Tuts PlusLink: http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

    .load()jQuery APILink: http://api.jquery.com/load/