modalpopupextender and commas appearing in my textbox asp.net

Question

Some weird stuff is happening, I am converting an application that used to use javascript to open another web page in a tiny window for data input to use a ModalPopupExtender.

It seems to work fine, but in the OK event, when I do txtData.Text (the textbox in my modal popup), it comes back with a comma before the data, so if you type "Rabbit", it comes back as ",Rabbit".

Also when I use it multiple times, in another place where I might click to show it, and type "Fish", it starts coming back with stuff like ",Rabbit,,Fish"

I don't know why or how to stop it from doing this... any ideas?

Answer 1

Experiencing the exact same problem. This seems to be since we updated to the latest version of the AJAX control toolkit. Also causing random errors like Message: Sys.InvalidOperationException: Two components with the same id '[ExtenderID]' can't be added to the application. for every ajax control/extender on the page.

Answer 2

I had the same problem with previous values coming back comma separated. It seemed that my ok button was inside the update panel and I had it in the triggers section aswell. Removing the button from the triggers section of the updatepanel solved the problem.

best regards - Tobias

Answer 3

Same here. No clue for why it happens. Every postback initiated by buttons within the panel adds commas and previous values to all text fields.

Hooking into TextBox.Text setter revealed that the corrupted data comes from postdata collection. So it means that just before postback the ModalPopupExtender corrupts the data.

P.S. I'm not using UpdatePanel, but regular Panel so there are no triggers associated with buttons.

Updated: Solution found.

The problem seems to go away when rolling back to May's release of AjaxToolKit (http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=27326).

Answer 4

For some reason it doesn't seem to happen if the textbox is set to ReadOnly.

I'm thinking there could be a workaround by displaying an editable textbox to the user, catching the keystrokes to it, and updating a readonly textbox that is hidden from the user.

Still a bit messy, but I can't roll back to May's release because there's another bug in that release with the ComboBox that I need to avoid!

---

UPDATE:

As a bit of background, I have a user control (ascx) inside my modal popup because I need to reuse it. The ascx has to handle the user's input itself (the containing page doesn't know what's going on inside the control) so when the user clicks a button I do a callback and process the data. If a successful result is returned to the client callback function then I simulate a click of what the containing page thinks is the "OK" button which is actually invisible to the user.

I've changed my code to add a hidden, readonly textbox and copy the text from the original textbox into the new one every time the text changes.

    <asp:TextBox runat="server" ID="txtName"></asp:TextBox>

becomes

    <asp:TextBox runat="server" ID="txtName" onchange="document.getElementById(this.id + 'RO').value = this.value"></asp:TextBox>
    <asp:TextBox runat="server" ID="txtNameRO" ReadOnly="true" style="display:none;"></asp:TextBox>

then when passing values back in the callback instead of getting the value of txtName, I use txtNameRO.

I don't think this will help if you're doing a postback, but you could add a callback before the postback like I have. Hopefully this will help someone anyway!

Answer 5

I have successfully implemented a complete hack based on Jen's response. I use an asp:HiddenField to hold the value I want to post back, and I populate it with a pure HTML input box

<asp:HiddenField ID="txt" runat="server"/>
<input type="text" onchange='document.getElementById("<%= txt.ClientID %>").value = this.value;' />

This is lighter weight than Jen's solution as you're still only posting back one server control.

BTW, this is a very significant bug in the Ajax Toolkit. You can vote and comment on it here:

CodePlex Issue

Pretend you're in Chicago. Vote early, vote often.

Answer 6

For me the solution was to get the modal poup out of the main update panel. Once I did that the commas went away. If you truely need an update panel inside of the modal popup, create one of it's own inside that panel.
I did not need to roll back to previous version of the toolkit.

Answer 7

After fiddling with this issue for close to an hour, the solution above from "Roger H" fixed the issue. Moved the Panel control (the content that pops up) and the ModalPopupExtender outside the UpdatePanel control. Wired the events server-side using ModalPopupExtender.Show() and ModalPopupExtender.Hide(). I didn't change the AjaxToolkit back to the old version, still using version 3.0.31106.0.

Thanks Roger.

Answer 8

I attempted implementations suggested by both Jen and Payton Byrd. In both cases I could still manage to get commas into the input HTML / text box (fed by the read only text box) on post back. No luck for me.

Answer 9

I have been trying to solve this for a day now and some very helpful person in my office has come up with a terrific solution!

We moved the ModalPopUpExtender and subsequent pop up panel controlled by the extender to ouside of the outermost UpdatePanel on the page, created a fake button and gave the ID of the fake button to the TargetControlID property of the ModalPopUpExtender.

<asp:Button runat="server" ID="dummyButton" CausesValidation="false" Style="display: none" />

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="dummyButton" CancelControlID="CancelPopUp" PopupControlID="PanelID" BackgroundCssClass="modalBackground" />

Inside my forms/page where the PopUp extender and panels used to be, I created an OnClick event on the button that we used to use to trigger the ModalPopUpExtender.

<asp:ImageButton ID="ButtonID" runat="server" Text="Add" ImageUrl="~/Images/Add-32-1-small.png" OnClick="LoadPopUp" />

On my button that triggers the ModalPopUpExtender, I have created an OnClick event called "LoadPopUp" - in LoadPopUp in the code behind I simply put ModalPopUpExtender1.Show();

protected void LoadPopUp(object sender, EventArgs e)
{
  ModalPopupExtender1.Show();
}

Answer 10

I also found a forum indicating that it may be standard html behaviour for when there are multiple controls on the form with the same name. This in mind (and assuming there is a bug in the ajax controls) The way I coded around it was to add in my Page_Load the following kind of statement for each of my textboxes.

string[] vals = txtValue.Text.Split(Convert.ToChar(",")); txtValue.Text = vals[vals.Length - 1];//It appears my latest value was always in the last item

Since the form load happens before the button event I sort out my fields before they get to the event that deals with their values.

Answer 11

My answer was similar to Smarty's. My page looked like this...

<UpdatePanel>
    <GridView>
        <Button> <-- These buttons fire modal popup programmatically.
        <Button>
        <Button>
    </GridView>
    <ModalPopup>
    <HiddenField> <-- Dummy target of modal popup.
</UpdatePanel>

The fix was to change it to this...

<UpdatePanel>
    <GridView>
        <Button> <-- These buttons fire modal popup programmatically.
        <Button>
        <Button>
    </GridView>
</UpdatePanel>
<ModalPopup>
<HiddenField> <-- Dummy target of modal popup.

I had to register each button as a postback control with the scriptmanager on the gridview rowdatabound event. The down side is that I have more full postbacks. But, it solved the problem.