中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

ASP.NET AJAX 4.0 Template Example - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > 其他框架 > ASP.NET AJAX 4.0 Template Example

ASP.NET AJAX 4.0 Template Example

2008-08-26    文章来源:互联网    浏览次数:
上个月发布的ASP.NET AJAX 4.0有很多很酷的东西,写此文是示范其中的模板功能。这个例子的Source Code available for download。

首先我们要下载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" nclick="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中。 )

很简单你觉得呢?

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部