ASP.NET AJAX 4.0 Template Example

       写之前我想说句，真是简单。。前2天发布的ASP.NET AJAX 4.0有很多很酷的东西,写此文是示范其中的模板功能。这个例子的Source Code available for download。

或者在我的SkyDrive中下载。。。。。查看原文。

首先我们要下载microsoftajaxtemplates.js可从codeplex得到，并将其添加到我们的项目。 然后我们要通过scriptmanager添加一个引用到我们的网页。

<asp:ScriptManager runat="server" ID="sm" EnablePageMethods="true">
            <Scripts>
                <asp:ScriptReference Path="~/MicrosoftAjaxTemplates.js" />
            </Scripts>
  </asp:ScriptManager>

注意 ScriptManager 控件的 PageMethods 同样要启用：EnablePageMethods="true"。

然后我们添加一个按钮，点击将从服务器得到数据，Template 使用一个DIV显示数据...

<input type="button" id="btn" value="Show Data" onclick="exec()" />
 <div id="myTemplate" class="sys-template">
            <h3>
                {{ Title }}</h3>
            Name:
            <input type="text" value="{{ FirstName + ' ' + LastName}}" />&nbsp; Date:
            <input type="text" value="{{ DateNow.format('dd/MM/yyyy  hh:mm:ss') }}" />&nbsp;
            <!--* if (BirthDate) { *-->
            BirthDate: &nbsp;<input type="text" value="{{ BirthDate.format('dd/MM/yyyy') }}" />
            <!--* } *-->
            <!--* if (!BirthDate) { *-->
            BirthDate is unkown
            <!--* } *-->
 </div>
 <div id="data">
 </div>

然后我们在代码隐藏文件添加一个WebMethod和一个自定义类与4属性。因为该这种方法将被用于ScriptManager 控件pagemethods ，所以它必须是Public和静态的。

[WebMethod]
    public static List<Info> GetVal()
    {
        List<Info> l = new List<Info>();
        l.Add(new Info { BirthDate = DateTime.Parse("2/6/2008"), FirstName = "John", LastName = "Katsiotis", DateNow = DateTime.Now, Title = "Cool ASP.NET Developer" });
        l.Add(new Info { BirthDate = null, FirstName = "Foo", LastName = "Bar", DateNow = DateTime.Now, Title = "Common Name Example" });
        System.Threading.Thread.Sleep(2500);
        return l;
    }
    public class Info
    {
        public DateTime? BirthDate { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public DateTime DateNow { get; set; }
        public string Title { get; set; }
    }

在我们的getval方法，我们添加了两个实例，并返回了数据。 并且我们还创建一个延迟2.5秒的计划。

最后，我们在页面文件上添加AJAX客户端 JavaScript，如下...

 <script type="text/javascript">
    function initTemplateValues(_Title,_FirstName,_LastName,_DateNow,_BirthDate)
    {
        var t = new Sys.Preview.UI.Template.getTemplate($get("myTemplate"));
        t.createInstance($get("data"),
        {
            Title: _Title,
            FirstName: _FirstName,
            LastName: _LastName,
            DateNow: _DateNow,
            BirthDate: _BirthDate
        });
    }
    function exec()
    {
        $get('data').innerHTML='Please wait...';
        PageMethods.GetVal(onComplete,onError);
    }
    function onComplete(args)
    {
        $get('data').innerHTML=''
        for(var i=0;i<args.length;i++)
        {
            initTemplateValues(args[i].Title,args[i].FirstName,args[i].LastName,args[i].DateNow,args[i].BirthDate);
        }
    }
    function onError(args)
    {
        $get('data').innerHTML=args;
    }
    </script>

首先，我们有Exec的（ ）调用服务器端方法getval 。然后，通过oncomplete方法foreach循环在args （ args代表代码文件定义的Info类信息 ） ，

（ 不好翻译啊： we create an area that uses the template defined in our aspx page and we add that template to a div with id results.我们创建一块模板，

     并把模板的结果显示在DIV中。 ）

 

很简单你觉得呢？

享受...!!!（ 呵呵，老外都喜欢感叹这句话。 ）