ExtJS .net分页例子

### ExtJS .Net 分页示例详解 #### 标题：ExtJS .Net分页例子 根据提供的标题“ExtJS .Net分页例子”，本文将详细介绍如何在.NET平台下使用ExtJS实现数据分页功能。ExtJS是一款强大的JavaScript库，用于构建复杂的前端应用，而.NET则是微软提供的一套开发框架，常用于服务器端开发。两者结合可以创建出高效且用户友好的Web应用程序。 #### 描述：ExtJS .Net分页例子 在描述部分，虽然给出了一段与标题不完全相关的代码片段（关于数据库连接和更新操作），但我们可以从中推测该示例可能涉及到了与数据库交互的部分。因此，下面将围绕如何使用ExtJS结合.NET进行分页展示数据库中的数据展开讨论。 #### 标签：ExtJS .Net分页例子 通过标签可以看出，本文主要关注的是如何使用ExtJS与.NET相结合来实现分页功能。接下来，我们将详细探讨这一主题。 #### 部分内容 在给定的部分内容中，可以看到一个完整的ASP.NET页面，包含了ExtJS组件的使用示例。这部分内容虽然没有直接涉及分页，但我们可以从中提取一些关键信息并进行扩展讲解。 ### 实现步骤 #### 步骤一：设置项目环境 1. **创建一个新的ASP.NET Web Forms项目**： - 打开Visual Studio。 - 选择“新建”->“项目”。 - 在“新建项目”对话框中选择“ASP.NET Web应用程序”。 - 选择“Web Forms”模板创建项目。 2. **安装ExtJS**： - 可以通过NuGet包管理器安装ExtJS。 - 或者直接下载ExtJS库并将其添加到项目的`Scripts`文件夹中。 3. **配置数据库连接**： - 在`web.config`文件中添加数据库连接字符串： ```xml <connectionStrings> <add name="ConnectionString" connectionString="Data Source=(local);Initial Catalog=YourDatabase;Integrated Security=True" providerName="System.Data.SqlClient" /> </connectionStrings> ``` #### 步骤二：编写后端代码 1. **创建数据访问层**： - 使用ADO.NET编写获取分页数据的方法。 - 示例代码如下： ```csharp public List<Movie> GetMovies(int pageIndex, int pageSize) { using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString)) { con.Open(); SqlCommand cmd = new SqlCommand("SELECT * FROM TB_MOVIE ORDER BY MovieTitle OFFSET @Offset ROWS FETCH NEXT @PageSize ROWS ONLY", con); cmd.Parameters.AddWithValue("@Offset", (pageIndex - 1) * pageSize); cmd.Parameters.AddWithValue("@PageSize", pageSize); SqlDataReader reader = cmd.ExecuteReader(); List<Movie> movies = new List<Movie>(); while (reader.Read()) { Movie movie = new Movie() { ID_MOVIE = Convert.ToInt32(reader["ID_MOVIE"]), MovieTitle = reader["MovieTitle"].ToString(), Votes = Convert.ToInt32(reader["Votes"]), Rating = Convert.ToDecimal(reader["Rating"]), Year = Convert.ToInt32(reader["Year"]), Genre = reader["Genre"].ToString() }; movies.Add(movie); } return movies; } } ``` 2. **编写分页逻辑**： - 创建一个处理分页请求的方法，例如`GetPagedMovies`。 - 方法中调用`GetMovies`方法获取数据，并返回JSON格式的结果。 #### 步骤三：编写前端代码 1. **配置ExtJS Grid**： - 在页面上添加ExtJS Grid组件。 - 设置Grid的列定义、分页样式等。 ```xml <cc1:YuiGrid ID="YuiGrid1" runat="server" EnableRowSorting="true" Width="550px" EnablePaging="true" PagingStyle="NavBar" EnableEdit="true" OnCellEdited="YuiGrid1_CellEdited" SelectMultiple="true"> ``` 2. **绑定数据源**： - 使用AJAX从服务器端获取分页数据。 - 将数据绑定到Grid中。 3. **添加分页控件**： - 在Grid底部添加分页导航栏。 ```xml <PagingToolbar ID="PagingToolbar1" runat="server" DisplayInfo="true" DisplayMsg="Display {0} - {1} of {2}" EmptyMsg="No records to display" /> ``` ### 总结 通过以上步骤，我们可以在.NET环境下使用ExtJS实现数据库数据的分页展示。这种方法不仅能够提高用户体验，还能够有效减少服务器的压力。同时，这种结合使用前端和后端技术的方式也为开发者提供了更多的灵活性和可能性。希望本篇介绍能够帮助你在实际项目中更好地运用这些技术。