动态用户控制数据丢失中的动态选择元素

时间:2018-07-09 17:43:31

标签: asp.net vb.net user-controls html-select dynamic-usercontrols

在搜索论坛,阅读文档并与队友会面几天后,我还没有找到解决该问题的方法。

我在VB.NET项目中有一个窗体,该窗体通过单击asp按钮动态地添加带有回发的用户控件。回发的原因是,在用户控件和主页之间发生了计算。

有一个下拉列表需要带有<optgroup>标签。为此,我将数据列表写入具有以下结构的XML文件中:

<AccountListData>
    <account>
        <group>OPTION GROUP NAME HERE</group>
        <value>OPTION VALUE/TEXT HERE</value>
    </account>
    <account>...</account>
</AccountListData>

XML文件长1117行。写出来不好玩。但是,我这样做的原因是使用它在后面的代码中创建<select>标签,并将其分配给前端innerHTML标签的div属性。看起来像这样:

Form.aspx

    <table>
      <tr>
        <td id="DateLabel" runat="server">Date:</td>
        <td id="DescriptionLabel" runat="server">Description:</td>
        <td id="AmountLabel" runat="server">Amount:</td>
        <td id="DropDownLabel" runat="server">Select:</td>
      </tr>
      <asp:Placeholder ID="ph1" runat="server"></asp:Placeholder>
    </table>
    <asp:Button ID="AddItemButton" runat="server" CausesValidation="false" Text="Add Item">
    <asp:Label ID="RowCountLabel" runat="server"></asp:Label>

Form.aspx.vb

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
      'Add/Removed User Control
      AddRemoveUserControl()
      ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "CalculateCosts", "Javascript function();"), True)
    End Sub
    ...
    Public Function GetPostbackControlName(ByVal Page As Page) As String
      Dim ctrlName As String
      ctrlName = Page.Request.Params.Get("__EVENTTARGET")
      Return ctrlName
    End Function
    ...
    Private Sub AddRemoveUserControl()
      'Get and check the ID of what caused the postback
      Dim c As Control = GetPostbackControlName(Page)

      If Not IsNothing(c) Then
        If c.ID.ToString = "AddItemButton" Then
          RowCountLabel.Text = CInt(RowCountLabel.Text) + 1
        End If
      End If

      'Get ID for dynamic user controls
      Dim ControlID As Integer = 0
      For i As Integer = 1 To (CInt(RowCountLabel) - 1)
        Dim DynamicControl As ItemTable = LoadControl("usercontrols/ItemTable.ascx")
        DynamicUserControl.ID = "uc" & CStr(ControlID)

        'Add an event handler for the usercontrol
        AddHandler DynamicUserControl.RemoveUserControl, AddressOf Me.HandleRemoveUserControl

        'Add user control to placeholder on front end
        ph1.Controls.Add(DynamicUserControl)

        'Number the amount of user controls
        ControlID += 1
      Next
      NumberItemTable()
    End Sub
    ...
    Private Sub HandleRemoveUserControl(sender As Object, e As EventArgs)
      'Removes usercontrol from placeholder and lowers count #
    End Sub
    ...
    Private Sub NumberItemTable()
      'Gives a number value to a property in the usercontrol
    End Sub

Control.ascx

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ItemTable.ascx.vb" Inherits=".ItemTable" %>
<tr>
  <td>
    <asp:Textbox ID="Date" runat="server" CssClass="datepicker"></asp:Textbox></td>
  <td>
    <asp:Textbox ID="Description" runat="server"></asp:Textbox></td>
  <td>
    <asp:Textbox ID="Amount" runat="server"></asp:Textbox></td>
  <td>
    <div ID="DynamicSelect" runat="server"></div></td>
</tr>

Control.ascx.vb

Dim XMLInfo As XDocument

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
  FillDropDownList()
End Sub

Private Sub FillDrowDownList()
  'Get XML data
  Dim XMLData 'all the XML data is loaded as an XDocument here
  Dim temp As string
  'WHERE THE DROPDOWN IS DYNAMICALLY CREATED WITH XML DATA
  DynamicSelect.InnerHTML += "<select ID='" + Me.ID.ToString + "CreatedSelect'><option value='' selected disabled>- Select -</option>"
  For Each element As XElement In XMLData.Descendants("account")
    Dim group As String = element.<group>.Value.ToString
    Dim value As String = element.<value>.Value.ToString

    If group <> "" Then
      If group <> temp Then
        temp = group
        DynamicSelect.InnerHTML += "</optgroup>"
        DynamicSelect.InnerHTML += "<optgroup label='" + group + "'>"
      End If
    End If
    DynamicSelect.InnerHTML += "<option value='" + value + "'>" + value + "</option>"
  Next
  DynamicSelect.InnerHTML += "</select>"
End Sub

在动态下拉列表中选择一个值时,任何回发都会清除该选择。我们将不胜感激任何了解为什么会发生这种情况以及我能做些什么来解决这个问题。

1 个答案:

答案 0 :(得分:0)

由于两天没有答案,总共有27次浏览,我怀疑我很快就会得到这个问题的答案。因此,我将与大家一起寻找昨晚提出的解决此问题的方法。

我意识到选项组不过是带有标题的列表,对吗?什么是标题,但仅用于显示的文本,以及用于输入时仅用于显示的文本?禁用!

有了这个,我决定我要稍微修改一下代码,并使用asp DropDownList为每个标头显示一个禁用字段,而不是尝试在后面的代码中创建动态选择,从而避免了数据丢失问题并确保了安全性。视图状态的状态。

我的数据结构保持不变。

data.xml

<account>
  <group>Group 1</group>
  <value>Value 1</value>
</account>

我的表单方法保持不变,我将其保留在上面,而不再将其复制到这里。

这就是变化的所在。

在我的控制下,前端的更改非常简单;将<div>替换为<asp:DropDownList>

Control.ascx

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="ItemTable.ascx.vb" Inherits=".ItemTable" %>
<tr>
  <td>
    <asp:Textbox ID="Date" runat="server" CssClass="datepicker"></asp:Textbox></td>
  <td>
    <asp:Textbox ID="Description" runat="server"></asp:Textbox></td>
  <td>
    <asp:Textbox ID="Amount" runat="server"></asp:Textbox></td>
  <td>
    <div ID="DynamicSelect" runat="server"></div></td>
</tr>

我后面的控制代码更改为:

Control.ascx.vb

Imports System.Web.UI.WebControls

...

Private Sub FillDrowDownList()
'Get XML data
Dim XMLData 'all the XML data is loaded as an XDocument here
Dim temp As string = ""
Dim i As Integer = 0
'Check if the control already has the dropdown
If DynamicSelect.Items.Count < 1 Then
  DynamicSelect.Items.Add(New ListItem("- Select -", ""))
  DynamicSelect.Items(i).Attributes.Add("selected", "true")
  DynamicSelect.Items(i).Attributes.Add("disabled", "true")
  i += 1
  'loop through XML data
  For Each element As XElement In XMLData.Descendants("account")
    Dim group As String = element.<group>.Value.ToString
    Dim value As String = element.<value>.Value.ToString

    If temp <> group Then
      temp = group
      DynamicSelect.Items.Add(New ListItem(group, ""))
      DynamicSelect.Items(i).Attributes.Add("disabled", "true")
      i += 1
    End If

    DynamicSelect.Items.Add(New ListItem(value, value))

    i += 1
  End If
End Sub

此新代码生成带有组头的DropDownList!它没有粗体斜体标头,而是具有禁用的标头。您始终可以使用CSS选择器和样式来找到所需的样式!

我希望任何仍在寻找此问题的超简单解决方案的人都能发现并发现有帮助。