asp.net中使用extjs

ASP.NET 是一个由微软开发的用于构建 Web 应用程序的框架，而 Ext JS 是一个用于构建富客户端应用程序的 JavaScript 框架。在 ASP.NET 中使用 Ext JS 可以创建具有丰富交互性和动态性的前端界面。

基础概念

ASP.NET:

是一个服务器端 Web 应用程序框架。
支持多种编程语言，如 C# 和 VB.NET。
提供了一系列的控件和组件来简化 Web 开发。

Ext JS:

是一个纯 JavaScript 框架，用于构建复杂的 Web 应用程序。
提供了一套丰富的 UI 组件和数据管理功能。
支持 MVC 或 MVVM 架构模式。

优势

分离关注点: ASP.NET 处理服务器端逻辑，而 Ext JS 处理客户端交互，使得代码更加模块化和易于维护。
丰富的 UI 组件: Ext JS 提供了大量的预构建组件，可以快速开发出专业的用户界面。
性能优化: Ext JS 的组件化结构和数据绑定机制可以提高应用程序的性能和响应速度。
跨平台兼容性: Ext JS 应用程序可以在任何支持 JavaScript 的浏览器上运行。

类型

MVC 架构: 将应用程序分为模型（Model）、视图（View）和控制器（Controller）。
MVVM 架构: 将应用程序分为模型（Model）、视图（View）和视图模型（ViewModel）。

应用场景

企业级应用: 如 CRM 系统、ERP 系统等。
数据密集型应用: 如仪表盘、报表系统等。
复杂交互界面: 如在线编辑器、游戏界面等。

示例代码

以下是一个简单的示例，展示如何在 ASP.NET 中使用 Ext JS 创建一个基本的网格（Grid）组件。

ASP.NET 后端代码（C#）

public class ProductsController : Controller
{
    public ActionResult GetProducts()
    {
        var products = new List<Product>
        {
            new Product { Id = 1, Name = "Product A", Price = 100 },
            new Product { Id = 2, Name = "Product B", Price = 200 }
        };

        return Json(products, JsonRequestBehavior.AllowGet);
    }
}

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Ext JS 前端代码

<!DOCTYPE html>
<html>
<head>
    <title>Ext JS Grid Example</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.define('Product', {
                extend: 'Ext.data.Model',
                fields: [
                    { name: 'Id', type: 'int' },
                    { name: 'Name', type: 'string' },
                    { name: 'Price', type: 'float' }
                ]
            });

            var store = Ext.create('Ext.data.Store', {
                model: 'Product',
                proxy: {
                    type: 'ajax',
                    url: '/Products/GetProducts',
                    reader: {
                        type: 'json',
                        rootProperty: ''
                    }
                },
                autoLoad: true
            });

            Ext.create('Ext.grid.Panel', {
                title: 'Products Grid',
                store: store,
                columns: [
                    { text: 'ID', dataIndex: 'Id' },
                    { text: 'Name', dataIndex: 'Name' },
                    { text: 'Price', dataIndex: 'Price', renderer: Ext.util.Format.usMoney }
                ],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
        });
    </script>
</head>
<body></body>
</html>