dotnet-developer.de

There are several ways to call a modal popup from asp.net. You could code it on your own using JavaScript, or you could use existing frameworks like jQuery or Ajax Control Toolkit. As I use both of them, I decided to check with the Ajax Control Toolkit as this is already implemented and no further module needs to be referenced.
You could call the modal popup from the UI or from Backend. The current posting is just a reminder for me how to use it in backend.

Read the rest of this entry

There are several ways to call a modal popup from asp.net. You could code it on your own using JavaScript, or you could use existing frameworks like jQuery or Ajax Control Toolkit. As I use both of them, I decided to check with the Ajax Control Toolkit as this is already implemented and no further module needs to be referenced. You could call the modal popup from the UI or from Backend. The current posting is just a reminder for me how to use it in backend. First, ModalPopup from Ajax Control Toolkit always needs to be initiated by a button click. So even if using from backend we still have to define a button. We set the style to display:none so the user would not see it. Take care: Do not use visible=false as the button would not be created then. Then we define the ModalPopupExtender as usual: Define the name, the target panel and some CSS. The TargetControlID is the invisible button, the PopupControlID is the panel which should be shown as modal popup. In the panel you could setup the modal popup. You could setsome CSS, enter labels, textboxes, buttons etc. After everything is set up, go to your backup code. To show this popup just call .show on the ModalPopupExtender. So in the example it would be mdlPopupFilterName.Show. As soon as the user clicks on a button the modalpopup is automatically closed so you don't need to close it manually in your code. Here are some example files: ASP.NET <asp:Button ID="btnShowPopup" runat="server" Style="display: none" /> <ajaxToolkit:ModalPopupExtender ID="mdlPopupFilterName" runat="server" TargetControlID="btnShowPopup" PopupControlID="SelectFiltername" BackgroundCssClass="modalBackground" /> <asp:Panel ID="SelectFiltername" runat="server" CssClass="modalPopup"> Please enter Filtername:<br /> <asp:TextBox ID="Filtername" runat="server" CssClass="inputTextbox" /><br /> <asp:Button ID="SaveFiltername" runat="server" Text="Save Filter" CssClass="buttonOverview" /> <asp:Button ID="CancelSaveFiltername" runat="server" Text="Cancel" CssClass="buttonOverview" /> </asp:Panel> Your backend code: Private Sub SaveFilter_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles SaveFilter.Click ' Do some other checks first if you like ' ... mdlPopupFilterName.Show() End Sub Some CSS Classes: /*Modal Popup*/ .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; text-align:center; width: 210px; } .buttonOverview { padding-left:2px; font-size:100%; }

In my application I needed to have 2 listboxes and users should be able to move entries from the source list to the target list.

Using normal buttons would cause a postback on every click which is ugly of course. Additionally this could be done with JavaScript without problems. The only handicap: As the selection is done in the FrontEnd only, the Backend does not know about it and therefore you could not get the selections made. I’ve found several tips but no complete code so I put together some tips and post it here so you could easily copy it into your application.

Read the rest of this entry

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } In my application I needed to have 2 listboxes and users should be able to move entries from the source list to the target list. Using normal buttons would cause a postback on every click which is ugly of course. Additionally this could be done with JavaScript without problems. The only handicap: As the selection is done in the FrontEnd only, the Backend does not know about it and therefore you could not get the selections made. I’ve found several tips but no complete code so I put together some tips and post it here so you could easily copy it into your application. The script is based on a blog entry from Colt Kwong: Move Items between 2 Listboxes.  But as said above, this script does not give the selected items to the Backend. Searching further I found tips to use a hidden field, and that’s what I’ve done. The script needs to check whether the selected item is already in the hidden list (and so it would remove it) or whether it’s not in the list (and so it will be added).   The JavaScript code: <script type="text/javascript" language="javascript"> function MoveItem(ctrlSource, ctrlTarget) { var Source = document.getElementById(ctrlSource); var Target = document.getElementById(ctrlTarget); if ((Source != null) && (Target != null)) { while ( Source.options.selectedIndex >= 0 ) { var HiddenList = document.getElementById('<%= SelectedAdditionalInvolved.ClientID %>') //The hidden field var SelectedValue = Source.options[Source.options.selectedIndex].value + ','; // Hidden List is comma seperated var newOption = new Option(); // Create a new instance of ListItem newOption.text = Source.options[Source.options.selectedIndex].text; newOption.value = Source.options[Source.options.selectedIndex].value; Target.options[Target.length] = newOption; //Append the item in Target Source.remove(Source.options.selectedIndex); //Remove the item from Source if (HiddenList.value.indexOf(SelectedValue) == -1) { HiddenList.value += SelectedValue; // Add it to hidden list } else { HiddenList.value = HiddenList.value.replace(SelectedValue,""); // Remove from Hidden List } } } } </script>   In my aspx: <span class ="selectionListUsernames"> <asp:ListBox ID="AdditionalUsers" Width="100%" Height="100%" runat="server" AutoPostBack="false" /> </span> <span class="selectionListUsernamesButtons"><br /><br /> <input onclick="Javascript:MoveItem('<%= AdditionalUsers.ClientID %>', '<%= AdditionalUserSelection.ClientID %>');" type="button" value="->" /><br /><br /> <input onclick="Javascript:MoveItem('<%= AdditionalUserSelection.ClientID %>', '<%= AdditionalUsers.ClientID %>');" type="button" value="<-" /> </span> <span class="selectionListUsernames"> <asp:ListBox ID="AdditionalUserSelection" width="100%" Height="100%" runat="server" AutoPostBack="false" /> </span> <asp:HiddenField ID="SelectedAdditionalInvolved" runat="server" />   In my css: .selectionListUsernames { float:left; width: 300px; height: 150px; } .selectionListUsernamesButtons { float: left; width: 120px; text-align: center; vertical-align:middle; } In your postback (e.g. when user clicks ‘Save’) you could grab the Hidden field ‘SelectedAdditionalInvolved’. It contains a comma-seperated field containing the selected values, e.g. ‘Value1,Value2,Value3,’. That’s it. If a user selected some values and you saved it make sure to fill the hidden field on next Page_Load. Technorati Tags: Listboxes,JavaScript

Working in my asp.net 2.0 application I noticed the following error message for 3 days:

Sys.InvalidOperationException: A control is already associated with the element.

After closing the IE window with my application I got a second error:

Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method

Read the rest of this entry

Working in my asp.net 2.0 application I noticed the following error message for 3 days: Sys.InvalidOperationException: A control is already associated with the element. After closing the IE window with my application I got a second error: Sys.InvalidOperationException: Handler was not added through the Sys.UI.DomEvent.addHandler method Checking some internet resources did not help too much: The problem seemed to be caused by some AJAX elements, but how can I locate which one it is? I have lots of AJAX extenders but I did not touch or add one of them lately...     In my case the problem appeared while opening a new window and then closing it again. The main form refreshes and the error appeared. I did not change any of my AJAX controls. So I started to redesign my page. Regardless of these errors it was necessary to eliminate the modal window and place the controls into the main window. I added another button in my main form to enable the new controls on request (they contain a huge list which I don't want to load if not necessary). As soon as the page refreshed from the postback I still got these error messages..... Fortunately I had also some other buttons on my main form so I could check why the error does not appear on these postbacks.... And the solution was:  CausesValidation="false" I had this property also on some other buttons, but not on the link button which caused the problem. Adding this the application now runs fine again without any errors.