我正在编写一个 ASP.NET 应用程序。
我有一个页面，用户将在其中选择或取消选择某些元素。这发生在客户端：当用户单击div 时，将调用 javascript 函数并更改一些类，因此 div 是“灰色的”。
还有一个保存按钮 (asp:Button)，用于保存数据。
将有关选定元素的信息传回服务器端的最佳方式是什么？
我已尝试将这些信息放入 cookie 中。每个div 都有ID，所以我会用那个ID 和布尔值创建cookie。这是个坏主意，因为：
- 当用户（取消）选择某些元素，然后离开页面而不保存时
- 然后导航回来，没有选择任何东西点击“保存”，cookies有以前的值并被保存。
【问题讨论】：
标签： javascript asp.net client-side
除了 Cookies，您尝试过的都很好。我能理解你面临的问题。 所以我建议使用 Hidden Field 而不是 Cookies。
当您的 div 被选中时，调用 javascript 函数并将值（以特定格式）存储在隐藏字段中。并且以同样的方式，当您的 div 被取消选择时，从 HiddenField 中删除该值。
您可以将值存储在 HiddenField 中，格式如下（ID:value）：
div1:true;div2:true;div3:true
现在在按钮的单击事件中，您可以先用分号 (';') 拆分值，然后您将得到这样的数组：
对于每个值，再次用冒号 (':') 拆分值，您将获得第 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事件，获取selected的值> 和 取消选择 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
}
}
【讨论】：
我推荐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');}
});
【讨论】：
在我看来，最好的办法是使用复选框（放置在单击按钮时提交的表单中）并使用 CSS 将 div 的accordig 设置为复选框状态。
【讨论】：
我建议使用 ajax 回调。在这种方法上使用 cookie 有点混乱。在每个 div 上创建“点击”事件，如果您真的想使用最佳实践方法在客户端保存数据，我建议使用本地存储： http://www.w3schools.com/html/html5_webstorage.asp
希望对你有帮助
【讨论】：