我正在编写一个 ASP.NET 应用程序。
我有一个页面，用户将在其中选择或取消选择某些元素。这种情况发生在客户端:当用户单击 div 时，将调用 javascript 函数并更改某些类，因此该 div 会“变灰”。
还有一个“保存”按钮 (asp:Button)，用于保存数据。
将所选元素的信息传递回服务器端的最佳方式是什么？
我尝试将这些信息放入 cookie 中。每个 div 都有 ID，因此我将使用该 ID 和 bool 值创建 cookie。这是一个坏主意，因为:
- 当用户(取消)选择某些元素，然后导航离开页面而不保存
- 然后导航回来，在不选择任何内容的情况下单击“保存”，cookie 具有先前的值并被保存。
最佳答案
除了 Cookie 之外，您尝试过的都很好。我可以理解您面临的问题。 所以我建议使用隐藏字段而不是Cookie。
当您的 div 被选中时，调用 javascript 函数并将值(以特定格式)存储在隐藏字段中。以同样的方式，当您的 div 被取消选择时，从 HiddenField 中删除该值。
您可以按以下格式在HiddenField中存储值(ID:值):
div1:true;div2:true;div3:true
现在，在按钮的单击事件上，您可以首先用分号(';')分割值，您将得到如下数组:
- div1:true,
- div2:true,
- 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中，可以使用按钮的OnClientClick事件代替div click，并获取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
}
}
关于javascript - 将数据从客户端传递到服务器端，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21547398/