如何跟踪ASP.NET中的复选框更改?

时间:2015-08-27 13:23:40

标签: javascript c# jquery asp.net checkbox

我有一个包含许多行的Gridview,每行有两个复选框,一个用于美国可用性,另一个用于英国可用性。之前,代码使得在每次复选框更改时,页面都会进行回发,并且将运行要更新该项目的代码。可以想象,对于数百行,任何重大变化都需要很长时间,并且通过这种方法变得非常繁琐。

因此,我为复选框上的更改创建了一些jQuery侦听器,这些方法实际上是根据自创建页面以来对该复选框所做的更改,将单击的复选框的索引添加到现有Javascript数组中。

$('.checkUs input:checkbox').click(function () {
    var row = $(this).parent().parent().parent().index();
    var isChecked = $(this).is(':checked');

    if (isChecked && $.inArray(row, usRowsChecked) === -1 && $.inArray(row, usRowsUnchecked) === -1)
      usRowsChecked.push(row);
    else if (isChecked && $.inArray(row, usRowsUnchecked) !== -1)
      usRowsUnchecked.splice($.inArray(row, usRowsUnchecked), 1);

    if (!isChecked && $.inArray(row, usRowsUnchecked) === -1 && $.inArray(row, usRowsChecked) === -1)
      usRowsUnchecked.push(row);
    else if (!isChecked && $.inArray(row, usRowsChecked) !== -1)
      usRowsChecked.splice($.inArray(row, usRowsChecked), 1);
  });

现在我不知道如何将这些信息反馈给服务器来运行SQL查询,并且稍微研究一下,我不太确定这是最好的解决方案。

用户点击“保存”按钮后,我需要向后端发送四个数组:

var usRowsChecked = [];
var usRowsUnchecked = [];
var ukRowsChecked = [];
var ukRowsUnchecked = [];

如何将此信息传达给C#中的代码隐藏?

3 个答案:

答案 0 :(得分:0)

你的问题虽然简单,如果你在我提供将数据发送到后面的代码的方法之后不重新思考和重新评估,可能会产生一些架构或意大利面的后果。您将使用Ajax,这将允许您构建模型或对象以发送到后面的代码。

function BuildModel (Id, Country) {
     var content = {
          Id : Id,
          Country : Country
     };

     return content;
}

为简洁起见,没有任何null检查应该完成。这将构建一个简单的对象供我们传回。

var content = new Array();
content.Push(BuildModel($('.Id'), $('.Country));

这两行非常简单,我们构建一个数组并开始填充它。显然,我们会将它包裹在一个循环中,以确保它使用相关的Grid Id来抓取所有元素。

现在我们将构建我们的Ajax:

var jsonObject = JSON.stringify(content);

$.ajax({
     url: '<%= Page.ResolveURL("~/SomePage.aspx") %>',
     data: { Model : jsonObject },
     type: 'POST'

     success: function () {
         // Do something with returned data.
     }
});

然后在代码背后,你可以使用内置的.Net JavaScript.SerializerNewtonsoft.Net。微软实际上建议Newtonsoft.Net超过他们的,但我会告诉你微软的。{/ p>

在我们反序列化之前,我们需要Model

public class Example
{
     public int Id { get; set; }
     public bool Country { get; set; }
}

我们有我们的模型,因此当我们反序列化时,我们会执行以下操作:

var model = new Example();
var serializer = new JavaScriptSerializer();
List<Example> deserialize = serializer.Deserialize<List<Example>>(Request["Model"]);

现在您拥有所有这些数据的可行集合。

上述方法不是唯一的方法,但是如果您的应用程序保证PostBacks您可以使用构建的控件UpdatePanelrunat="server"从前端代码中获取元素

您有多种选择,但正确的选择会因您的应用而异。每个都有一个特权和一个缺点,但无论如何你的战斗Asp.Net页面生命周期。希望这会对你有所帮助。

答案 1 :(得分:0)

你可以通过ajax来实现:

在你的aspx.cs文件中添加WebMethod:

    [WebMethod]
    public static int SaveArray(int[] usRowsChecked,int[] usRowsUnchecked, int[]ukRowsChecked, int[] ukRowsUnchecked )
    {
        //do here whatever you want with values
    }

在您的aspx文件(javascript)中添加如下方法:

$.ajax({
    type: 'POST',
    data: "{usRowsChecked:" + usRowsChecked + 
    ", usRowsUnchecked :" + usRowsUnchecked +
    ", ukRowsChecked :" + ukRowsChecked +
    ", ukRowsUnchecked :" + ukRowsUnchecked +"}",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    async: true,
    url: "YourPage.aspx/SaveArray",
    success: function (result) {
        alert("success");
    },
    error: function (msg) {
        alert("error");
    }
});

答案 2 :(得分:0)

为什么不将网格插入UpdatePanel并使用命令?

了解这种方法:ASP.NET - Adding an UpdatePanel trigger to a LinkButton inside a gridview

您可以使用CommandName和CommandArgument(在您的情况下为row-id),如下所示: Check box inside repeater , How to get command name value in the check changed function