如何将JavaScript中GridView数据传递至C#后端？

针对你已经用JS成功获取GridView数据，现在要传到C# btnButton_Click方法的需求，我给你两种适配不同场景的方案，先从最贴合你现有代码的回发方案说起：

方案一：隐藏字段+页面回发（最小改动现有代码） #

这个方案不需要修改按钮的回发逻辑，只需要加个隐藏字段存数据：

1. 在ASPX页面添加服务器端隐藏字段
   在页面的<form>标签内添加一个asp:HiddenField，让后台能直接读取它的值：

   <asp:HiddenField ID="hdnGridData" runat="server" />
   

2. 修改你的updateArray函数
   把收集到的myCollection转成JSON字符串，赋值给这个隐藏字段，顺便修正你原代码里的小问题（重复调用find和选择器缺#）：

   function updateArray() {
       alert('Snimljeno!');
       var myCollection = [];
       $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function () {
           var row = this;
           var myObj = {
               // 简化重复的find调用，原代码嵌套find没必要
               label: valuefromType($(row).find('td:eq(1)').children()),
               opis: valuefromType($(row).find('td:eq(2)').children())
           };
           myCollection.push(myObj); // 用push比直接操作length更规范
       });
       // 把数组转成JSON字符串，存入隐藏字段（用ClientID确保正确获取控件）
       $('#<%= hdnGridData.ClientID %>').val(JSON.stringify(myCollection));
       
       // 修正选择器，加#才是ID选择器
       $("#MainContent_gvKarakteristike_ddlOpis_0").remove();
       return true; // 必须返回true才会触发按钮的回发事件！
   }
   

3. 后台C#处理代码
   先定义一个和JS对象结构完全匹配的类，然后把JSON字符串反序列化成对象列表：

   // 定义对应的数据模型，属性名要和JS里的完全一致（大小写敏感）
   public class GridItem
   {
       public string label { get; set; }
       public string opis { get; set; }
   }
   
   protected void btnButton_Click(object sender, EventArgs e)
   {
       // 从隐藏字段拿到JSON数据
       string jsonData = hdnGridData.Value;
       if (!string.IsNullOrEmpty(jsonData))
       {
           // 反序列化成List<GridItem>，.NET Core/.NET 5+用System.Text.Json
           var gridItems = System.Text.Json.JsonSerializer.Deserialize<List<GridItem>>(jsonData);
           
           // 现在就可以遍历数据，执行数据库存储逻辑了
           foreach (var item in gridItems)
           {
               string labelValue = item.label;
               string opisValue = item.opis;
               // 这里写你的数据库插入/更新代码...
           }
       }
   }
   

   如果你用的是.NET Framework，建议用Newtonsoft.Json（先通过NuGet安装），反序列化代码改成：

   var gridItems = Newtonsoft.Json.JsonConvert.DeserializeObject<List<GridItem>>(jsonData);
   

方案二：AJAX异步传递（无页面刷新） #

如果不想让页面回发，想要更流畅的用户体验，可以用AJAX直接把数据传到后台的WebMethod：

1. 后台添加静态WebMethod
   在页面后台类里添加一个标记为[WebMethod]的静态方法：

   using System.Web.Services;
   
   // 必须是静态方法，并且标记WebMethod
   [WebMethod]
   public static bool SaveGridData(List<GridItem> gridItems)
   {
       try
       {
           // 这里处理数据库存储逻辑
           foreach (var item in gridItems)
           {
               // 执行数据库操作...
           }
           return true; // 返回成功状态
       }
       catch (Exception ex)
       {
           // 可以在这里记录异常日志
           return false;
       }
   }
   

   注意：GridItem类和方案一的一样，必须存在。

2. 修改JS函数用AJAX发送数据

   function updateArray() {
       alert('Snimljeno!');
       var myCollection = [];
       $('#MainContent_gvKarakteristike tbody').find('tr:gt(0)').each(function () {
           var row = this;
           var myObj = {
               label: valuefromType($(row).find('td:eq(1)').children()),
               opis: valuefromType($(row).find('td:eq(2)').children())
           };
           myCollection.push(myObj);
       });
       
       $("#MainContent_gvKarakteristike_ddlOpis_0").remove();
       
       // 发送AJAX请求到后台WebMethod
       $.ajax({
           type: "POST",
           // 替换成你实际的页面文件名
           url: "<%= Page.ResolveUrl("~/YourPage.aspx/SaveGridData") %>",
           data: JSON.stringify({ gridItems: myCollection }),
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (response) {
               // ASP.NET WebMethod返回的结果在response.d里
               if (response.d) {
                   alert("数据保存成功！");
               } else {
                   alert("保存失败，请重试。");
               }
           },
           error: function (xhr, status, error) {
               alert("请求出错：" + error);
           }
       });
       
       return false; // 返回false阻止按钮的默认回发行为
   }
   

几个关键提醒 #

• JS对象的属性名和C#类的属性名必须完全一致（包括大小写），否则反序列化会失败。
• 用回发方案时，updateArray必须返回true，否则按钮不会触发后台的btnButton_Click事件。
• 如果数据里有特殊字符（比如引号、换行），JSON.stringify会自动处理转义，不用担心格式问题。

内容的提问来源于stack exchange，提问作者freej17