将数据从 jqGrid 传递到 webmethod [英] passing data from jqGrid to webmethod
问题描述
这是我的 jqGrid 调用 web 方法
This is my jqGrid calling web method
$(document).ready(function () {
jQuery("#prodgrid").jqGrid({
url: 'product_brow.aspx/ProdGrid',
postData: {
ddlproductstatus: function() {
return $("#<%=ddlProductStatus.ClientID%>").val();
},
ddlproducttype: function() {
return $("#<%=ddlProductType.ClientID%>").val();
},
txtkeywordsearch: function() {
return $("#<%=txtKeywordSearch.ClientID%>").val();
},
hdnMerchantId: function() {
return $("#<%=hdnmerchantId.ClientID%>").val();
}
},
mtype: 'POST',
serializeEditData: function (postData) {
return JSON.stringify(postData);
} ,
colNames: ['Code', 'Title', 'Price', 'Product Group', 'Edit', 'Status'],
colModel: [
{ name: 'Code', index: 'Code', width: 15, align: 'center' },
{ name: 'Title', index: 'Title', width: 40, align: 'center' },
{ name: 'Price', index: 'Price', width: 55 },
{ name: 'Product Group', index: 'Product Group', width: 55 },
{ name: 'Edit', index: 'Edit', width: 40 },
{ name: 'Status', index: 'Status', width: 40}],
pager: '#prod_pager',
rowList: [10, 20, 30],
sortname: 'Code',
sortorder: 'desc',
rowNum: 10,
loadtext: "Loading....",
shrinkToFit: true,
multiselect: true,
emptyrecords: "No records to view",
width: x - 40,
height: 230,
rownumbers: true,
subGrid: true,
caption: 'Products'
// editurl: 'Departments.aspx'
});
jQuery("#prodgrid").jqGrid('navGrid', '#prod_pager',
{ edit: false, add: false, del: true, excel: true, search: false });
});
如您所见，我正在尝试使用这样的参数将数据从这里传递到 web 方法
as you can see im trying to pass data from here to web method with parameters like this
[WebMethod]
public static string ProdDetails(string ddlproductstatus,
string ddlproducttype,
string txtkeywordsearch,
string hdnMerchantId)
{
StringBuilder sbReturnJson = new StringBuilder();
string strReturnJson = string.Empty;
StringBuilder sbCell = new StringBuilder();
try
{
string sort = HttpContext.Current.Request.Form["sidx"].ToString();
string strSortDerection = HttpContext.Current.Request.Form["sord"].ToString();
int iPage = Convert.ToInt32(HttpContext.Current.Request.Form["page"]);//get the requested page
string strLimit = HttpContext.Current.Request.Form["rows"].ToString(); // get how many rows we want to have into the grid
string strStart = Convert.ToString(int.Parse(strLimit) * (iPage - 1));
string strEnd = Convert.ToString(int.Parse(strStart) + int.Parse(strLimit));
string pageNo = string.Empty;
ProductDal oProductDal = new ProductDal();
// bind data to gridview
System.Data.DataTable oDataTable;
if (txtkeywordsearch.Trim().Length == 0)
{
oDataTable = oProductDal.GetAllProductDtToDisplayTest(Convert.ToInt32(hdnMerchantId), ddlproducttype,
ddlproductstatus, iPage, Convert.ToInt32(strLimit));
}
else
{
oDataTable = oProductDal.GetAllProductDtToDisplayBySearchStringTest(Convert.ToInt32(hdnMerchantId), ddlproducttype,
ddlproductstatus, txtkeywordsearch.Trim(), iPage, Convert.ToInt32(strLimit));
}
// keep values in session to use in product detail page to retrieve records.
//Session["ProductType"] = ddlproducttype;
// Session["ProductStatus"] = ddlproductstatus;
if (txtkeywordsearch.Trim().Length != 0)
{
// Session["SearchKeyword"] = txtkeywordsearch;
}
// hlnkExportToExcel.Visible = false;
// calculate the total number of records.
int totalRows = 0;
if (txtkeywordsearch.Trim().Length == 0)
{
totalRows = oProductDal.CountAllProductDtToDisplay(Convert.ToInt32(hdnMerchantId), ddlproducttype,
ddlproductstatus);
}
else
{
totalRows = oProductDal.CountAllProductDtToDisplayBySearchString(Convert.ToInt32(hdnMerchantId), ddlproducttype,
ddlproductstatus, txtkeywordsearch.Trim());
}
//if (!IsPostBack)
//{
// gvProductBrow.PageIndex = _currentPageNumber;
//}
var count = oDataTable.Rows.Count;
sbReturnJson.Append("{"page":"" + iPage + "","records":"" + count + "","rows":[");
foreach (DataRow row in oDataTable.Rows)
{
// int depid = Convert.ToInt32(row[1].ToString());
// var Editbutton = "<img Class='GridEdit' onclick='showjQueryDialog(" + depid + ");' src='Images/edit.jpeg'></img>";
//<a href='#' Class='GridEdit' onclick='showjQueryDialog(" + depid + ");'>Edit</a>
string code = (row[1].ToString());
string title = (row[4].ToString());
string price = (row[7].ToString());
string product_group = (row[5].ToString());
string edit = (row[0].ToString());
string status = (row[2].ToString());
sbCell.Append("{"cell":["" + code + "","" + title + "","" + price + "","" + product_group + "","" + edit + "","" + status + ""]}");
sbCell.Append(",");
}
// lblNoOfRows.Text = totalRows + " record(s) found";
sbReturnJson.Append(sbCell.ToString().TrimEnd(','));
double dCount = Math.Ceiling(Convert.ToDouble(count / int.Parse(strLimit)));
int iCount = int.Parse(dCount.ToString()) + 1;
sbReturnJson.Append("],"total":"" + iCount + ""}");
//lblTopPageNo.Text = (gvProductBrow.PageIndex + 1) + "/" + CalculateTotalPages(totalRows);
//lblBottomPageNo.Text = (gvProductBrow.PageIndex + 1) + "/" + CalculateTotalPages(totalRows);
//ViewState["NoOfPages"] = CalculateTotalPages(totalRows);
}
catch (Exception ex)
{
ExceptionLogger.LogException(ex);
//lblErrorMessage.Text += Resources.Resource.Product_errMsgLoadProduct;
return "Error";
}
return sbReturnJson.ToString();
}
我的 web 方法需要 4 个参数，我试图使用 postData 传递这些参数，但由于我是新手，我不知道如何从我的 jqGrid 将数据发布到 web 方法.需要帮助被困在这个问题上大约 5 小时
my web method is expecting 4 parameters which i am trying to pass using postData but since i am a newbi i dont know how to post data to tht web method from my jqGrid. Need help got stuck with this for around 5 hrs
你也可以帮助将页面、sidx、排序从 jqgrid 发送到 web 方法
can you also help with sending the page,sidx,sort from jqgrid to web method
推荐答案
我推荐你使用 ASMX 或 WCF web service.在这种情况下，JSON 序列化和反序列化等许多事情都会自动为您完成.您应该只从 web 方法返回一个对象.
I recommend you to use ASMX or WCF web service. In the case many things like JSON serialization and deserialization will be made automatically for you. You should just return an object from the web method.
一般而言，WCF RESTfull 服务与 ASMX Web 服务相比具有优势，但如果您是初学者，您可以更轻松地将 ASMX Web 服务添加到您现有的项目中，以便 web.config 的所有更改都会为您制作 Visual Studio.
In general WCF RESTfull service has advantages in comparing with ASMX web service, but if you are a beginner you can more easy add ASMX web service to your existing project so that all changes of web.config will made Visual Studio for you.
要将 ASMX Web 服务添加到您现有的 ASP.NET 项目中，您应该执行以下步骤.在解决方案资源管理器中选择当前项目(通常在 Visual Studio 的右侧)并键入 Ctrl+Shift+A(或单击鼠标右键并选择添加"和新建项目...")您应该选择左侧的Web"模板，然后选择Web Service".您可以将底部的文件名从默认的 WebService1.asmx 更改为任何您想要的.例如 ProdData.asmx.在 ProdData.asmx.cs 文件中，您应该取消注释带有 [ScriptService] 属性的行.您还可以在文件开头插入 using System.Web.Script.Services;.现在您可以将Hello world"网络方法的代码更改为您需要的代码.例如
To add ASMX web service to your existing ASP.NET project you should do following steps. You select your current project in the Solution Explorer (typically on the right side in the Visual Studio) and type Ctrl+Shift+A (or click right mouse button and choose "Add" and the "New Item…") you should choose "Web" template on the left side and then "Web Service". You can change the filename on the bottom from default WebService1.asmx to any what you want. For example ProdData.asmx. In the ProdData.asmx.cs file you should uncomment the line with [ScriptService] attribute. You can additionally insert using System.Web.Script.Services; at the beginning of the file. Now you can change the code of "Hello world" web method to what you need. For example to
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Script.Services;
namespace TestWebApplicationWithjqGrid
{
public class GridRow {
public string id { get; set; }
public List<string> cell { get; set; }
}
public class GridData {
public int page { get; set; }
public int total { get; set; }
public int records { get; set; }
public List<GridRow> rows { get; set; }
}
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem (false)]
[ScriptService]
public class ProdData: WebService
{
[WebMethod]
public GridData ProdDetails(string sidx, string sord, int page, int rows,
string ddlproductstatus, string ddlproducttype, string txtkeywordsearch, int hdnMerchantId) {
return new GridData {page = 1, total = 1, records = 2, rows = new List<GridRow> {
new GridRow {id = "i1", cell = new List<string> {"Code1", "Title1", "Price1", "Group1", "Edit1", "Status1"}},
new GridRow {id = "i2", cell = new List<string> {"Code2", "Title2", "Price2", "Group2", "Edit2", "Status2"}}
}};
}
}
}
您当然应该有更复杂的 ProdDetails web 方法实现.答案给你例子.另请参阅此答案有关代码示例的更多链接.
You should of course has more complex implementation of the ProdDetails web method. The answer gives you examples. See additionally this answer for more links with code examples.
要从 JavaScript 调用 web 方法，您应该稍微修改一下 jqGrid.您应该包括以下附加参数
To call the web method from the JavaScript you should modify you jqGrid a little. You should include the following additional parameters
datatype: 'json',
ajaxGridOptions: { contentType: "application/json"},
serializeGridData: function (postData) {
var propertyName, propertyValue, dataToSend = {};
for (propertyName in postData) {
if (postData.hasOwnProperty(propertyName)) {
propertyValue = postData[propertyName];
if ($.isFunction(propertyValue)) {
dataToSend[propertyName] = propertyValue();
} else {
dataToSend[propertyName] = propertyValue
}
}
}
return JSON.stringify(dataToSend);
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
}
serializeGridData 的代码我从 我的以前的答案.它更复杂，只是
The code of serializeGridData I get from my previous answer. It is more complex as just
serializeGridData: function (postData) { return JSON.stringify(postData); }
在大多数情况下使用，因为您使用 postData 内部的函数.
used in the most cases because you use functions inside of postData.
这里您可以下载 VS2010 .NET 3.5 工作项目对应的代码.
Here you can download VS2010 .NET 3.5 working project with the corresponding code.
这篇关于将数据从 jqGrid 传递到 webmethod的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
