【问题标题】:Add items to dropdownlist with javascript and persist in postback使用 javascript 将项目添加到下拉列表并保留在回发中
【发布时间】:2013-10-11 14:35:53
【问题描述】:

我对 Web 开发还很陌生,遇到了以下我不太明白的问题。使用 Visual Basic 在 VS2010 中工作。

我有一个页面(aspx),它有一个gridview,它有几列,包括一个带有复选框的列和一个“action”列,它有一个空的、隐藏的下拉列表开始(每一行都有这个)。

每当用户勾选一个框时,我都会使用 AJAX 调用从服务器检索一些值(这是我第一次尝试 AJAX :-)),并使用这些值在“操作”列中填充下拉列表选定的行。到目前为止一切顺利。

然后用户可以在下拉列表中进行选择,然后他按下一个按钮(上传),并进行回发以处理信息。

但是,在后面的代码中,我无法检索下拉列表中添加的项目(更不用说选择的值了)。我可以检索下拉列表,但它没有任何项目。

在谷歌上搜索了一段时间后,我意识到当表单发布到服务器时,客户端的更改并没有持续存在,我理解这一点——但这似乎也很奇怪。下拉菜单是在页面创建时创建的,为什么不存储javascipt添加的项目呢?特别是因为我发现一些变通方法使用隐藏字段来存储添加的项目或选定值。如果我可以将它们存储在隐藏字段中,为什么我不能将它们存储在实际的下拉列表中?

我显然不明白网站是如何工作的......但这意味着,在最初加载页面后,您可以更改下拉列表和列表框等中的值,但这些在服务器端永远不可用?

编辑:一些代码;第一个 javascript-sn-p 我如何添加通过 AJAX 调用检索到的不同值:

var drop = row.findElement("ddlAction"); //find the dropdownelement in the DOM
for (j = 0; j < dropdownitems.length; j++) { //add all the options from xml
     option = document.createElement("option");
     option.text = dropdownitems[i].getAttribute("text");
     option.value = dropdownitems[i].getAttribute("value");
     drop.add(option, null);
}

这很好用,下拉列表已填满,我可以选择。但是当页面发布时,我在服务器代码中执行以下操作:

Dim SelCount As Integer = LocalFilesGrid.SelectedItems.Count
If SelCount >= 0 Then
   For Each dataItem In LocalFilesGrid.SelectedItems
       Dim drop As DropDownList
       drop = dataItem.FindControl("ddlAction")
       If drop.Items.Count = 0 Then 'always zero
          MsgBox("Nope")
       End If
   Next
End If

我希望能够遍历网格的选定行,获取相应的下拉列表和选定值。

【问题讨论】:

  • SOF 的人会更有兴趣看到code please :)

标签: javascript asp.net ajax vb.net visual-studio-2010


【解决方案1】:

当您混合使用这些不同的技术时,您最终会遇到这样的麻烦。你想要做的是一点Ajax 和一点ASP.NET。选择一个然后使用它。如果您选择ASP.NET 而不是AJAX,请使用UpdatePanel,这将简化您的生活。

如果您想Ajax 填满自己,请处理按钮单击并通过 ajax 而不是回发提交请求。

之所以能够检索下拉列表而不是项目,是因为您必须在 aspx 中声明了下拉列表,但项目是在客户端添加的,因此服务器不知道这些项目。

原因是ASP.NET 使用视图状态,你不能乱用视图状态。因此,您可以将数据添加到隐藏字段并在服务器上读取它们,但您不能在视图状态下写入数据。

最好的方法是使用ASP.NETUpdatePanels。如果你混合,那么你将不得不在每一步中继续做一些技巧。如果你想做自己的 Ajax 东西,最好使用 MVCRazor(不是带有 aspx 的 mvc),因为它是为这种用途而设计的。

【讨论】:

  • 嗯.. 我会查看 UpdatePanel。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2010-11-09
  • 2015-06-15
  • 2013-02-14
  • 1970-01-01
  • 1970-01-01
  • 2015-06-24
  • 2015-09-13
相关资源
最近更新 更多