【发布时间】：2012-05-08 00:14:36
【问题描述】：
我在我的应用程序中使用Asp.Net/C#，我有一个要求，我需要在jqGrid 中显示数据。数据应该来自Users 表。这是我第一次使用jqGrid，任何人都可以帮助我从jqGrid 和Web Forms 开始。任何示例或链接将不胜感激。
谢谢。
【问题讨论】：
【发布时间】：2012-05-08 00:14:36
【问题描述】：
请点击以下链接。
http://blog.prabir.me/post/Using-jqGrid-with-ASPNET-Web-Forms-e28093-Part-I.aspx
http://forums.asp.net/t/1638413.aspx/1
http://wiki.asp.net/page.aspx/1774/jqgrid-and-aspnet-web-forms/
http://praveen1305.blogspot.co.uk/2009/05/jqgrid-with-asp-net-web-forms.html
Using jqGrid in ASP.NET WebForms
希望对你有帮助
【讨论】：
您可以在任何应用程序中只包含一个空的表格元素和网格底部的寻呼机的空 div
<table id="grid" ></table>
<div id="pager"></div>
然后你包括
<script type="text/javascript">
$(function () {
$("#grid").jqGrid({
url: 'someURLfromYourProject', // 'xxx.svc', 'xxx.asmx', 'xxx.ashx' ...
datatype: 'json',
pager: '#pager',
gridview: true,
height: 'auto',
//... other parameters
});
});
</script>
这将在运行时修改网格中的空表和 div。网格中的数据将从url 选项指定的 URL 中获取。
了解您可以非常轻松地将 WFC、ASMX Web 服务或 ASHX 处理程序集成到任何现有应用程序中，这一点很重要。您只需将新页面（在 ASP.NET 项目的解决方案资源管理器中选择“添加新项目”上下文菜单）添加到现有项目。这样，您将创建更独立于主要在 ASP.NET 应用程序中使用的技术的代码。如果您稍后决定将应用程序迁移到 ASP.NET MVC，您甚至可以不更改应用程序的 WFC ASMX Web 服务或 ASHX 处理程序部分。
在the answer 中，您会找到一些带有演示项目的 URL，您可以下载并玩一下。您可以将大部分代码从 ASP.NET MVC 示例（请参阅 here 和 here）移动到您的 WCF/ASMX/ASHX 代码中。
【讨论】：
-
非常感谢，会尝试一下，如果我有任何问题，我会尽快回复您，谢谢
-
@freebird：不客气！最重要的是，您只需在现有的 Web 应用程序中包含一些新组件，这些组件提供 jqGrid 可以使用的纯 JSON（或 XML）数据。因此，您可以在多种技术之间进行选择。如果使用哪一个对您来说并不重要，我建议您使用 WCF，因为从性能的角度来看它是最好的，并且它为您提供了最大的灵活性。例如，您可以添加到提供二进制数据（如 Excel 表）的 WCF 方法。对于 ASMX Web 服务，您不能这样做。
JQGRID 示例：-
从链接http://www.trirand.com/blog/?page_id=6下载所需的所有脚本文件
Design.aspx 我已经在 aspx 页面的正文部分定义了脚本。
我将此网格仅用于搜索功能，因此我禁用了编辑和删除功能
<script src="../JQGridReq/jquery-1.9.0.min.js"></script>
<script src="../JQGridReq/grid.locale-en.js"></script>
<link href="../JQGridReq/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<script src="../JQGridReq/jquery.jqGrid.js"></script>
<link href="../JQGridReq/ui.jqgrid.css" rel="stylesheet" />
<link href="../JQGridReq/themes/start/theme.css" rel="stylesheet" />
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
url: '../Handlers/JQGridHandler.ashx',
datatype: "json",
colNames: ['TableID', 'Region_ID', 'Region_Name', 'ActionDate', 'Field', 'OldValue', 'NewValue', 'TableName', 'Who','Comment'],
colModel: [
{ name: 'TableID', index: 'TableID', width: 50, stype: 'text' },
{ name: 'Region_ID', index: 'Region_ID', width: 50, stype: 'text', sortable: true, editable: false },
{ name: 'Region_Name', index: 'Region_Name', width: 100, editable: false },
{ name: 'ActionDate', index: 'ActionDate', width: 80, editable: false, formatter: "date" },
{ name: 'Field', index: 'Field', width: 100, align: "right", editable: false },
{ name: 'OldValue', index: 'OldValue', width: 100, align: "right", editable: false },
{ name: 'NewValue', index: 'NewValue', width: 100, align: "right", editable: false },
{ name: 'TableName', index: 'TableName', width: 100, sortable: true, editable: false },
{ name: 'Who', index: 'Who', width: 110, sortable: true, editable: false },
{ name: 'Comment', index: 'Comment', width: 110, sortable: true, editable: false }
],
rowNum: 20,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30,40,50],
pager: '#jQGridDemoPager',
sortname: 'TableID',
viewrecords: true,
sortorder: 'desc',
caption: "",
editurl: '../Handlers/JQGridHandler.ashx'
});
$('#jQGridDemo').jqGrid('navGrid', '#jQGridDemoPager',
{
//edit: true,
//add: true,
//del: true,
search: true,
searchtext: "Search"
//addtext: "Add",
//edittext: "Edit",
//deltext:"Delete"
},
{ //EDIT
// height: 300,
// width: 400,
// top: 50,
// left: 100,
// dataheight: 280,
closeOnEscape: true,//Closes the popup on pressing escape key
reloadAfterSubmit: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');//Reloads the grid after edit
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after edit
return [false, response.responseText]//Captures and displays the response text on th Edit window
}
},
//editData: {
// EmpId: function () {
// var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
// var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
// return value;
// }
//}
},
{
closeAfterAdd: true,//Closes the add window after add
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [true, '']
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')//Reloads the grid after Add
return [false, response.responseText]
}
}
},
{ //DELETE
closeOnEscape: true,
closeAfterDelete: true,
reloadAfterSubmit: true,
closeOnEscape: true,
drag: true,
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$("#jQGridDemo").trigger("reloadGrid", [{ current: true}]);
return [false, response.responseText]
}
else {
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid')
return [true, response.responseText]
}
},
//delData: {
// EmpId: function () {
// var sel_id = $('#jQGridDemo').jqGrid('getGridParam', 'selrow');
// var value = $('#jQGridDemo').jqGrid('getCell', sel_id, '_id');
// return value;
// }
//}
},
{//SEARCH
closeOnEscape: true
}
);
</script>
我通过右键单击项目创建了一个通用处理程序，并将新项目添加为通用处理程序并将其命名为 JQGridHandler.ashx，然后将其放置在名为 Handlers 的文件夹中以进行 ajax 调用。
JqGridHandler.ashx.cs:-
public class JQGridHandler : IHttpHandler
{
History myHistory = new History();
public void ProcessRequest(HttpContext context)
{
try {
List<HistoryDetails> myHistoryDetails = new List<HistoryDetails>();
myHistoryDetails = myHistory.GetAllHistoryDetails();
var jsonSerializer = new JavaScriptSerializer();
context.Response.Write(jsonSerializer.Serialize(myHistoryDetails));
}
catch(Exception ex)
{
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
History.aspx.cs:- 我正在创建一个名为 HistoryDetails 的通用类，它具有所有必需的属性。然后我调用业务 logic.GetallHistoryDetails() 使用存储过程从数据库中获取记录
public List<HistoryDetails> GetAllHistoryDetails()
{
List<HistoryDetails> myHistoryDetails = new List<HistoryDetails>();
try
{
myHistoryDetails = BusinessLogic.GetAllHistoryDetails(IdVal);
}
catch(Exception ex)
{
}
return myHistoryDetails;
}
参考资料：- https://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET
【讨论】：