Loading selected items in a dynamic checkbox list

Suppose you are using a checkbox list whose ListItems are loaded dynamically from a database.
And you save the list of selected items into the database and wish to load the selected items when the page is loaded next time.

In the Page_Load Event, populate the List Items from the backend.
To set the last saved selected items, make use of the Page_PreRender Event.
Loop through the list of selected items you got from backend and use the FindItemByValue method of checkbox list to set the selected boolean value to true.

Page_PreRender event is used to make last minute changes to your controls before they are rendered.

Setting selectedValue for a cascaded drop down control

If you are using the ajax control toolkit control, cascaded drop down. You might need to set up the selected value saved at your last save. To do that instead of setting the selected value of the drop down list you have to set the selectedValue for the cascaded drop down control.

eg. cascadedDropdown.SelectedValue = "Value"

Important MSDN links for .net

ASP.Net Life Cycle -
http://msdn.microsoft.com/en-us/library/ms178472.aspx


Garbage collection - 
http://msdn.microsoft.com/en-us/magazine/bb985010.aspx
http://msdn.microsoft.com/en-us/magazine/bb985011.aspx

New in .Net 4.0 framework
http://msdn.microsoft.com/en-us/library/ms171868.aspx

Asynchronous Delegates Programming Sample
http://msdn.microsoft.com/en-us/library/h80ttd5f(v=vs.71).aspx

ASP.Net Page Life Cycle Overview
http://msdn.microsoft.com/en-us/library/ms178472.aspx

Serialization 
http://msdn.microsoft.com/en-us/library/ms233843

AJAX
http://www.w3schools.com/ajax/default.asp
List in process ....

Showing update progress with file upload control in asp.net

Most of us use file upload control in our applications. The problem with the file upload control is you cannot use it inside update panel. And as a consequence you cannot show update progress while the file is being uploaded. Below is the workaround solution for this problem.

1) Add a Scriptmanager and a timer to the page.

2) Set the Enabled flag of the timer to FALSE.

3) In the Page_Init event of the page, add a isCalled key with value as "yes" to the ViewState like this
    ViewState["isCalled"] = "Yes";

4) On the click event of the Upload button (or the button which will start the upload of your file), do these steps
 (i) Set the viewState isCalled Value as "no":

     ViewState["isCalled"] = "No";


 (ii) Make your Waiting panel/image visible.Make sure the panel is inside an update panel :

       this.pnlWait.Visible = true;

 (iii) Enable your timer.

            Timer1.Enabled = true;

5) Now your timer is enabled and it will start ticking. So create the timer_tick event for your timer and write the following code in it.

   Timer1.Enabled = false;// disable the timer so that it is not called again 
    if (ViewState["isCalled"].ToString() == "No")
   {
     this.pnlWait.Visible = false; // hide your loading panel
      ViewState["isCalled"] = "Yes";      
     StartUpload(); //start your upload process

     }


And you are done. Let me know if you find any issues in it

Display update progress on whole page as modal popup

If you have a page where you want to disable all the control while some server side processing is going on, you might want to display the update progress for an updatepanel as a modal popup. You can do that by adding the below code in your update progress.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePanel1"DisplayAfter="0">
<ProgressTemplate>
<div style="background-color: Gray; filter: alpha(opacity=60); opacity: 0.60; width: 100%;top: 0px; left: 0px; position: fixed; height: 100%;">
</div>
<div style="margin: auto; font-family: Trebuchet MS; filter: alpha(opacity=100);opacity: 1; font-size: small; vertical-align: middle; top: 45%; position: fixed;right: 45%; color: #275721; text-align: center; background-color: White; height: 100px;">
<table style="background-color: White; font-family: Sans-Serif; text-align: center;border: solid 1px #275721; color: #275721; width: inherit; height: inherit; padding: 15px;">
<tr>
<td style="text-align: inherit;">
   <img src="../../Images/loading.gif" alt="Loading" />
</td>
<td style="text-align: inherit;">
  <span style="font-family: Sans-Serif; font-size: medium; font-weight: bold; font">
    Please Wait...</span>
 </td>
</tr>
</table>
</div>
</ProgressTemplate>
</asp:UpdateProgress>

Showing update progress over modal popup

If you have an update progress that covers your entire page(If you want one, let me know). And you have a modal popup panel that has controls that causes post back, like a button or a drop down. You might end up in a situation where your update progress appears behind the modal pop up panel. To get out of this situation, you  just need a few changes.

1. Set the style, z-index = 1 for the modal pop up panel.
2. Set the style, z-index = 99999 for the update progress.

You are all done. Go ahead and try it out. 

DefaultButton Property of a Panel in Asp.net

Ever wondered whats the DefaultButton property for a Panel. It was of no use untill I started using the modal popup extender. Well the basic use of this property is to assign the Ok button for a panel. So when you hit the enter key while you are working inside this panel, it fires button click event for the button specified in the default button property.

If you are working on a screen with multiple modal popups and multiple buttons,you might the face the issue of opening multiple modal popups on the hitting the Enter key. To avoid this, just set the default panel property of each of your modal popup panels and you will be just fine.

Fixing the gridview column width for long string values without spaces

If your grid column contains data string values that does not have any spaces, just setting the grid and column width wont work. When the data is loaded , the width of the grid as well the column exceeds the set value. To make sure it works.

1. Set the desired width for each column and the grid.
2. Add below line in the page load event of your page

    gridview.Attributes.Add("style", "word-break:break-all;word-wrap:break-word");

Using reportviewer with modal popupextender in Asp.Net

To show a RDLC report inside a modal popupextender follow these steps.

1. Instead of attaching the modal popup to the button to show report., attach it to a hidden/dummy button.
2. On the click of Show Report button,load the data in the reportviewer and call modalpopup.show()
3. Set the AsyncRendering as false in the reportviewer Designer View.

To make sure that the modal popup does not close when a postback occurs on the reportviewer, e.g. On using functionalities of reportiviewer-next page, search etc. follow these steps.

1.     1.In the 2nd steps above add the following line of code. This will let us know that the modal pop up is   currently being displayed in the next page load
           ViewState["ModalShow"] = "Show";

 2. In the page load event add the following code. This will check that the modal pop up was shown before the post back using the viewstate property we have added. If it exists then show the modalpopup

      if (ViewState["ModalShow"]!= null && ViewState["ModalShow"].ToString().Equals("Show"))

      {
          ModalPopupExtender.Show();   
      }   

  3. In the close event of the button , add the following line of code . This will make the modal pop up to remain hidden on next post back, as the modal popup has been closed by the user.  
       ViewState["ModalShow"] = "Hide";

Thats it.     

Resizing a panel using animation extender in asp.net

This one is quite similar to what we learned in my last post about moving a panel using animation extender. Just don’t forget to set the coordinates for this panel as the animation extender uses them to assign the new location.

Now just add this to your code, just like we did before.

<Resize Duration=".5" FPS ="30" Height = "300" Width = "300" unit ="px"/>

Duration : Duration of the animation
FPS : Frames per second
Height : Desired final height of the panel
Width : Desired final width of the panel
Unit : Unit of height and Width mentioned

Simple right?

Creating parallel animation in asp.net using animation extender

We learned moving a panel on a button click and sequencing animation in the last post. In this post we’ll learn implementing the parallel animation. Suppose you want to move a panel and at the same time fade it out too. In such a case we use parallel Animation. For this, we need to just make small addition to code we wrote previously.

Step 3: Modify the code to add parallel animation.

<OnClick>
<Sequence AnimationTarget = "Panel1">
<EnableAction AnimationTarget = "btnAnimate" Enabled = "false"/>
<Parallel Duration = ".5" FPS = "30">
<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal = "100" unit ="px"/>
<FadeOut Duration=".5" FPS = "30" ></FadeOut>
</Parallel>
</Sequence>
</OnClick>

Build and play with it.

Moving a panel on a button click using Ajax animation extender in asp.net

This is in continuation to my previous post “Moving a panel using ajax animation extender”. In this post, I have explained animating a panel on a button click.

For this we just need to make a few modifications to the earlier code.

Step 1: Add a button which will used to initiate the animation.

<asp:Button ID = "btnAnimate" runat ="server" Text="Click to Animate" OnClientClick="return false;"/>

Step 2: Change the TargetControlID to the button instead of panel.

<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID ="btnAnimate" >

Step 3: Add the Sequence and EnableAction tags as following. Sequence for the panel to be animated and EnableAction for the Button to initiate the animation.

<Sequence AnimationTarget = "Panel1">

<EnableAction AnimationTarget = "btnAnimate" Enabled = "false"/>

<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal = "100" unit ="px"/>

</Sequence>

Build the code and click on the button to view the animation.

You can add further sequences to this code. Suppose you want to Fadeout the panel after it is moved to the location, you can modify the above code to this.

<Sequence AnimationTarget = "Panel1">

<EnableAction AnimationTarget = "btnAnimate" Enabled = "false"/>

<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal = "100" unit ="px"/>

<FadeOut Duration=".5" FPS = "30" ></FadeOut>

</Sequence>

I hope this helps.

Moving a panel using ajax animation extender in asp.net

I was looking for this over the net but couldn’t find a simple explanation to implement the move animation. Just follow these simple steps and you would be good to go.

Step 1: Create a panel which you want to move with the animation extender

<asp:Panel ID="Panel1" runat="server" CssClass="movingPanel">

Click on the Panel to move it

</asp:Panel>

Step 2: Assign a CSS class to this panel. Make sure you assign the coordinates for this panel as animation extender uses these coordinates to move the panel.

.movingPanel

{

position : absolute;

height : 200px;

width: 250px;

top: 166px;

left: 500px;

border-width: 1px;

border-color:Black;

border-style:double;

}

Step 3: Add the animation extender to the page.

<asp:AnimationExtender ID="AnimationExtender1" runat="server"TargetControlID ="Panel1" >

<Animations>

<OnClick>

<Move Duration=".5" FPS ="30" Vertical= "200" Horizontal ="100" unit ="px"/>

</OnClick>

</Animations>

</asp:AnimationExtender>

Duration: Duration of Animation

FPS: Frames per second
Vertical: Vertical length to cover
Horizontal: Horizontal length to cover
Unit: Unit to define Vertical and Horizontal lengths
Build the solution and click on the panel to move it. Let me know if you face any issues.

Creating Pulse animation using animation extender in asp.net

Pulse animation will make your panel blink on and off for the number of times you want it to. 

This is again almost similar to the resizing, moving and other animations with just the difference of the tag.

<Pulse Duration = ".1" iterations = "10"/>

Duration: Duration of pulse

Iterations: Number of pulse

Animating a panel using Ajax Animation Extender - Server Side

1) Add an UpdatePanel to your page which contains a panel that needs to be animated.

<%--Update panel having the panel to be animated --%>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Panel ID="Panel1" runat="server" CssClass="movingPanel">

Testing Animation

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

2) Add checkboxes that will be used to set Animations and 2 , one to set the animations and the other to initiate it

<asp:CheckBox ID="chkMove" runat="server" Text="Move" />

      <br />

      <asp:CheckBox ID="chkFade" runat="server" Text="Fade" />

      <br />

     <asp:CheckBox ID="chkPulse" runat="server" Text="Pulse" />

     <br />

     <asp:Button ID="btnMovePanel" runat="server" Text="Set Animations"

       OnClick="btnMovePanel_Click" Width="112px" />

        <asp:Button ID="btnAnimate" runat="server" Text="Animate"

      OnClick="btnAnimate_Click" OnClientClick = "return false" />

3) Add your AnimationExtender to your page and set the TargetControlID to the button that will initiate the animation.

<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID = "btnAnimate">

<%--Leave the animations tag empty --%>

<Animations>

</Animations>

</asp:AnimationExtender>

4) Moving to the server side, we need to add the event for Button which will set the animations.

I created a StringBuilder object to store animations and then the selected to this stringbuilder object. The Animations object is then assigned to the AnimationExtender.Animations

protected void btnMovePanel_Click(object sender, EventArgs e)

{

      StringBuilder Animations = new StringBuilder("<OnClick>" +

      "<Sequence AnimationTarget = \"Panel1\">");

      if (chkMove.Checked)
           {

          Animations.Append("<Move Horizontal = \"100\" unit =\"px\" FPS = \"30\" /> ");
     }
     if (chkFade.Checked)
      {

           Animations.Append("<FadeOut FPS = \"30\"/>");

           Animations.Append("<FadeIn FPS = \"30\" />");
     }
      if (chkPulse.Checked)
     {
         Animations.Append("<Pulse Duration = \".1\" iterations = \"4\" />");
     }
       Animations.Append("</Sequence></OnClick>");

       this.AnimationExtender1.Animations = Animations.ToString();

}

You can obviously modify this code depending on your requirements.