Develop Reference

Adding rows to a GridView with jQuery and saving

If I add rows to a GridView with jQuery, will I be able to get the newly added rows with:
foreach (GridViewRow row in gvMyGridView.Rows)
{
}
How could I add the rows so they could be iterated in code behind?

I put my Gridview control in an update panel and set an async trigger to point to my add button(so that the whole page is not refreshed when a new row is added).
Then in code behind, i add new row to a datatable. Save the datatable in a viewstate and rebind the gridview to the viewstate. Then when fetching data from the gridview, loop through viewstate datatable rows.
Not sure if this is the best solution, however its been working for me so far.
protected void cmdAdd(){
datatable table=(datatable)viewstate["savedTable"];
datarow row = table.newRow;
row["myColumnName"]=txtSomething.text;
datatable.rows.add(row);
viewstate["savedTable"]=table;
grid.datasource=viewstate["savedTable"];
grid.databind();
// or create your own functions to make the code reusable
}
protected void cmdSave(){
datatable table=viewstate["savedTable"];
foreach(datarow row in table.rows){
//do stuff
}
}
I usually use bootstrap modals to add new rows to my grid, and call those modal from code behind via a grid header button.
So my Gridview html looks like this:
<asp:UpdatePanel runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView runat="server" ID="stockTakeGrid"
CssClass="table table-striped table-bordered table-condensed table-hover"
AllowPaging="true" PageSize="8" OnPageIndexChanging="stockTakeGrid_PageIndexChanging"
ShowHeaderWhenEmpty="true"
OnRowCommand="stockTakeGrid_RowCommand"
OnRowDataBound="stockTakeGrid_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton runat="server" ID="cmdEdit" CssClass="btn" ToolTip="Edit Stock"
CommandName="editStock" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>">
<span><i class=" glyphicon glyphicon-pencil"></i></span>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ITEMCODE" HeaderText="Item Code" />
<asp:BoundField DataField="ITEMDESC" HeaderText="Item Desc" />
<asp:BoundField DataField="ONHAND" HeaderText="Stock On Hand" />
<asp:BoundField DataField="STCOUNT" HeaderText="Stock Count" />
<asp:BoundField DataField="VARIANCE" HeaderText="Variane" />
<asp:BoundField DataField="PRICE" HeaderText="Price" />
<asp:BoundField DataField="VALUE" HeaderText="Value" DataFormatString="{0:0,0.00}" />
<asp:BoundField DataField="COMMENT" HeaderText="Comment" />
</Columns>
<PagerStyle CssClass="pagination-ys" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cmbLocation" EventName="selectedindexchanged" />
<asp:AsyncPostBackTrigger ControlID="cmdSaveLine" EventName="click" />
</Triggers>
</asp:UpdatePanel>
Then my modal html looks like this:
<!--Item Modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Set actual stock count</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2 ">Item Code</asp:Label>
<div class="col-md-2">
<asp:TextBox runat="server" ID="txtItemCode" CssClass="form-control" ReadOnly="true"></asp:TextBox>
</div>
<div class="col-md-6">
<asp:TextBox runat="server" ID="txtItemDesc" CssClass="form-control" ReadOnly="true"></asp:TextBox>
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Stock on Hand</asp:Label>
<div class="col-md-2">
<asp:TextBox runat="server" ID="txtOnHand" CssClass="form-control" ReadOnly="true"></asp:TextBox>
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Stock Count</asp:Label>
<div class="col-md-2">
<asp:TextBox runat="server" ID="txtSTCount" CssClass="form-control decimal-empty"></asp:TextBox>
</div>
</div>
<div class="form-group">
<asp:Label runat="server" CssClass="control-label col-md-2">Comment</asp:Label>
<div class="col-md-10">
<asp:TextBox runat="server" CssClass="form-control" TextMode="MultiLine" ID="txtComment" ></asp:TextBox>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="stockTakeGrid" EventName="rowcommand" />
</Triggers>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:Button runat="server" ID="cmdSaveLine" CssClass="btn btn-info pull-left" Text="Save"
OnClientClick="$('#myModal').modal('hide');" OnClick="cmdSaveLine_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Hope this helps!

ASP.Net C# - Multiple UpdateProgress controls on a page

I'm trying to implement UpdatePanels and UpdateProgress controls. I have two UpdatePanels that contain two different DropDownLists (ddlQuestion5IDs and ddlQuestion6IDs).
When I change the selected index of ddlQuestion6IDs, the UpdateProgress loads for both UpdatePanels/DropDownLists. Is this how they normally behave and is there a way of only displaying the corresponding UpdateProgress for each UpdatePanel?
<p>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label6" runat="server" Text="Question 5:" Font-Bold="true"></asp:Label>
<br />
<asp:DropDownList ID="ddlQuestion5IDs" runat="server" OnSelectedIndexChanged="ddlQuestion5IDs_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true">
<ProgressTemplate>
<img src="images/loader.gif" height="20" />
</ProgressTemplate>
</asp:UpdateProgress>
<br />
<asp:Label ID="Label19" runat="server" Text="Question type:" Font-Italic="true"></asp:Label>
<br />
<asp:Label ID="lblQuestion5Type" runat="server" Text=""></asp:Label>
<br /><br />
<asp:Label ID="Label22" runat="server" Text="Question:" Font-Italic="true"></asp:Label>
<br />
<asp:Label ID="lblQuestion5" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlQuestion5IDs" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</p>
<p>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label7" runat="server" Text="Question 6:" Font-Bold="true"></asp:Label>
<br />
<asp:DropDownList ID="ddlQuestion6IDs" runat="server" OnSelectedIndexChanged="ddlQuestion6IDs_SelectedIndexChanged" AutoPostBack="true"></asp:DropDownList>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="true">
<ProgressTemplate>
<img src="images/loader.gif" height="20" />
</ProgressTemplate>
</asp:UpdateProgress>
<br />
<asp:Label ID="Label21" runat="server" Text="Question type:" Font-Italic="true"></asp:Label>
<br />
<asp:Label ID="lblQuestion6Type" runat="server" Text=""></asp:Label>
<br /><br />
<asp:Label ID="Label24" runat="server" Text="Question:" Font-Italic="true"></asp:Label>
<br />
<asp:Label ID="lblQuestion6" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlQuestion6IDs" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</p>

By adding a AssociatedUpdatePanelID="UpdatePanelID" property to UpdateProgress

How to updatepanel with image

I want to use update panel with image.
When image select and show for preview then only update that part only.
<div class="field-block button-height">
<label for="file" class="label">
<b>Image</b> (*.jpg)
</label>
<table>
<tr>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<td>
<span class="input file">
<span class="file-text"></span>
<span class="button compact">Select file</span>
<asp:FileUpload ID="fuMovieLogo" runat="server" CssClass="file withClearFunctions />"
</span>
<br />
<small class="input-info">Max file size: 2MB</small>
<asp:Button ID="btnPreview" runat="server" Text="Preview" onclick="btnPreview_Click" />
<asp:Button ID="btnCancelprev" runat="server" Text="Cancel" onclick="btnCancelprev_Click"/>
</td>
<td style="padding-left:10px">
<asp:Image ID="imgTheatreLogo" runat="server" Width="130px" />
<br />
<asp:Label ID="lblupdatelogo" runat="server" CssClass="lbl" Visible="false" Text="FDMovieUntitled.jpg"></asp:Label>
</td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPreview" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancelprev" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</tr>
</table>
</div>
Please Help me.

So you just need to restructure your markup a little then. You need to place imgTheatreLogo inside the update panel. The triggers are actually handled by controls outside the update panel. See this documentation for reference on exactly how the UpdatePanel works.
<?xml version="1.0" encoding="utf-8"?>
<div class="field-block button-height">
<label for="file" class="label">
<b>Image</b> (*.jpg)
</label>
<table>
<tr>
<td>
<span class="input file">
<span class="file-text"></span>
<span class="button compact">Select file</span>
<asp:FileUpload ID="fuMovieLogo" runat="server" CssClass="file withClearFunctions />"
</span>
<br />
<small class="input-info">Max file size: 2MB</small>
<asp:Button ID="btnPreview" runat="server" Text="Preview" onclick="btnPreview_Click" />
<asp:Button ID="btnCancelprev" runat="server" Text="Cancel" onclick="btnCancelprev_Click"/>
</td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<td style="padding-left:10px">
<asp:Image ID="imgTheatreLogo" runat="server" Width="130px" />
<br />
<asp:Label ID="lblupdatelogo" runat="server" CssClass="lbl" Visible="false" Text="FDMovieUntitled.jpg"></asp:Label>
</td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnPreview" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnCancelprev" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</tr>
</table>
</div>

Ajaxtoolkit ConfirmButtonExtender cannot fire

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ContentTemplate>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Button" PostBackUrl="~/testing2.aspx" />
<asp:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
targetControlID="Button1"
ConfirmText="Are you sure you want to click this button"
ConfirmOnFormSubmit="True" />
<asp:TextBox ID="TextBox1" runat="server" Height="25px"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
My ConfirmButtonExtender just not working. The website do not pop up a box for me. Do I miss somethings? My code is above.

I think you are missing OnClientCancel property. Check out the working example below.
Ensure your page is using proper master page. This is a working code.
asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
<script type='text/javascript'>
function cancelClick() {
var label = $get('ctl00_SampleContent_Label1');
label.innerHTML = 'You hit cancel in the Confirm dialog on ' + (new Date()).localeFormat("T") + '.';
}
</script>
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<div class="demoarea">
<div class="demoheading">ConfirmButton Demonstration</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="LinkButton" runat="server" OnClick="Button_Click">Click Me</asp:LinkButton>
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server"
TargetControlID="LinkButton"
ConfirmText="Are you sure you want to click the LinkButton?"
OnClientCancel="cancelClick" />
<br />
<br />
<asp:Button ID="Button" runat="server" Text="Click Me" OnClick="Button_Click" /><br />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender2" runat="server"
TargetControlID="Button"
OnClientCancel="cancelClick"
DisplayModalPopupID="ModalPopupExtender1" />
<br />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button" PopupControlID="PNL" OkControlID="ButtonOk" CancelControlID="ButtonCancel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="PNL" runat="server" style="display:none; width:200px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
Are you sure you want to click the Button?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="ButtonOk" runat="server" Text="OK" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<asp:Label ID="Label1" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>

Combobox selected item is deleted once selected . Invalid Postback or Callback argument

I have four textboxes one combobox and one button ( and some other controls) in my page . Based on the values typed in the textboxes the related values are updated in the combobox. On clicking the submit button in my page It was giving the following error .
"Invalid postback or callback argument. Event validation is enabled using in configuration or in a page. For Secuity purposes,this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected . Use the ClientScriptManager.RegisterForEventsValidation method in order to register the postback or callback data for validation."
Now in the page directive I added
<%#Page EnableEentValidation="false">
When I type the values in the four textboxes the corresponding value will appear in the cobobox . But when I select that combobox value, the selected value wil be deleted . What is the reason for this ?
<%# Page Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="AddeChecklist.aspx.cs"
Inherits="LabTrack.WebApplication.Echecklist.AddeChecklist" EnableEventValidation ="false" %>
<%# Register TagPrefix="Labinal" TagName="AutoCompleteControl" Src="~/UserControls/AutoCompleteEnabledWebUserControl.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="../Styles/CheckListRev.css" rel="stylesheet" type="text/css" />
<!-- Style for the page -->
<link href="../Styles/AddeChecklist.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
</asp:ScriptManager>
<asp:Panel ID="ErrorMessagePanel" CssClass="ErrorPanel" Visible="true" runat="server">
<div class="ErrorDiv">
<asp:BulletedList CssClass="ErrorMessage" ID="ErrorMessageBulletedList" runat="server">
</asp:BulletedList>
</div>
</asp:Panel>
<div class="PageTitle">
<asp:Label ID="PageHeaderLabel" runat="server"></asp:Label>
</div>
<div class="MainDiv">
<div style="text-align: center;">
<div class="PlaceHolder">
<table id="formTable">
<tr>
<td>
<asp:UpdatePanel runat="server" ID="updatepanelCustomer" UpdateMode="Conditional">
<ContentTemplate>
<span class="boldLabelLong">Customer:</span><br />
<asp:TextBox ID="CustomerNameTextBox" Width="200" runat="server"></asp:TextBox>
<asp:HiddenField ID="IxCustomerHiddenField" runat="server" />
<asp:Button ID="customerTriggerbutton" runat="server" Text="Button" Style="display: none;" />
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel runat="server" ID="updatepanelProgram" UpdateMode="Conditional">
<ContentTemplate>
<span class="boldLabelLong">Program:</span><br />
<asp:TextBox ID="ProgramNameTextBox" Width="200" runat="server"></asp:TextBox>
<asp:Button ID="programTriggerbutton" runat="server" Text="Button" Style="display: none;" />
<asp:HiddenField ID="IxProgramHiddenField" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="customerTriggerbutton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel runat="server" ID="updatepanelWorkPackage" UpdateMode="Conditional">
<ContentTemplate>
<span class="boldLabelLong">WorkPackage:</span><br />
<asp:TextBox ID="WorkPackageNameTextBox" Width="200" runat="server"></asp:TextBox>
<asp:HiddenField ID="IxWorkPackageHiddenField" runat="server" />
<asp:Button ID="workPackageTriggerbutton" runat="server" Text="Button" Style="display: none;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="programTriggerbutton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
<td>
<asp:UpdatePanel runat="server" ID="updatepanelActivity" UpdateMode="Conditional">
<ContentTemplate>
<span class="boldLabelLong">Activity:</span><br />
<asp:TextBox ID="ActivityNameTextBox" Width="200" runat="server"></asp:TextBox>
<asp:HiddenField ID="IxActivityHiddenField" runat="server" />
<asp:Button ID="activityTriggerbutton" runat="server" Text="Button" Style="display: none;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="workPackageTriggerbutton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="activityTriggerbutton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
<div class="PlaceHolder">
<asp:Label ID="TemplateLabel" Text="Template:" CssClass="ControlLabel" runat="server"></asp:Label>
<asp:UpdatePanel runat="server" ID="updatepanelTemplate" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="TemplateSelectDropDownList" runat="server" Width="400" Visible="true"
AutoPostBack="true">
</asp:DropDownList>
<asp:HiddenField ID="IxTemplateHiddenField" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="workPackageTriggerbutton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Panel ID="SustainPanelTemplateOwner" Visible="true" runat="server">
<div>
<asp:Label ID="TemplateOwnerLabel" Text="Owner:" CssClass="ControlLabel" runat="server"></asp:Label>
<asp:TextBox ID="TemplateOwnerTextBox" CssClass="controlMargin" Width="400" runat="server"></asp:TextBox>
</div>
</asp:Panel>
<asp:HiddenField ID="IxDeliverableHiddenField" runat="server" />
<asp:HiddenField ID="IxReleaseActionHiddenField" runat="server" />
<asp:HiddenField ID="IxConfigHiddenField" runat="server" />
<asp:HiddenField ID="IxTemplateOwnerHiddenField" runat="server" />
<asp:HiddenField ID="TemplateSelectedSnameHiddenField" runat="server" />
<asp:HiddenField ID="TemplateOwnerSelectedsNameHiddenField" runat="server" />
<asp:HiddenField ID="DeliverableSelectedHiddenField" runat="server" />
<div>
<asp:Label ID="DeliverableLabel" CssClass="ControlLabel" runat="server" Text="Deliverable:"></asp:Label>
<asp:TextBox ID="DeliverableTextBox" CssClass="controlMargin" Width="400" runat="server"></asp:TextBox>
</div>
<asp:Panel ID="SustainPanelConfig" Visible="true" runat="server">
<div>
<asp:Label ID="ConfigurationLabel" runat="server" Text="Configuration:" CssClass="ControlLabel"></asp:Label>
<select id="ConfigurationSelect" class="controlMargin">
<option></option>
</select>
</div>
</asp:Panel>
<asp:Panel ID="SustainPanelRelease" Visible="true" runat="server">
<div>
<asp:Label ID="ReleaseActionLabel" CssClass="ControlLabel" runat="server" Text="Release Action:"></asp:Label>
<asp:TextBox ID="ReleaseActionTextBox" CssClass="controlMargin" Width="400" runat="server"></asp:TextBox>
</div>
</asp:Panel>
<asp:Panel ID="SustainPanel" Visible="true" runat="server">
<div class="SustainPanelControls">
<div>
<asp:Label ID="ChangeLabel" Text="Change #: " runat="server"></asp:Label>
</div>
<div>
<asp:TextBox ID="ChangeTextBox" Width="110" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="SupplementLabel" Text="Supplement: " runat="server"></asp:Label>
</div>
<div>
<asp:TextBox ID="SupplementTextBox" Width="80" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="NewWrrLabel" Text="WRR #: " runat="server"></asp:Label>
</div>
<div>
<asp:TextBox ID="NewWrrTextBox" Width="80" runat="server"></asp:TextBox>
</div>
<div>
<asp:Label ID="DddLabel" Text="3D: " runat="server"></asp:Label>
</div>
<div>
<asp:TextBox ID="DddTextBox" Width="80" runat="server"></asp:TextBox>
</div>
</div>
<div>
<table id="DesignDataTable2">
<tr>
<td>
<asp:Label ID="AllFbSheetsWrrLabel" Text="All F/B Sheets w/WRR #:" CssClass="ControlLabel" runat="server"></asp:Label>
</td>
<td>
<asp:TextBox CssClass="completeControl" ID="AllFbSheetsWrrTextBox" Width="588" Rows="2"
TextMode="MultiLine" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
</asp:Panel>
</div>
<div class="EditButtonGroup">
<input id="EditButton" type="button" value="Edit" class="ButtonSettings" />
<input id="RemoveButton" type="button" value="-" class="ButtonSettings" />
<input id="AddButton" type="button" value="+" class="ButtonSettings" />
</div>
</div>
<div class="ViewData">
<div class="ViewDataDiv">
<table id="DesignDataTable" class="designDataTable">
<tbody>
</tbody>
</table>
</div>
</div>
<div class="submitButtonDiv">
<asp:Button ID="SubmitButton" runat="server" Text="Button Text" class="submitButtonCreateChecklist" />
</div>
</div>
</asp:Content>

You are creating new values on the client side, and posting them back to the server.
For security reasons ASP.NET implements "event validation". When even validation is enabled, if the server creates a combo with 3 possible values, it will only accept this values on postback. If you create a different value and send it back to the server, you get the error you're referring to.
Here you have some info:
Page.EnableEventValidation Property
You can use ClientScriptManager.RegisterForEventValidation Method if you know which are the possible values generated on the client side, or disable validation completely if you don't know them in advance.
To disable validation:
You set the EnableEventValidation property by setting the enableEventValidation attribute of the # Page directive or the enableEventValidation attribute of the pages element in the Web.config file. If you set this property in code, you must set it before the page is initialized.

Sounds like an issue with Viewstate overriding the values.
Try fetching the value directly using Request.Form[Dropdown.ClientId]