Blog Moved ....

ScottCate.com

community

frenz

my book(s)

my products

Presenting AJAX Client Templates from ASP.NET v4 Preview

Tonight (Jan 13, 2008 5:30-8pm) at the Arizona.net User Group, I’ll be presenting AJAX client templates currently available in the ASP.NET v4 Preview hosted on CodePlex.

Below is a quick code sample to wet your appetite.

C# / Service – Not really relevant to the call, but it’s where the data comes from

   1: [WebMethod]
   2: public List<Product> GetProducts()
   3: {
   4:     return GetProductsByOrderId(0);;
   5: }
   6:  
   7: [WebMethod]
   8: public List<Product> GetProductsByOrderId(int orderId)
   9: {
  10:     var productList = new List<Product>();
  11:     using (var adapter = new ProductsTableAdapter())
  12:     {
  13:         Northwind.ProductsDataTable products = null;
  14:         products = orderId > 0 ? adapter.GetDataByProductId(orderId) : adapter.GetData();
  15:         
  16:         foreach (var row in products)
  17:         {
  18:             productList.Add(new Product() { 
  19:                 Name = row["ProductName"].ToString(), 
  20:                 Id = (int) row["ProductId"]
  21:             });
  22:         }
  23:     }
  24:     return productList;
  25: }

ASPX Page

   1: <%@ Page Title="" Language="C#" MasterPageFile="~/Common/WebSiteMaster.master" AutoEventWireup="true" CodeBehind="A_Templates.aspx.cs" Inherits="ScottCateAjax2008.Lesson10.A_Templates" %>  
   2: <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
   3:   
   4: <asp:ScriptManager id="SM1" runat="server">  
   5:     <Scripts>  
   6:         <asp:ScriptReference ScriptMode="Debug" Path="~/Common/Scripts/ASPNET4Preview3/MicrosoftAjaxTemplates.js"  />  
   7:         <asp:ScriptReference Path="~/Lesson10/A_Templates.aspx.js" />  
   8:     </Scripts>  
   9:     <Services>  
  10:         <asp:ServiceReference Path="~/Services/NorthwindService.asmx" />  
  11:     </Services>  
  12: </asp:ScriptManager>  
  13:     
  14:     <h1>ASP.NET 4.0 - Templates</h1>  
  15:   
  16:     <table id="products" border="1" class="sys-template">  
  17:         <tr>  
  18:             <td>{{ Id }}</td>  
  19:             <td>{{ Name }}</td>  
  20:         </tr>  
  21:     </table>  
  22:   
  23: </asp:Content>

JavaScript

   1: function pageLoad() {   
   2:     ScottCateAjax2008.Services.NorthwindService.GetProducts(goGetProducts_Callback, errorCallback);   
   3: }   
   4:   
   5: function goGetProducts_Callback(results) {   
   6:     var products = $create(Sys.UI.DataView, {}, {}, {}, $get("products"));   
   7:     products.set_data(results);   
   8: }   
   9:        
  10: function errorCallback(error) {   
  11:     alert(error);   
  12: }

Outcome

image

Posted: Jan 13 2009, 01:08 PM by scott cate | with 5 comment(s)
Filed under: , , ,

Comments

Bill Ramirez said:

One of the strange hard parts of working with ajax, jquery and now this technology is resolving the component ids on web user controls and master pages.

$get("products") is beatifull when placing the controls directly on the page, but breaks down when you need to factorize it to a user control and the id's include the whole path to the particular control.

Has anyone thought of adding functionality to account for nested controls?

P.S. I am aware of the clientId property, but this means adding code behind to generate and register javascript.

# January 13, 2009 9:41 PM

scott cate said:

All of the javascript that I wrote is optional. You can bind a client dataview using declarative code, so it can be easily added/set in a property editor.

It also means that server controls can render the output appropriately.

Think of this pseudo-code (this is just a sample from memory) ....

<div class="sys-template"

  uri="/services/thisData.svc"

  query="getThings">

 <div>{binding thingName}</div>

 <div>{binding thingDesc}</div>

 <div>{{ DateCreated }}</div>

</div>

# January 14, 2009 2:06 AM

Alex Sauceda said:

Bill, all the problems with the ClientID is going to be fixed with ASP.Net 4

Check this weblogs.asp.net/.../asp-net-4-0-clientid-overview.aspx

# January 14, 2009 8:59 PM

Shane said:

How would you bind to a "Select" element in the template?

# April 29, 2009 7:15 PM

Mark said:

Hi,

I have html and added conditional operators to it, but for some reason the "code:if" doesn't seem to evaluate and it return the element and ignores the conditional statement. anything i'm doing wrong?

code:

<table border="1" id="dvlstBody" class="sys-template">

       <tr code:if="$index == 0"><td style="background:#666666;">First Name</td> <td style="background:#666666;">Last Name</td></tr>

       <tr><td>{{ mFirstName }}</td><td>{{ mLastName }}</td></tr>

   </table>

# October 21, 2009 10:30 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)