Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 44 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
44
Dung lượng
1,75 MB
Nội dung
<script yfwYKTfiMeq0vuB4l8z1TrL35xfv6g8XP_WrOPfTwL66AB2oz 8QRS5Lwfo666oDJgLW4Va2KNp_CEQC1pA2Sjb3Jm9uPm 6XGO-wEIVg6lRA1&t=633062590837065070" type="text/javascript"></script> <script src="/ScriptResource.axd?d= yfwYKTfiMeq0vuB4l8z1TrL35xfv6g8XP_WrOPfTwL66AB2oz 8QRS5Lwfo666oDJgLW4Va2KNp_CEQC1pA2SjaH2gXu3ERVLt TRI4HEwCJk1&t=633062590837065070" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1')); Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90); //]]> </script> <div> </div> <script type="text/javascript"> <! Sys.Application.initialize(); // > </script> </form> </body> </html> There’s lots of new stuff here. You’ll be seeing how this all hangs together as you work through this book, but for now consider the <script> blocks referencing WebResource.axd and ScriptResource.axd. These guys are downloading the various script libraries that the browser needs for this page. Part of this is to support the core extensions to JavaScript, adding object orientation so that calls like Sys.Application.Initialize() make sense. CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET288 9594CH12.qxd 1/22/08 10:59 AM Page 288 Migrating ASP.NET to AJAX One of the nicest things about ASP.NET AJAX is the fact that the UpdatePanel control can be used to add AJAX functionality to an existing ASP.NET application. This is simply achieved by wrapping the relevant controls with an UpdatePanel. Consider the following example. Add a new web form to your application and call it AddWithUpdatePanel.aspx. On this form, add a couple of text boxes, a button, and a label, and call them txtA, txtB, btnAdd, and lblAns, respectively. The source of your page should look like this: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddWIthUpdatePanel.aspx.cs" Inherits="Example2.AddWIthUpdatePanel" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txtA" runat="server"></asp:TextBox><br /> <asp:TextBox ID="txtB" runat="server"></asp:TextBox><br /> <br /> <asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" Text="Add Em Up" /><br /> <asp:Label ID="lblAns" runat="server"></asp:Label><br /> <br /> </div> </form> </body> </html> Double-click the button to add an event handler, and add the following code to it: protected void btnAdd_Click(object sender, EventArgs e) { int a = Convert.ToInt16(txtA.Text); int b = Convert.ToInt16(txtB.Text); CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET 289 9594CH12.qxd 1/22/08 10:59 AM Page 289 int c = a + b; lblAns.Text = c.ToString(); } Now when you run the application, you’ll see something like Figure 12-8. When you type the numbers into the text fields, nothing happens until you click the button, which triggers a postback and a full refresh of the page. Depending on your system speed, you may or may not see a page blink, but you can notice the full page refresh by looking at the status bar. You can convert this to an Ajax application without changing any code. To do this, drag and drop a ScriptManager control from the Toolbox onto the page. (Look back to Figure 12-6 to see the Toolbox.) After doing this, drop an UpdatePanel on the page, and then find the Panel control in the standard Toolbox and add a panel inside the UpdatePanel. The Panel resolves to a <div> at runtime, and can be resized within the Designer, causing the UpdatePanel to match it. See Figure 12-8 for an example. Figure 12-8. U pdating an ASP .NET page to use A jax CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET290 9594CH12.qxd 1/22/08 10:59 AM Page 290 For the next step, you should drag and drop the text boxes, button, and label into the panel that you just added. Once you’ve done this, the source code of your page will look something like this: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddWIthUpdatePanel.aspx.cs" Inherits="Example2.AddWIthUpdatePanel" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" Height="88px" Width="388px"> <asp:TextBox ID="txtA" runat="server"></asp:TextBox><br /> <asp:TextBox ID="txtB" runat="server"></asp:TextBox><br /> <asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" Text="Add Em Up" /><br /> <asp:Label ID="lblAns" runat="server"></asp:Label></asp:Panel> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html> And that’s all you’ll need to do to get this application to become an Ajax one. Run the application, and you’ll see that when you run it, it no longer performs a full page refresh; it just does a partial Ajax-style one. You can see this in Figure 12-9. CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET 291 9594CH12.qxd 1/22/08 10:59 AM Page 291 Figure 12-9. ASP.NET application using Ajax Building a Simple Ajax Application with ASP.NET Now, the example of adding two numbers is all very good, but how does ASP.NET AJAX stack up when writing a more typical ASP.NET page—for example, one that uses a DataGrid to bind to a back-end data source? ■Note If you are amending an existing ASP.NET application to use Ajax, you should remember that some changes to your Web.config file will need to be made to reference the AJAX libraries. A good shortcut is to create a new ASP.NET AJAX application and copy the information from its Web.config file. Let’s put this together now. First, create a new web form and add a SqlDataSource control to it. Open the SqlDataSource Tasks pane, as shown in Figure 12-10. Figure 12-10. Adding a SqlDataSource to an Ajax application CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET292 9594CH12.qxd 1/22/08 10:59 AM Page 292 Click the Configure Data Source link to go into the Configure Data Source wizard for the SqlDataSource. To see all the steps in this wizard, take a look back at Chapter 4, where the same connection is made. Otherwise, if you already have the AdventureWorks data- base set up with SQL Server, enter the configuration string on the first step on the wizard. See Figure 12-11 for details. Here’s an example connection string: Data Source=.\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=True Figure 12-11. Connecting to the database When you click Next, you’ll be given the option to either use a custom SQL statement or specify columns from a table or view (see Figure 12-12). Select the former (“Specify a custom SQL statement or stored procedure”). CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET 293 9594CH12.qxd 1/22/08 10:59 AM Page 293 Figure 12-12. Specifying the query type When y ou click Next, you’ll be taken to the Define Custom Statements or Stored Procedures scr een, as shown in Figure 12-13. Enter the following SQL: SELECT AddressLine1, PostalCode FROM Person.Address WHERE (PostalCode = @PostalCode) This selects the first line of the customer ’ s addr ess and their ZIP code when the ZIP code matches a par ameterized value. You’ll see how to set the default value in the next step . CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET294 9594CH12.qxd 1/22/08 10:59 AM Page 294 Figure 12-13. Setting up the SQL query When you click Next, you’ll be taken to the Define Parameters step (see Figure 12-14). Here you can set up default parameter values that will be used in your SQL query. Select QueryS tring as the parameter source, and the wizard will set up the code required to read the par ameter fr om the URI that you use to call the service. Give the query string field a name (i.e., ZIP) and a default value. Now if you call your service using a URI like http:// server/pagename.aspx?ZIP=12345, the @PostalCode parameter will be loaded with 12345 prior to calling the database. CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET 295 9594CH12.qxd 1/22/08 10:59 AM Page 295 Figure 12-14. Defining the parameters After this, you can finish out the wizard, and you’ll have a configured data source. The wizard has added some markup to your page to instruct the server at runtime to connect to the data and run the query, using the query string parameter that you defined. It should look something like this: <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString= "<%$ ConnectionStrings:AdventureWorksConnectionString %>" SelectCommand="SELECT AddressLine1, PostalCode FROM Person.Address WHERE (PostalCode = @PostalCode)"> <SelectParameters> <asp:QueryStringParameter DefaultValue="90210" Name="PostalCode" QueryStringField="ZIP" /> </SelectParameters> </asp:SqlDataSource> CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET296 9594CH12.qxd 1/22/08 10:59 AM Page 296 Now that you have your data connection, it’s pretty easy to tie a DataGrid up to it to view the results of the query. Drag and drop a GridView control onto the page, and open its Tasks pane (see Figure 12-15 for details). Figure 12-15. Adding a GridView to your application Select SqlDataSource1 from the Choose Data Source drop-down, and you’ll see the grid reconfigure itself to the fields that the data source exposes. Enable paging, sorting, and selection by selecting their check boxes in the Tasks pane, as shown in Figure 12-16. Figure 12-16. B inding the grid to the data sour ce CHAPTER 12 ■ AJAX EXTENSIONS FOR ASP.NET 297 9594CH12.qxd 1/22/08 10:59 AM Page 297 [...]... ScriptManager control and how it can be used to link your server and client applications neatly It enables ASP.NET AJAX applications to work within the browser, along with its partner control, the ScriptManagerProxy You’ll see how to deliver custom scripts to the browser, how to manage partial page rendering, and how to access web services directly from script You’ll build on this to look at how Ajax applications... only to those in the Administrator role (see Figures 13-11 and 13-12) 321 9594CH13.qxd 322 2/7/ 08 9:42 AM Page 322 CHAPTER 13 s AJAX SCRIPTS AND SERVICES Figure 13-11 Denying access to the AdminFolder directory Figure 13-12 Providing access to the Administrator role 9594CH13.qxd 2/7/ 08 9:42 AM Page 323 CHAPTER 13 s AJAX SCRIPTS AND SERVICES Finally, you can inspect or change your access rules from. .. Using Ajax with Web Services Some other useful technologies that come with the ASP.NET AJAX extensions are the ability to develop a web service that provides a JavaScript proxy, and client-side libraries that allow you to reference and use this proxy directly from the browser This is very useful for 9594CH12.qxd 1/22/ 08 10:59 AM Page 301 CHAPTER 12 s AJAX EXTENSIONS FOR ASP.NET developing... [ScriptService] In order to do this, you’ll need to add a using reference to the System .Web. Script.Services namespace using System; using System .Web; using System .Web. Services; using System .Web. Services.Protocols; using System .Web. Script.Services; [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]... facility to call In addition to accessing web services, ASP NET 2.0 forms authentication and profile services directly from JavaScript This ASP 9594CH13.qxd 2/7/ 08 9:42 AM Page 315 CHAPTER 13 s AJAX SCRIPTS AND SERVICES allows you to continue presenting these services to your users without requiring nonAjax full page refreshes Using them is very straightforward, and the ScriptManager control is used to manage... containing text to indicate which folder they are in should suffice Next, go to the Web Site menu in Visual Studio and select ASP.NET Configuration The ASP NET configuration utility will load in the browser (see Figure 13-3) Figure 13-3 Web Site Administration Tool 9594CH13.qxd 2/7/ 08 9:42 AM Page 317 CHAPTER 13 s AJAX SCRIPTS AND SERVICES This tool allows you to configure security, membership, and profiles,... Page 3 18 CHAPTER 13 s AJAX SCRIPTS AND SERVICES Figure 13-5 Configuring the authentication type To use forms authentication, you specify that your users are from the Internet, and to use Windows authentication, you specify that they are coming from a local network In this case, choose From the internet.” Once you’ve done this, click the Back button to return to the security administration screen, and. .. 3 08 1/22/ 08 10:59 AM Page 3 08 CHAPTER 12 s AJAX EXTENSIONS FOR ASP.NET Summary In this chapter, you were introduced to the ASP.NET extensions that allow you to build AJAX applications easily using your familiar tools and skills These extensions make Ajax applications a lot easier to write, as in many cases they emit the requisite Ajax code on your behalf, without you needing to explicitly code against... You took a look at some examples of building new Ajax applications using Visual Studio, as well as how straightforward it is to amend existing ASP.NET applications for a better user experience using these tools Finally, you looked at one of the more useful facets of ASP NET AJAX the facility to build a web service that exposes a JavaScript proxy, and how to consume this proxy, allowing web services to. .. how to create a simple site that uses membership, authentication, and roles, and how ASP NET and Visual Studio 2005 enable this for you You’ll then take what you’ve learned in this section to the next, where you will access the membership and profile data directly from JavaScript using your Ajax code Step 1: Creating a New Web Site Application NET AJAX enabled web site in Visual Studio 2005 Use To get . 1/22/ 08 10:59 AM Page 288 Migrating ASP. NET to AJAX One of the nicest things about ASP. NET AJAX is the fact that the UpdatePanel control can be used to add AJAX functionality to an existing ASP. NET. the AJAX libraries. A good shortcut is to create a new ASP. NET AJAX application and copy the information from its Web. config file. Let’s put this together now. First, create a new web form and. freely downloadable from http:/ /asp. net/ ajax/ . The next step is to build a page that consumes this web service. To do this, add a new ASPX page to your solution, and call it CountryCode.aspx. Add a