请帮我写一个C# webforms前端使用bootstrap table加ajax调用一般处理程序，从Oracle数据库获取数据，显示一个包含图片的商品列表
时间: 2024-03-05 12:47:53 浏览: 82
好的，以下是一个示例代码：
前端代码（HTML/C# WebForms）：
```html
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- 引入 Bootstrap 和 jQuery -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- 引入 Bootstrap Table -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
$(function () {
// 初始化表格
$('#table').bootstrapTable({
url: 'GetData.ashx', // 调用一般处理程序获取数据
method: 'post',
queryParams: function (params) {
return {
limit: params.limit, // 每页显示条数
offset: params.offset // 当前页码
}
},
pagination: true, // 开启分页
sidePagination: 'server', // 服务器端分页
pageNumber: 1, // 初始页码
pageSize: 10, // 初始每页显示条数
pageList: [10, 20, 50, 100], // 可选每页显示条数
columns: [
{
field: 'id',
title: '商品ID'
},
{
field: 'name',
title: '商品名称'
},
{
field: 'price',
title: '商品价格'
},
{
field: 'image',
title: '商品图片',
formatter: function (value, row, index) { // 自定义格式化函数
return '<img src="' + value + '" style="max-width: 100%; max-height: 100px;" />';
}
}
]
});
});
</script>
</head>
<body>
<table id="table"></table>
</body>
</html>
```
后端代码（C# 一般处理程序）：
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Oracle.ManagedDataAccess.Client;
using Newtonsoft.Json;
namespace WebApplication1
{
/// <summary>
/// GetData 的摘要说明
/// </summary>
public class GetData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// 获取请求参数
int limit = int.Parse(context.Request.Form["limit"]); // 每页显示条数
int offset = int.Parse(context.Request.Form["offset"]); // 当前页码
// 连接 Oracle 数据库
string connStr = "Data Source=(DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=localhost)(PORT=1521)))(CONNECT_DATA=(SERVICE_NAME=ORCL)));User Id=scott;Password=tiger;";
using (OracleConnection conn = new OracleConnection(connStr))
{
conn.Open();
// 查询商品数据
string sql = "SELECT * FROM products ORDER BY id OFFSET :offset ROWS FETCH NEXT :limit ROWS ONLY";
using (OracleCommand cmd = new OracleCommand(sql, conn))
{
cmd.Parameters.Add(new OracleParameter(":offset", offset));
cmd.Parameters.Add(new OracleParameter(":limit", limit));
using (OracleDataReader reader = cmd.ExecuteReader())
{
// 将查询结果转换为 JSON 格式的字符串
List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
while (reader.Read())
{
Dictionary<string, object> dict = new Dictionary<string, object>();
dict.Add("id", reader.GetInt32(0));
dict.Add("name", reader.GetString(1));
dict.Add("price", reader.GetDecimal(2));
dict.Add("image", reader.GetString(3));
list.Add(dict);
}
string json = JsonConvert.SerializeObject(list);
// 返回 JSON 格式的字符串
context.Response.ContentType = "application/json";
context.Response.Write(json);
}
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
```
说明：
1. 前端使用了 Bootstrap 和 jQuery，以及 Bootstrap Table 插件，其中 `#table` 是一个空的 `<table>` 元素，用于显示商品列表。
2. 前端通过 Ajax 调用一般处理程序 `GetData.ashx`，传递了 `limit` 和 `offset` 参数，表示每页显示条数和当前页码。
3. 一般处理程序 `GetData.ashx` 会连接 Oracle 数据库，查询商品数据，并将查询结果转换为 JSON 格式的字符串，最终返回给前端。
4. 前端通过 Bootstrap Table 插件，将 JSON 格式的字符串渲染成表格，并支持分页、排序等功能。其中 `columns` 属性指定了表格的列，其中包含一个自定义的 `formatter` 函数，用于将商品图片显示为图片元素。
阅读全文
相关推荐
最新推荐
bootstrapTable+ajax加载数据 refresh更新数据
接下来，我们定义了 BootstrapTable 的配置对象，包括搜索、分页、每页显示的行数等选项，并设置了一个自定义的 AJAX 函数来获取数据： ```javascript var $dataTableHot = $("#dataTable table").bootstrapTable({...
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
在Web开发中，Bootstrap Table是一种常用的前端组件，用于展示数据并提供交互性。它结合了Bootstrap框架的样式和JavaScript插件的功能，使表格更具吸引力和实用性。本篇将详细介绍如何在Bootstrap Table中实现复选框...
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Bootstrap进度条与AJAX后端数据传递结合使用是Web开发中常见的技术结合，通过Bootstrap进度条展示数据加载的进度，提高用户体验，AJAX技术则可以实现在页面不刷新的情况下与服务器进行数据交互。本文将详细介绍...
Bootstrap table表格初始化表格数据的方法
Bootstrap Table 是一个流行的前端组件，用于创建美观、响应式的表格。在本文中，我们将深入探讨如何初始化Bootstrap Table的表格数据，以及与之相关的配置选项和方法。 首先，让我们了解基本的HTML结构。在...
bootstrap table动态加载数据示例代码
在这个脚本中，我们使用了 jQuery 的 AJAX 方法来发送 POST 请求，获取服务器端的数据，然后将其转换为 JSON 数据，并将其作为 Bootstrap Table 的数据源。同时，我们还使用了 Bootstrap Table 的 destroy 方法来...
Elasticsearch核心改进：实现Translog与索引线程分离
资源摘要信息:"Elasticsearch是一个基于Lucene构建的开源搜索引擎。它提供了一个分布式多用户能力的全文搜索引擎，基于RESTful web接口。Elasticsearch是用Java语言开发的，并作为Apache许可条款下的开源项目发布，是当前流行的企业级搜索引擎。设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。"
"Elasticsearch的索引线程是处理索引操作的重要部分，负责处理数据的写入、更新和删除等操作。但是，在处理大量数据和高并发请求时，如果索引线程处理速度过慢，就会导致数据处理的延迟，影响整体性能。因此，Elasticsearch采用了事务日志（translog）机制来提高索引操作的效率和可靠性。"
"Elasticsearch的事务日志（translog）是一种持久化存储机制，用于记录所有未被持久化到分片中的索引操作。在发生故障或系统崩溃时，事务日志可以确保所有索引操作不会丢失，保证数据的完整性。每个分片都有自己的事务日志文件。"
"在Elasticsearch的早期版本中，事务日志的操作和索引线程的操作是在同一个线程中完成的，这可能会导致性能瓶颈。为了解决这个问题，Elasticsearch将事务日志的操作从索引线程中分离出去，使得索引线程可以专注于数据的索引操作，而事务日志的操作可以独立地进行。这样可以大大提高了Elasticsearch的索引性能。"
"但是，事务日志的操作是独立于索引操作的，这就需要保证事务日志的操作不会影响到索引操作的性能。因此，在将事务日志从索引线程分离出去的同时，Elasticsearch也引入了一些优化策略，比如批量写入事务日志，减少磁盘I/O操作，以及优化事务日志的数据结构，提高读写效率等。"
"需要注意的是，虽然事务日志的分离可以提高索引操作的性能，但是也会增加系统的复杂度和维护难度。因此，开发者在使用这个功能时，需要充分理解其原理和影响，才能确保系统的稳定运行。"
"此外，由于这个功能还处于测试和学习阶段，尚未被广泛应用于生产环境，所以开发者在使用时需要谨慎，避免对生产环境造成影响。"
"总的来说，Elasticsearch的事务日志的分离是一个重要的优化，可以大大提升索引操作的性能，但是在使用时也需要充分考虑其带来的影响，才能确保系统的稳定运行。"
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
病房呼叫系统设计基础：7个关键架构策略让你一步入门
# 摘要
本文对病房呼叫系统进行了深入的概述、需求分析、架构设计、功能实现以及实践应用案例的探讨。通过分析系统架构的重要性、设计原则、模块划分和数据流，确保了系统的高效运行和优化。本文进一步探讨了呼叫信号传输技术、显示与反馈机制、系统安全性与可靠性设计，并分析了系统部署环境、安装调试流程和维护升级策略。最后，文章展望了病房呼叫系统的未来发展趋势，包括智能化、技术融合以及法规遵从与伦理考量，并
Selenium如何获取Shadow DOM下的元素属性？
在Selenium中，获取Shadow DOM下的元素属性通常涉及到两步：首先找到元素，然后访问它的属性。由于Shadow DOM元素默认是不可见的（对于非JavaScript开发者），所以我们需要用JavaScript脚本来获取其内容。
下面是一个示例，展示如何通过Selenium的`execute_script`函数获取Shadow DOM元素的属性：
```python
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from sel
分享个人Vim与Git配置文件管理经验
资源摘要信息:"conffiles:我的vim和git配置文件"
在给定的文件信息中，我们可以梳理出一些关键知识点，这些知识点主要涉及到了Vim编辑器和Git版本控制系统，同时涉及到了Linux环境下的一些文件操作知识。
首先，文件标题提到了"conffiles"，这通常是指配置文件（configuration files）的缩写。配置文件是软件运行时用于读取用户设置或其他运行参数的文件，它们允许软件按照用户的特定需求进行工作。在本例中，这些配置文件是与Vim编辑器和Git版本控制系统相关的。
Vim是一种流行的文本编辑器，是UNIX系统中vi编辑器的增强版本。Vim不仅支持代码编辑，还支持插件扩展、多种模式（命令模式、插入模式、视觉模式等）和高度可定制化。在这个上下文中，"我的vim"可能指的是使用者为Vim定制的一套配置文件，这些配置文件可能包含键位映射、颜色主题、插件设置、用户界面布局和其他个性化选项。
Git是一个版本控制系统，用于跟踪计算机文件的更改和协作。Git是分布式版本控制，这意味着每个开发者都有一个包含完整项目历史的仓库副本。Git常用于代码的版本控制管理，它允许用户回滚到之前的版本、合并来自不同贡献者的代码，并且有效地管理代码变更。在这个资源中，"git conffiles"可能表示与Git用户相关的配置文件，这可能包括用户凭证、代理设置、别名以及其他一些全局Git配置选项。
描述部分提到了使用者之前使用的编辑器是Vim，但现在转向了Emacs。尽管如此，该用户仍然保留了以前的Vim配置文件。接着，描述中提到了一个安装脚本命令"sh ./.vim/install.sh"。这是一个shell脚本，通常用于自动化安装或配置过程。在这里，这个脚本可能用于创建符号链接（symbolic links），将旧的Vim配置文件链接到当前使用的Emacs配置文件夹中，使用户能够继续使用他们熟悉且习惯的Vim配置。
标签"Vimscript"表明这是一个与Vim脚本相关的资源，Vim脚本是一种专门用于自定义和扩展Vim功能的编程语言。Vimscript可以用于编写宏、自定义函数、插件等。
最后，文件名称列表"conffiles-master"可能表明这个压缩包文件包含了一系列的主配置文件。在Git版本控制的术语中，"master"（现在通常称为"main"）分支是项目仓库的默认分支。这暗示了这些配置文件可能是该用户项目的主配置文件，这些配置文件被包含在名为"conffiles-master"的压缩包中。
综上所述，这个资源可能是一个集合了Vim编辑器和Git版本控制系统的个人配置文件的压缩包，附带一个用于符号链接旧Vim配置的安装脚本，它能够帮助用户在转向其他工具时仍然能够使用之前的个性化设置。这个资源对于想要了解如何管理和迁移配置文件的用户具有一定的参考价值。