Karan's Blog

Just Microsoft .Net

September 2010 - Posts

Calendar Extender Today’s Date

The following is a simple code to show how to set/highlight the selected date in a Calendar Extender as Today’s Date. I am using JavaScript to set the Calendar’s date. Here is the code:

Aspx:

   1: <asp:ToolkitScriptManager ID="toolKitScriptManger" runat="server" />
   2: <asp:TextBox  ID="txtCalender" runat="server" />  
   3: <asp:ImageButton ID = "imgCalender"  runat="server" ImageUrl="~/calendar.gif"/>
   4: <asp:CalendarExtender  ID="calenderExtender" runat="server"  CssClass="cal_theme" TargetControlID="txtCalender"  
   5:         PopupButtonID="imgCalender" OnClientShowing="CurrentDateShowing"/>   

In the above code I am calling Javascript function CurrentDateShowing on the CalendarExtender which set’s Today’s Date.

Here is the Javascript and a css class which I use on the Calendar Extender.

Css:

   1: .cal_theme .ajax__calendar_active    
   2:   {      
   3:       color: Red;       
   4:       font-weight: bold;       
   5:       background-color: #ffffff;  
   6:   } 

 

JavaScript:

   1: <script type="text/javascript">
   2:    function CurrentDateShowing(e) 
   3:    {
   4:        if (!e.get_selectedDate() || !e.get_element().value)
   5:            e._selectedDate = (new Date()).getDateOnly();
   6:    }     
   7:    </script>

On using the above code when the Calendar pops up on the Image Button Click you would see Today’s date is highlighted in Red.

Posted: Sep 20 2010, 11:16 PM by karan@dotnet | with 5 comment(s) |
Filed under: , ,
Controls in Modal Pop Extender Causing Postback

Last week someone came up with a problem of a button on a modal pop up extender causing a postback and thereby hiding the modal up itself. Consider the situation where you have some asp.net controls on a modal pop up say a Texbox, Label, and a button control. Onclick of the button you want to display the message on the label. What happens is when you click the button it causes the postback thereby causing your modal popup to hide.

So with the following solution I determine which control caused the postback, depending on which I show my modal pop up back again. Here is the code:

   1: <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
   2:        <asp:Button ID="Button1" runat="server" Text="Open Modal" />
   3:        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="modal" TargetControlID="Button1" PopupControlID="Panel1"
   4:        BackgroundCssClass="modalBackground" CancelControlID="btnCancel">
   5:        </asp:ModalPopupExtender>
   6:  
   7:       <asp:Panel ID="Panel1" runat="server" CssClass="modalpopup" style="display:none">
   8:                <div class="container">
   9:                    <div class="header">
  10:                        <asp:Label ID="lblText" runat="server" CssClass="msg" Text="Enter value and press save" />
  11:                    </div>
  12:                    <div class="body">
  13:                        <asp:TextBox ID="TextBox1" runat="server" />
  14:                        <asp:Label ID="lblMessage" runat="server" Text="Saved" Visible="false" ForeColor="Red" />
  15:                        <br />
  16:                        <asp:DropDownList ID="DropdDownList1" runat="server" OnSelectedIndexChanged="DropdDownList1_SelectedIndexChanged" AutoPostBack="true">
  17:                            <asp:ListItem>Item1</asp:ListItem>
  18:                            <asp:ListItem>Item2</asp:ListItem>
  19:                        </asp:DropDownList>
  20:                    </div>
  21:                    <div class="footer">
  22:                        <asp:Button ID="btnSave" OnClick="btnSave_Click" runat="server" Text="Save" Width="50px" />
  23:                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="60px" />
  24:                    </div>                                                
  25:                </div>
  26:            </asp:Panel>

In the above Aspx markup I am using a ModalPopupExentender to show a Panel containing a Textbox, Label, DropDownList and a Button. Onclick of the Button the label would show a message. I am also using some css classes above, here are those classes:

   1: .modalpopup
   2: {
   3:     font-family: arial,helvetica,clean,sans-serif;
   4:     font-size: small;
   5:     padding: 2px 3px;
   6:     display: block;
   7:     position: absolute;
   8: }
   9:  
  10: .container
  11: {
  12:     width: 300px;
  13:     border: solid 1px #808080;
  14:     border-width: 1px 0px;
  15: } 
  16:  
  17: .header
  18: {
  19:     color: #000;    
  20:     border-color: #808080 #808080 #ccc;
  21:     border-style: solid;
  22:     border-width: 0px 1px 1px;
  23:     padding: 3px 10px;
  24: } 
  25:  
  26: .header .msg
  27: {
  28:     font-weight: bold;
  29: }         
  30:  
  31: .body
  32: {
  33:     background-color: #f2f2f2;
  34:     border-color: #808080;
  35:     border-style: solid;
  36:     border-width: 0px 1px;
  37:     padding-top: 10px;
  38:     padding-left: 10px;
  39:     padding-bottom: 30px;
  40: } 
  41: .footer
  42: {
  43:     background-color: #f2f2f2;
  44:     border-color: #808080;
  45:     border-style: none solid;
  46:     border-width: 0px 1px;
  47:     text-align:right;
  48:     padding-bottom: 8px;
  49:     padding-right: 8px;
  50: } 
  51: .modalBackground 
  52: {
  53:     background-color:Gray;
  54:     filter:alpha(opacity=50);
  55:     opacity:0.5;
  56: } 

A Small javascript function I use to close the modal pop up:

   1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   1:  
   2: <script type="text/javascript">
   3:     function ClosePopup() {
   4:         $find('modal').hide(); 
   5:         return false;
   6:     }
</script>

Here is the entire code behind:

   1: protected void Page_Load(object sender, EventArgs e)
   2:  {
   3:      if (!IsPostBack)
   4:      {
   5:    
   6:      }
   7:      else
   8:      {
   9:          string postBackControlName = GetPostBackControlName(this.Page);
  10:          if (postBackControlName == "btnSave" || postBackControlName == "DropdDownList1")
  11:          {
  12:              ModalPopupExtender1.Show();
  13:          }
  14:      }
  15:  }
  16:  
  17:  protected void btnSave_Click(object sender, EventArgs e)
  18:  {
  19:      if (Page.IsValid)
  20:      {
  21:          lblMessage.Visible = true;
  22:      }
  23:  }
  24:  protected void DropdDownList1_SelectedIndexChanged(object sender, EventArgs e)
  25:  {
  26:  
  27:  }
  28:  
  29:  public static string GetPostBackControlName(Page page)
  30:  {
  31:      string strControlName = "";
  32:      Control control = null;
  33:      //first we will check the "__EVENTTARGET" because if post back made by the controls
  34:      //which used "_doPostBack" function also available in Request.Form collection.
  35:      string ctrlname = page.Request.Params["__EVENTTARGET"]; if (ctrlname != null && ctrlname != String.Empty)
  36:      {
  37:          control = page.FindControl(ctrlname);
  38:      }
  39:       // if __EVENTTARGET is null, the control is a button type and we need to
  40:       // iterate over the form collection to find it
  41:      else
  42:      {
  43:          string ctrlStr = String.Empty;
  44:  
  45:          Control c = null;
  46:          foreach (string ctl in page.Request.Form)
  47:          {
  48:              //handle ImageButton they having an additional "quasi-property" in their Id which identifies
  49:              //mouse x and y coordinates
  50:              if (ctl.EndsWith(".x") || ctl.EndsWith(".y"))
  51:              {
  52:                  ctrlStr = ctl.Substring(0, ctl.Length - 2);
  53:                  c = page.FindControl(ctrlStr);
  54:              }
  55:              else
  56:              {
  57:                  c = page.FindControl(ctl);
  58:              }
  59:              if (c is System.Web.UI.WebControls.Button)
  60:              {
  61:                  control = c;
  62:                  break;
  63:              }
  64:          }
  65:      }
  66:      if (control != null)
  67:          strControlName = control.ID;
  68:    
  69:      return strControlName;
  70:  
  71:  }

In the above code the method GetPostBackControlName returns the name of the control that caused the postback. This method has been taken from the following post: http://geekswithblogs.net/mahesh/archive/2006/06/27/83264.aspx so all credits (if its original) to that poster for that code. You could find more explanation of the that method in that link.

How to above code works is like this: So when you run the above code, it would show a button, on click of that button I am showing a modal popup with some controls. When you hit save or you change the dropdownlist (autopostback=true), the page hits the page load event where in I check if the page is postback, if it is I find the name of the control which caused the postback and show the modal pop up and thus the modal pop up stays instead of hiding.

Hope this helps.

Posted: Sep 16 2010, 10:26 PM by karan@dotnet | with 2 comment(s) |
Filed under: ,
Calling Server Side Method Using jQuery/Ajax

With this post I would show how to call server side method from client side. Here we will use jQuery to utilize the Ajax Capabilities which will help us to get/post data to/from server Asynchronously. There are many methods available to perform an async callback to the server. Here I will show a simple example as in how to call a code behind Webmethod.

For simplicity I would be calling the code behind method on a Button Click. Here is the code:

Aspx markup:

   1: <asp:Button ID="Button1" runat="server" Text="Click" />
   2: <br /><br />
   3: <div id="myDiv"></div>

jQuery:

   1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
   2:   <script type ="text/javascript">
   3:       $(document).ready(function () {
   4:           $('#<%=Button1.ClientID %>').click(function () {
   5:               $.ajax({
   6:                   type: "POST",
   7:                   url: "WebForm1.aspx/ServerSideMethod",
   8:                   data: "{}",
   9:                   contentType: "application/json; charset=utf-8",
  10:                   dataType: "json",
  11:                   async: true,
  12:                   cache: false,
  13:                   success: function (msg) {
  14:                       $('#myDiv').text(msg.d); 
  15:                   }
  16:               })
  17:               return false;
  18:           });
  19:       });
  20:   </script>

Code Behind (C#):

   1: [WebMethod]
   2:    public static string ServerSideMethod()
   3:    {
   4:        return "Message from server.";
   5:    }

In the above code, the aspx markup contains a button on click of which we would call the server side method named ServerSideMethod(). The div would show the message returned from the server. When you run the code above and click the button, it would the div would show the message "Message from server".

If you want to send parameters to your code behind method, you would change the line 8 in the above jQuery code as:

   1: data: "{'param1': 1}"

With the above line I would be sending a parameter with value as 1 to the server side method.

The method would change as:

   1: [WebMethod]
   2:    public static string ServerSideMethod(string param1)
   3:    {
   4:        return "Message from server with parameter:"+param1;
   5:    }

The output will now be:

Message from server with parameter:1

You could also call any webmethod method in your webservice by changing the url in the jQuery as:

   1: url: "WebService1.asmx/ServerSideMethod"

where WebService1 is your webservice and ServerSideMethod is your webmethod in WebService1.

Recently I have seen a lot of questions from members in the asp.net forums asking about how to call Javascript confirm on button click and then based on user selection ie Yes/No process code behind logic.

Here is another example of how to do so:

   1: function MyConfirmMethod() {
   2:         if (confirm('Are your sure?')) {
   3:             $.ajax({
   4:                 type: "POST",
   5:                 url: "WebForm1.aspx/ServerSideMethod",
   6:                 data: "{}",
   7:                 contentType: "application/json; charset=utf-8",
   8:                 dataType: "json",
   9:                 success: function (msg) {
  10:                     $('#myDiv').text(msg.d);
  11:                 }
  12:             });
  13:             return false;
  14:         }
  15:         else {
  16:             return false;
  17:         }
  18:     }
   1: protected void Page_Load(object sender, EventArgs e)
   2:   {
   3:       Button1.Attributes.Add("onclick", "return MyConfirmMethod();");
   4:   }
   5:   [WebMethod]
   6:   public static string ServerSideMethod()
   7:   {
   8:       return "Message from server!";
   9:   }

Above you will see I am calling javascript confirm on the button click. On pressing yes, jQuery calls code behind method ServerSideMethod and returns back the message. You could perform any server side logic/database operations here based on the user response. Note I use return false as it prevents postback to the server.

Posted: Sep 12 2010, 10:47 PM by karan@dotnet | with 18 comment(s) |
Filed under: , ,
More Posts