Ext.Net学习笔记02:Ext.Net用法概览

简介:

这两天越来越觉得Ext.Net很强大,如果运用熟练可以极大的提高编程效率。如果你也要学习Ext.Net,推荐你看一下《Ext.Net Web 应用程序开发教程》。

上一篇介绍了如何在ASP.NET WebForm中使用Ext.Net,这一篇将介绍我今天的学习心得,看看Ext.Net的概览。

Ext.Net与ExtJS代码比较

上一篇中我们创建了一个使用Ext.Net创建了一个window窗口,代码非常简单:

<ext:Window runat="server"
    ID="win"
    Title="示例窗口"
    Width="300"
    Height="200"
    AutoShow="true">
</ext:Window>

如果我们使用ExtJS代码来创建这个窗口,代码会是什么样的呢?请看下面:

Ext.create("Ext.window.Window", {
    id:"win2",
    title: "示例窗口2",
    height: 200,
    width: 300,
    autoShow: true
});

看这两段代码是不是很像,Ext.Net只是将ExtJS的配置属性进行了封装,作为空间的属性,可以在Visual Studio中进行非常友好的智能提示,效率提升不止一倍啊。

另外,Ext.Net还支持控件的嵌套定义,跟ExtJS中的items配置项、buttons配置项一样,请看下面的代码:

<ext:Window runat="server"
    ID="win"
    Title="示例窗口"
    Width="300"
    Height="200"
    Layout="FitLayout"
    AutoShow="true">
    <Items>
        <ext:FormPanel runat="server" ID="extForm" BodyPadding="5">
            <Items>
                <ext:TextField runat="server" ID="txtName" FieldLabel="姓名"></ext:TextField>
                <ext:NumberField runat="server" ID="txtAge" FieldLabel="年龄"></ext:NumberField>
            </Items>
            <Buttons>
                <ext:Button runat="server" ID="btnSave"
                    Icon="DatabaseSave" Text="保存">
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </Items>
</ext:Window>

这仍然是我们的window,新的效果如下:

image

很酷吧,接下来我们一起看看它的事件机制。

Ext.Net的事件处理

Ext.Net中的事件分为客户端事件和服务器端事件,客户端事件需要页面中JS来处理,服务器端事件则会无刷新的提交给服务器,在服务器处理完成并将结果显示在页面中。

拿我们上面窗口中的保存按钮为例,我们来介绍一下如何处理客户端事件。

客户端事件处理

首先,我们来添加一个客户端的单击事件:

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <Listeners>
        <Click Handler="Ext.MessageBox.alert('提示', '保存按钮被单击')" />
    </Listeners>
</ext:Button>

跟ExtJS中的写法一样,使用listeners来添加事件。当我们在Listeners标签中输入左尖括号以后,visual studio 会提示我们所有可用的事件:

image

这种编程方式实在是太快了,效率完全可以达到ExtJS熟练的水平(题外话,套用一句广告词:根本停不下来……)。

Handler 属性保存一段JS代码,如果要添加一个处理方法,则需要使用Fn属性:

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <Listeners>
        <Click Fn="fnSave" />
    </Listeners>
</ext:Button>

注意,使用Fn属性的时候,需要确保我们的页面中已经定义了fnSave方法:

function fnSave() {
    //此处添加保存的处理逻辑
    Ext.MessageBox.alert('提示', '保存按钮被单击')
}

此处只使用了click事件,完整是事件列表可以参考ExtJS API文档。

服务器端事件处理

既然使用了Ext.Net服务器控件,恐怕大家更希望使用服务器端事件吧。Ext.Net服务器事件需要在DirectEvents中定义,它是Ext.Net独有的。DirectEvents将被回发到服务器进行处理,并将处理结果展示在页面中(如果有更新页面的话)。

来看一下DirectEvents

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <DirectEvents>
        <Click OnEvent="btnSave_DirectClick"></Click>
    </DirectEvents>
</ext:Button>

对应的服务器处理方法如下:

protected void btnSave_DirectClick(object sender, DirectEventArgs e)
{
    X.MessageBox.Alert("提示", "保存按钮被单击").Show();
}

如果我们需要在执行服务器端处理的时候显示遮罩层,可以在Click中添加配置节点:

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <DirectEvents>
        <Click OnEvent="btnSave_DirectClick">
            <

EventMask ShowMask="true" Msg

="正在加载..." />
        </Click>
    </DirectEvents>
</ext:Button>

另外,Ext.Net Direct Events还可以传递自定义参数:

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <DirectEvents>
        <Click OnEvent="btnSave_DirectClick">
            <ExtraParams>
                <

ext:Parameter Name="param1" Value

="自定义参数值" />
            </ExtraParams>
            <EventMask ShowMask="true" Msg="正在加载..." />
        </Click>
    </DirectEvents>
</ext:Button>

在服务器端的处理方法中,我们可以轻易的获取到这个参数值:

protected void btnSave_DirectClick(object sender, DirectEventArgs e)
{
    

string param1 = e.ExtraParams["param1"

];
    X.MessageBox.Alert("提示", "保存按钮被单击,传入的参数值:" + param1).Show();
}

Ext.Net中的DirectEvents所支持的事件类型同样可以参考ExtJS的API文档

另外Ext.Net还有一个自定义的MessageBus机制,今天还没有吃透,明天继续!




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/3551463.html,如需转载请自行联系原作者

相关文章
|
5月前
|
存储 开发框架 NoSQL
ASP.NET WEB——项目中Cookie与Session的用法
ASP.NET WEB——项目中Cookie与Session的用法
83 0
|
26天前
|
数据采集 JSON API
.NET 3.5 中 HttpWebRequest 的核心用法及应用
【9月更文挑战第7天】在.NET 3.5环境下,HttpWebRequest 类是处理HTTP请求的一个核心组件,它封装了HTTP协议的细节,使得开发者可以方便地发送HTTP请求并接收响应。本文将详细介绍HttpWebRequest的核心用法及其实战应用。
59 6
|
2月前
|
开发框架 前端开发 .NET
闲话 ASP.NET Core 数据校验(二):FluentValidation 基本用法
闲话 ASP.NET Core 数据校验(二):FluentValidation 基本用法
|
3月前
|
人工智能 开发框架 Devops
.NET技术概览:** 本文探讨了.NET的核心特性,包括多语言支持、Common Language Runtime、丰富的类库和跨平台能力,强调其在企业级、Web、移动及游戏开发中的应用。
【7月更文挑战第4天】.NET技术概览:** 本文探讨了.NET的核心特性,包括多语言支持、Common Language Runtime、丰富的类库和跨平台能力,强调其在企业级、Web、移动及游戏开发中的应用。此外,讨论了.NET如何通过性能优化、DevOps集成、AI与ML支持以及开源策略应对未来挑战,为开发者提供强大工具,共创软件开发新篇章。
41 3
|
3月前
|
人工智能 前端开发 开发工具
**.NET技术概览:** 本文探讨.NET的核心优势
【7月更文挑战第4天】**.NET技术概览:** 本文探讨了.NET的核心优势,如统一开发平台、Visual Studio的强大工具、跨平台能力及丰富的类库。它在现代应用中的创新应用包括企业级、Web、移动、云服务和游戏开发。同时,面对性能优化、容器化、AI集成等挑战,.NET正寻求未来机遇,通过开源社区持续发展。开发者应抓住这些趋势,利用.NET推动软件创新。
49 1
|
4月前
|
开发框架 .NET API
.NET 体系概览图集 - 2024 最全总结
.NET Core 是一个免费、跨平台、开源的开发平台,用于一站式构建不同类型的应用程序。 .NET Core 是以 .NET Framework 为基础,但是经过重新设计、实现的的新一代框架,实现了原 .NET Framework 中的几乎所有功能,核心特点就是开源、跨平台。
225 0
.NET 体系概览图集 - 2024 最全总结
|
5月前
|
SQL 开发框架 前端开发
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
ASP.NET WEB项目中GridView与Repeater数据绑定控件的用法
76 0
|
5月前
|
并行计算 算法 调度
(学习笔记)U-net++代码解读
python: 3.10 U-net++结构图
295 0
|
开发框架 前端开发 .NET
ASP.NET Core 核心特性学习笔记「下」
ASP.NET Core 核心特性学习笔记「下」
|
开发框架 前端开发 中间件
ASP.NET Core 核心特性学习笔记「上」
ASP.NET Core 核心特性学习笔记「上」