Question

我正在编写一个ASP.NET应用程序。

我有一个页面，用户将选择或取消选择某些元素。这种情况发生在客户端：当用户点击div时，调用javascript函数并更改某些类，因此div“变灰”。
还有一个保存按钮（asp:Button），可以保存数据。

将所选元素的信息传递回服务器端的最佳方法是什么？

我试图将这些信息放入Cookie中。每个div都有ID，因此我将使用该ID和布尔值创建cookie。这是一个坏主意，因为：
- 当用户（取消）选择一些元素，然后导航离开页面而不保存
- 然后导航回来，没有选择任何内容点击“保存”，cookie具有以前的值并保存。

Answer 1

除了Cookies之外，你所尝试的是好的。我能理解你所面临的问题。所以我建议使用隐藏字段而不是Cookie。

当你的div被选中时，调用javascript函数并将值（以特定格式）存储在隐藏字段中。并且以同样的方式取消选择div时，从 HiddenField 中删除值。

您可以使用以下格式在 HiddenField 中存储值（ID：值）：

DIV1：真; DIV2：真; DIV3：真

现在，在按钮的click事件中，您可以先按分号（';'）拆分值，然后您将得到如下数组：

DIV1：真，
DIV2：真，
DIV3：假

对于每个值再次按冒号（'：'）拆分值，您将获得第0个索引的div id及其在第一个索引上的值。

所以基本上你的代码从隐藏字段获取值并对其执行操作将如下所述：

foreach (var selectedDiv in this.hfSelected.Value.Split(';'))
{
    var divId = selectedDiv.Split(':')[0];
    var divValue = selectedDiv.Split(':')[1];

    // Perform action on divId and divValue
}

更新：

要将值存储在 HiddenField 中，而不是div点击，您可以使用按钮的 OnClientClick 事件并获取选中的值和取消选择 div。请参阅下面的代码示例：

ASPX页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.8.2.js" language="javascript"></script>
    <script type="text/javascript" src="Scripts/jquery-1.8.2.min.js" language="javascript"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.9.1.custom.js" language="javascript"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.9.1.custom.min.js" language="javascript"></script>
    <style type="text/css">
        .selectedDiv {
            background-color: #333;
            color: #fff;
            height: 30px;
            width: 100%;
        }

        .deselectedDiv {
            background-color: #bababa;
            color: #000;
            height: 30px;
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="selectedDiv" id="div1">I am Div 1</div>
        <div class="selectedDiv" id="div2">I am Div 2</div>
        <div class="selectedDiv" id="div3">I am Div 3</div>
        <div class="selectedDiv" id="div4">I am Div 4</div>
        <div class="selectedDiv" id="div5">I am Div 5</div>

        <input type="hidden" id="hfDivSelection" runat="server" />

        <asp:Button runat="server" ID="buttonSave" OnClick="buttonSave_OnClick"  Text ="Save" OnClientClick="GetSelection()"/>
    </form>
     <script type="text/javascript">
         $('div').click(function () {
             var css = $(this).attr('class');

             if (css == 'selectedDiv') {
                 $(this).attr('class', 'deselectedDiv');
             } else {
                 $(this).attr('class', 'selectedDiv');
             }

         });

         function GetSelection() {
             $('div').each(function() {
                 var values = $('#<%=hfDivSelection.ClientID%>').val();
                 var css = $(this).attr('class');
                 var divId = $(this).attr('id');
                 if (css == 'selectedDiv') {
                     $('#<%=hfDivSelection.ClientID%>').val(values + divId + ':true;');
                 } else if (css == 'deselectedDiv') {
                     $('#<%=hfDivSelection.ClientID%>').val(values + divId + ':false;');
                 }
             });
         }
    </script>
</body>
</html>

代码背后：

protected void buttonSave_OnClick(object sender, EventArgs e)
{
    foreach (var selectedDiv in this.hfDivSelection.Value.Split(';'))
    {
        var divId = selectedDiv.Split(':')[0];
        var divValue = selectedDiv.Split(':')[1];

        // Perform action on divId and divValue
    }
}

Answer 2

我推荐jquery的$ .ajax函数。这很方便。

这是一个例子。

Javascript + jquery代码：

//this $.ajaxSetup step is optional, but will save you a bunch of caching and asynchrony problems.
$.ajaxSetup({
  cache: false,
  async: false
});

$.ajax({
    type: "POST",
    url: 'submit.aspx',
    data: {"field1": "value1", "field2": "value2"},
    dataType: 'json',
    success: function(response){console.log('Data submit worked. Response was:\n' + response)}
});

（有关http://api.jquery.com/jQuery.ajax/此功能的更多信息。）

然后，在submit.aspx中，放置代码以获取信息，SO article可能有所帮助。

然后，您可以通过asp.net将数据保存到xml文件中。如果要重新加载用户的设置，可以使用$ .ajax函数的GET命令：

$.ajax({
    type: "GET",
    url: '/data/userfields.xml',
    dataType: "xml",

    success: function(xml) {
        var fieldvalue = $(xml).find('a_node').attr('an_attrib');
        //...
    },
    error: function(xml) { console.log ('failed to get xml file on import of file: /data/userfields.xml');}
});

Answer 3

在我看来，最好的方法是使用复选框（放置在按钮单击时会提交的表单中）并使用CSS来区分div对应复选框状态。

Answer 4

我建议使用ajax回调。在这种方法上使用cookie有点混乱。在每个div上创建“on click”事件，如果您真的想使用最佳实践方法在客户端保存数据，我建议使用本地存储： http://www.w3schools.com/html/html5_webstorage.asp

希望这有帮助

将数据从客户端传递到服务器端

4 个答案: