Web Application Development: September 2013

Friday, 13 September 2013

How to use Session State/Session Object in HTTPHandler

Have your HttpHandler inherit from IRequiresSessionState. It will enable session state use. IRequiresSessionState can be found in the System.Web.SessionState namespace.

Example:

using System.Web.SessionState;

public class SMSHandler : IHttpHandler,IRequiresSessionState

{

public void ProcessRequest(HttpContext context)
{

//Your code goes here..
}
}

Source: how-to-use-asp-net-session-state-in-an-httphandler

Wednesday, 4 September 2013

Responsive Design in 3 Steps

Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive designmight sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I've put together a quick tutorial. I promise you can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge).

Step 1. Meta Tag (view demo)

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head>.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Internet Explorer 8 or older doesn't support media query. You can use media-queries.jsor respond.js to add media query support in IE.

<!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Step 2. HTML Structure

In this example, I have a basic page layout with a header, content container, sidebar, and a footer. The header has a fixed height 180px, content container is 600px wide and sidebar is 300px wide.

Step 3. Media Queries

CSS3 media query is the trick for responsive design. It is like writing if conditions to tell the browser how to render the page for specified viewport width.

The following set of rules will be in effect if the viewport width is 980px or less. Basically, I set all the container width from pixel value to percentage value so the containers will become fluid.

Then for viewport 700px or less, specify the #content and #sidebar to auto width and remove the float so they will display as full width.

For 480px or less (mobile screen), reset the #header height to auto, change the h1 font size to 24px and hide the #sidebar.

You can write as many media query as you like. I've only shown 3 media queries in my demo. The purpose of the media queries is to apply different CSS rules to achieve different layouts for specified viewport width. The media queries can be in the same stylesheet or in a separate file.

iPhone Safari Viewport Scaling Bug

Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landscape view. To see this in action, view the bug demo page with your iPhone and rotate the phone from portrait to landscape view (you should see the page being scaled up). This is a known bug for a long time. Today I'm going to share some tips on how to fix this bug.

Problem (view demo)

View the demo page with an iPhone and rotate the phone from portrait to landscape.

Solution 1: Quick Meta Tag Fix (view demo)

A quick fix to this issue is by setting maximum-scale=1 in the viewport meta tag. This fixes the problem, but the downside is that the page will no longer be zoomable with the zoom gesture.

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

Solution 2: Javascript (view demo)

For usability concerns, setting maximum-scale is not an ideal solution because user can not zoom the page. Fortunately, there is a Javascript fix which was discovered by @mathias, @cheeaun and @jdalton. Add the following Javascript in the <head> to fix the viewport scaling bug on orientation change. With this Javascript fix, the page remains zoomable.

Source:Webdesignerwall

How to display alert message from javascript inside the ASPXCallbackPanel

protected void OnCallback(object source, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)

         ASPxCallbackPanel callbackPanel = (ASPxCallbackPanel)source;

          callbackPanel.Controls.Add(new LiteralControl("My New Content"));

         WebControl script = new WebControl(HtmlTextWriterTag.Script);

      callbackPanel.Controls.Add(script);

      script.Attributes["id"] = "dxss_123456";

    script.Attributes["type"] = "text/javascript";

     script.Controls.Add(new LiteralControl("var str = 'test'; alert(str);"));

How to Display context menu in AspxGridView Column Headers

Default.aspx:
=============

<dx:ASPxGridView ID="grvContexMenuExample" runat="server" AutoGenerateColumns="false" KeyFieldName="ID" EnableViewState="true" ClientInstanceName="grdtest" Width="100%" Settings-GridLines="None" OnHtmlRowPrepared="grvContexMenuExample_HtmlRowPrepared">
    <ClientSideEvents ContextMenu="function(s,e) {

             if(e.objectType == 'header')

              {
                 headerContextMenu.ShowAtPos(e.htmlEvent.clientX, e.htmlEvent.clientY);
}
                                                         else if(e.objectType == 'row')
                                                         {
                                                             headerContextMenu.ShowAtPos(e.htmlEvent.clientX, e.htmlEvent.clientY);
                                                         }
                                                    }" />
    <Columns>

    <%--Your columns goes here--%>
        <columns>
</dx:ASPxGridView>

<!--Start New  Context Menu !-->
<dx:ASPxPopupMenu ID="mnContextMenu" runat="server" ClientInstanceName="headerContextMenu"
    EnableAnimation="false" PopupHorizontalAlign="OutsideRight" PopupVerticalAlign="TopSides"
    PopupAction="RightMouseClick">
    <Items>
        <dx:MenuItem Text="New Context Menu1">
        </dx:MenuItem>
    </Items>
    <ClientSideEvents ItemClick="ContextMenuItemClick" />
</dx:ASPxPopupMenu>
<!--End New   Context Menu !-->






Default.aspx.cs:
================

  protected void grvContexMenuExample_HtmlRowPrepared(object sender, ASPxGridViewTableRowEventArgs e)
        {


            if (e.RowType == GridViewRowType.Data)

                if (e.RowType == GridViewRowType.Header)
                {

                    e.Row.Attributes.Remove("oncontextmenu");
                }


        }

How to show aspxpopup control on button click instead of enter key press

Steps:
====
1. I have two textboxes and one button and one aspxpopupcontrol in a aspxwebpage
2. I attached Keypress event for two textboxes and i have attached button OnClientClick event from C# code behind to show aspxpopupcontrol.
3. Here problem is when ever i enter some data in any one of the text and press enter it is executing textbox keypress event as well as it showing aspxpopupcontrol. it is very annoying to the user.
4. I resolved this issue by using the following devexpress client side method in textbox keypress event.
                       ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);

Example:
========

<dx:ASPxTextBox runat="server" ID="txtSearch" ClientInstanceName="txtSearch" NullText="Search by Text" Style="border-radius: 4px 4px 4px 4px;">
<ClientSideEvents KeyPress="function(s,e){
                                                                var keypressed=ASPxClientUtils.GetKeyCode(e.htmlEvent);
                                                                if(keypressed ==13)
                                                                  {
                                                                        //Your client side functionality goes here
                                                                        ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);
                                                                  }}" />
</dx:ASPxTextBox>

<dx:ASPxTextBox runat="server" ID="txtTagSearch" ClientInstanceName="txtTagSearch" NullText="Search by Tag" Style="border-radius: 4px 4px 4px 4px;">
<ClientSideEvents KeyPress="function(s,e){
                                                                var keypressed=ASPxClientUtils.GetKeyCode(e.htmlEvent);
                                                                if(keypressed ==13)
                                                                  {
                                                                        //Your client side functionality goes here
                                                                        ASPxClientUtils.PreventEventAndBubble(e.htmlEvent);
                                                                  }}" />
</dx:ASPxTextBox>

<asp:ImageButton ID="btnShowCustomViewBuilder" CausesValidation="true" runat="server" ImageUrl="~/Styles/Images/FilterIcon.png"
OnClientClick=" popup.Show(); return false" />

<dx:ASPxPopupControl ID="AspxPopupControl1" runat="server" Modal="True" AutoUpdatePosition="true" HeaderStyle-Font-Bold="true"
    PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" AllowDragging="true" AccessibilityCompliant="false"
    ShowLoadingPanel="false" HeaderText="Example Popup" ClientInstanceName="popup" PopupAction="LeftMouseClick"
    Width="520px">
    <ContentCollection>
        <dx:PopupControlContentControl ID="PopupControlContentControl3" runat="server" SupportsDisabledAttribute="True">

<table>

<tr>

<td> //Your content goes here </td>

</tr>

</table>

</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxPopupControl>

Reference to resolve above issue

How filter Date Column data in Devexpress XPO XPDataView

public string GetCreatedDate(string period, string column, string customFilterFrom = null, string CustomFilterTo = null)
        {

            string date = string.Empty; string filterexp = string.Empty;
            DateTime dt = DateTime.Today;
            switch (period.ToUpper())
            {

                case "CUSTOM":
                    date = new BetweenOperator(column, Convert.ToDateTime(customFilterFrom.Replace("/", "- ")), Convert.ToDateTime(CustomFilterTo.Replace("/", "-"))).ToString();

                    break;
                case "TODAY":
                    date = new BetweenOperator(column, dt, dt.AddDays(1)).ToString(); //string.Format("[{1}] = #{0}#", dt, column);//.ToString("MM/dd/yyyy")
                    break;
                case "LASTDAY":
                     date = new BetweenOperator(column,dt.AddDays(-1),dt).ToString();
                    break;
                case "THISYEAR":
                    date = new BetweenOperator(column, new DateTime(DateTime.Now.Year, 4, 1), dt.AddDays(1)).ToString();
                    break;

                case "THISMONTH":
                    date = new BetweenOperator(column, new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1), dt.AddDays(1)).ToString();
                    break;
                case "LASTMONTH":
                    date = new BetweenOperator(column, new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1).AddMonths(-1), new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1).AddDays(-1)).ToString();

                    break;
                case "THISWEEK":
                    int days = (DateTime.Now.DayOfWeek - DayOfWeek.Sunday) - 1;
                    DateTime thisweek = DateTime.Now.AddDays(-(days));
                    date = new BetweenOperator(column, thisweek, thisweek.AddDays(days)).ToString();
                    break;
                case "LASTWEEK":
                    int diff = (DateTime.Now.DayOfWeek - DayOfWeek.Sunday) + 6;
                    DateTime mondayOfLastWeek = DateTime.Now.AddDays(-diff);
                    date = new BetweenOperator(column, mondayOfLastWeek, mondayOfLastWeek.AddDays(diff -6)).ToString();
                     break;
                default:
                    date = string.Format("[{0}] = '{1}'", column, period);
                    break;

            }
            return date;
        }

Refer my original post in devexpress : Unable to filter date values in xpo DataSource

Tuesday, 3 September 2013

How to calculate quarters in sql

Here are a few uses of the DATEADD date function:

Usage #1 : Get the Date Part of a DATETIME Value

SELECT DATEADD(DD, DATEDIFF(DD, 0, GETDATE()), 0) AS [Date Part Only]

Usage #2 : Get the First Day of the Month, Quarter and Year

SELECT DATEADD(MM, DATEDIFF(MM, 0, GETDATE()), 0) AS [First Day of the Month]
SELECT DATEADD(Q, DATEDIFF(Q, 0, GETDATE()), 0) AS [First Day of the Quarter]
SELECT DATEADD(YEAR, DATEDIFF(YEAR, 0, GETDATE()), 0) AS [First Day of the Year]

Usage #3 : Get the Last Day of the Month, Quarter and Year

SELECT DATEADD(MM, DATEDIFF(MM, 0, GETDATE()) + 1, 0) - 1 AS [Last Day of the Month]
SELECT DATEADD(Q, DATEDIFF(Q, 0, GETDATE()) + 1, 0) - 1 AS [Last Day of the Quarter]
SELECT DATEADD(YEAR, DATEDIFF(YEAR, 0, GETDATE()) + 1, 0) - 1 AS [Last Day of the Year]

Usage #4 : Get the First Day of the Following Month, Quarter and Year

SELECT DATEADD(MM, DATEDIFF(MM, 0, GETDATE()) + 1, 0) AS [First Day of Next Month]
SELECT DATEADD(Q, DATEDIFF(Q, 0, GETDATE()) + 1, 0) AS [First Day of Next Quarter]
SELECT DATEADD(YEAR, DATEDIFF(YEAR, 0, GETDATE()) + 1, 0) AS [First Day of Next Year]

Usage #5 : Get the Last Day of the Following Month, Quarter and Year

SELECT DATEADD(MM, DATEDIFF(MM, 0, GETDATE()) + 2, 0) - 1 AS [Last Day of Next Month]
SELECT DATEADD(Q, DATEDIFF(Q, 0, GETDATE()) + 2, 0) - 1 AS [Last Day of Next Quarter]
SELECT DATEADD(YEAR, DATEDIFF(YEAR, 0, GETDATE()) + 2, 0) - 1 AS [Last Day of Next Year]

Usage #6 : Get the First Day of the Previous Month, Quarter and Year

SELECT DATEADD(MM, DATEDIFF(MM, 0, GETDATE()) - 1, 0) AS [First Day Of Previous Month]
SELECT DATEADD(Q, DATEDIFF(Q, 0, GETDATE()) - 1, 0) AS [First Day Of Previous Quarter]
SELECT DATEADD(YEAR, DATEDIFF(YEAR, 0, GETDATE()) - 1, 0) AS [First Day Of Previous Year]

Usage #7 : Get the Last Day of the Previous Month, Quarter and Year

SELECT DATEADD(MM, DATEDIFF(MM, 0, GETDATE()), 0) - 1 AS [Last Day of Previous Month]
SELECT DATEADD(Q, DATEDIFF(Q, 0, GETDATE()), 0) - 1 AS [Last Day of Previous Quarter]
SELECT DATEADD(YEAR, DATEDIFF(YEAR, 0, GETDATE()), 0) - 1 AS [Last Day of Previous Year]

Source: SQL Server Helper

DECLARE @mydate DATETIME

SELECT @mydate = GETDATE()

SELECT CONVERT(VARCHAR(25),DATEADD(dd,-(DAY(@mydate)),@mydate),101) ,

'Last Day of Previous Month'

UNION

SELECT CONVERT(VARCHAR(25),DATEADD(dd,-(DAY(@mydate)-1),@mydate),101) AS Date_Value,

'First Day of Current Month' AS Date_Type

UNION

SELECT CONVERT(VARCHAR(25),@mydate,101) AS Date_Value, 'Today' AS Date_Type

UNION

SELECT CONVERT(VARCHAR(25),DATEADD(dd,-(DAY(DATEADD(mm,1,@mydate))),DATEADD(mm,1,@mydate)),101) ,

'Last Day of Current Month'

UNION

SELECT CONVERT(VARCHAR(25),DATEADD(dd,-(DAY(DATEADD(mm,1,@mydate))-1),DATEADD(mm,1,@mydate)),101) ,

'First Day of Next Month'

--------------------------------------------------------------------------------------------------

----TodaySELECT GETDATE() 'Today'
----YesterdaySELECT DATEADD(d,-1,GETDATE()) 'Yesterday'
----First Day of Current WeekSELECT DATEADD(wk,DATEDIFF(wk,0,GETDATE()),0) 'First Day of Current Week'
----Last Day of Current WeekSELECT DATEADD(wk,DATEDIFF(wk,0,GETDATE()),6) 'Last Day of Current Week'
----First Day of Last WeekSELECT DATEADD(wk,DATEDIFF(wk,7,GETDATE()),0) 'First Day of Last Week'
----Last Day of Last WeekSELECT DATEADD(wk,DATEDIFF(wk,7,GETDATE()),6) 'Last Day of Last Week'
----First Day of Current MonthSELECT DATEADD(mm,DATEDIFF(mm,0,GETDATE()),0) 'First Day of Current Month'
----Last Day of Current MonthSELECT DATEADD(ms,- 3,DATEADD(mm,0,DATEADD(mm,DATEDIFF(mm,0,GETDATE())+1,0))) 'Last Day of Current Month'
----First Day of Last MonthSELECT DATEADD(mm,-1,DATEADD(mm,DATEDIFF(mm,0,GETDATE()),0)) 'First Day of Last Month'
----Last Day of Last MonthSELECT DATEADD(ms,-3,DATEADD(mm,0,DATEADD(mm,DATEDIFF(mm,0,GETDATE()),0))) 'Last Day of Last Month'
----First Day of Current YearSELECT DATEADD(yy,DATEDIFF(yy,0,GETDATE()),0) 'First Day of Current Year'
----Last Day of Current YearSELECT DATEADD(ms,-3,DATEADD(yy,0,DATEADD(yy,DATEDIFF(yy,0,GETDATE())+1,0))) 'Last Day of Current Year'
----First Day of Last YearSELECT DATEADD(yy,-1,DATEADD(yy,DATEDIFF(yy,0,GETDATE()),0)) 'First Day of Last Year'
----Last Day of Last YearSELECT DATEADD(ms,-3,DATEADD(yy,0,DATEADD(yy,DATEDIFF(yy,0,GETDATE()),0))) 'Last Day of Last Year'

Web Application Development

Friday, 13 September 2013

How to use Session State/Session Object in HTTPHandler

Wednesday, 4 September 2013

Responsive Design in 3 Steps

Step 1. Meta Tag (view demo)

Step 2. HTML Structure

Step 3. Media Queries

Problem (view demo)

Solution 1: Quick Meta Tag Fix (view demo)

Solution 2: Javascript (view demo)

How to display alert message from javascript inside the ASPXCallbackPanel

How to Display context menu in AspxGridView Column Headers

How to show aspxpopup control on button click instead of enter key press

How filter Date Column data in Devexpress XPO XPDataView

Tuesday, 3 September 2013

How to calculate quarters in sql

Source: Kreato Crm

How to Send Email from Python

Pages

Search This Blog