Abdulla AbdelHaq Blog

ForEach(minute in MyLife) {<br/> &nbsp;&nbsp;&nbsp;myExperience ++;<br/> }

  • How To : Create Custom Paging Grid Using JSON + JQuery + ASP.NET

    In this article, I am going to create a light weight grid that display data from DB in a custom paging way just like Facebook & twitter without postback using JSON & JQuery.

    Let's take this case, you have a comments table that contains large number of records and want to display them in a web page. before start typing the code, we need to take the below points into considerations:

    • Since we have large number of records and cannot be retrieved all in the page load, we are going to create custom paging stored procedure that retrieved small chunks of data page per page.
    • The page should be light and fast, so we need to kill the ASP.NET Evil(the viewstate) by using Jquery to draw the html table & JSON to Ajaxify the page and make it faster and light than using the regular Ajax Code (JSON is an Object Notation String based where the regualre Ajax is an XML based which makes it faster, lighter and easy to deal with).

    The DataBase Part

    Using SQL Server 2008, create a new table name it [CommentsTable] as you can see in the below figure:

    CommentsTable

    Create New Stored Procedure and name it [GetComments_Paging] and write the below code :

     CREATE PROCEDURE [dbo].[GetComments_Paging]
      
      @PageNum INT,
      @RowCount INT
     
    AS
    BEGIN

    SELECT [t1].*
    FROM (SELECT ROW_NUMBER() OVER (ORDER BY [t0].[CommentId]) AS [ROW_NUMBER],[t0].CommentId,
        [t0].CommentTitle,[t0].CreatedOn,[t0].UserName,[t0].CommentBody 
         FROM CommentsTable AS [t0]) AS [t1] WHERE [t1].[ROW_NUMBER]
         BETWEEN @PageNum AND @PageNum + @RowCount ORDER BY [t1].[ROW_NUMBER]


    END

    As you noticed, the stored procedure takes two input parametrs (@PageNum to indicate which page index you want to retrieve) and (@RowCount to specify how many records you want to retrieve) .

    The WebSerivce Part

    We need to create a class (clsComments) to be the container of the comments data and to use it with the JSON code. as below

    Then we will create a webservice called (CommentService.asmx) and as below:

    It is important to know that we need to add [System.Web.Script.Services.ScriptService] attribute typically above the class name to allow this Web Service to be called from Javascript.

    The ASP.NET Part

    add the below HTML code

    Now we will let JSON call our CommentService.asmx and Jquery will bind the results inside ResultsTable Div.

    and test whether the page is doing a post back or not, add the below code behind

    public partial class _Default : System.Web.UI.Page
    {
        protected const int rowsCount = 2;

        protected void Page_Load(object sender, EventArgs e)
        {
            lblDate.Text = DateTime.Now.ToLongTimeString();
           
        }
    }

     

    Now run the page and click on More Comments button and notice how the comments get displayed page per page without postback as below

    hope someone will found it useful.

    ~ Abdulla AbdelHaq

    Read more...

  • How to : Create Custom Ajax Extender Control

     I have already published this article before on aspalliance.com website and I received a good feedback and it is now listed on the most popular articles on aspalliance, so I would like to publish it here again on my blog.

    Ok then,in this article, I will demonstrates how to create a new Ajax extender from scratch, which expands the properties of ASP.NET controls, by adding custom Tooltip behavior that targets all types of web controls dragged to your page. first I am going to provide a short overview of Ajax extender controls and then delves deep into the creation of a new Ajax extender with the help of Visual Studio. After that, I'll provide a detailed analysis of the code along with relevant screenshots. At the end of the article, we will examine how to make use of the created extender control.

     
    Brief explanation about creating a new Ajax extender
     

    What is Ajax extender control?

    Ajax extender control is a control whose purpose is to add a behavior to the

    existing ASP.NET controls. These behaviors usually are client side behaviors

     that will extend the functionality of an existing ASP.NET control. I mention the

    sentence "an existing ASP.NET control" twice, to ensure the concept of Ajax

    Extender controls. The difference between Ajax extender control and custom

    server controls is that the custom server controls allow you to create a new server

     control that will work separately without extending any other controls. 

    One of the interesting features that Ajax extenders offer is calling web services; we

    can hit the server and get some data from it without making the end-user notice.

    For example, the AutoComplete Extender Control uses the web service for filtering

    the typed text from Database without any flickers.

    You can find a lot of resources and articles that talk about Ajax extenders, especially

    here in aspalliance.com.

    ASP.NET Ajax controls project

    To create a new Ajax extender, open your Visual Studio, and then create a new

    ASP.NET AJAX Control Project, as illustrated in Figure1.

    Figure1

    projecttypePic2

    By default, this will create three files:

    ·         <your extender name>Behavior.js file: an embedded JavaScript file,

    where we will locate our client-side logic.

    ·         <your extender name>Designer.vb file: a class that enables

     design-time functionality. You should not need to modify it.

    ·         <your extender name>Extender.vb file: a server-side control class

    that will manage the creation of your extender, and allow you to set the

     properties at design-time. It also defines the properties that can be set

    on your extender. These properties are accessible via code and at design

    time and match properties defined in the Behavior.js file.

    Ajax Library Shortcuts

    There are several shortcuts methods for writing client-side functionality, such as:

    ·         $addhandler: enables you to assign a handler function to an event

    ·         $clearhandlers: clears all the handlers that you have created

    ·         $removehandler: removes a specific event handler

    ·         $get: a shortcut for document.getElementById

    ·         $find: allows you to access the class object, and use the methods

    and properties

    Ajax Extender Logic

    Ajax extender logic is quite simple; the following steps explain this process with code samples.

    Create a property in the Extender.vb class, similar to what I did in Listing 1.

    Listing 1

    <ExtenderControlProperty()> _
    <DefaultValue("")> _
    Public Property MyProperty() As String
    Get
    Return GetPropertyValue("MyProperty", "")
    End Get
    Set(ByVal value As String)
    SetPropertyValue("MyProperty", value)
    End Set
    End Property

    Declare a property variable at initializeBase function in the Behavior JavaScript file,

    as illustrated in Listing 2.

    Listing 2

    this._myProperty = null; //Property Variable

    Write get/set property for the above variable, as in Listing 3, and remember it is

    case sensitive.

    Listing 3

    get_MyProperty: function()
    {
      return this._myProperty;
    }
    ,
    set_MyProperty: function(value)
    {
      this._myProperty = value;
    }
    ,

    Create a JavaScript function, which will be the container of your client-side logic.

    Listing 4

    _myFunction : function(e)
    {
      alert(this._myProperty);
    }

    Finally, add an event handler using the Ajax Library Shortcut $addhandler inside

    the initializefunction, as you can see in Listing 5. We added an event handler

    for the mouse over event, but note that we have removed the "on" prefix word

    and that is the role.

    We have created a delegate function that will be mapped to the _myFunction 

    function, which will be fired when the mouse is going to be over the extended control.

    Listing 5

    $addHandler(this.get_element(), 'mouseover', 
    Function.createDelegate(this,this._myFunction));

    Build the project, and that is it; you have created a simple Ajax Extender control.

    Tooltip Extender Variables & Properties
     

    Let us get back now for our new tool tip extender. We want to make this Tooltip look

     different than the regular Tooltip; i.e. page developer would customize the tool tip

    background color, change font name/color, and it will be better if we can delay the

    disappearing time of the tool tip.

    Look at Figure 2 which illustrates what the extender will look like after finishing this article.

    Figure 2

    fig2

    Now let us start building the Tool tip extender. As I mentioned, the ASP.NET Ajax Control

     Project Template will automatically create three files: (MyExtenderToolTipBehavior.js,MyExtenderToolTipDesigner.vb, and MyExtenderToolTipExtender.vb).

    Listing 6: Tooltip Extender Class

    <Designer(GetType(MyExtenderToolTipDesigner))> _
        <TargetControlType(GetType(WebControl))> _
        Public Class MyExtenderToolTipExtender
            Inherits ExtenderControlBase
            <ExtenderControlProperty()> _
               <DefaultValue("")> _
               Public Property ToolTipText() As String
                Get
                    Return GetPropertyValue("ToolTipText""")
                End Get
                Set(ByVal value As String)
                    SetPropertyValue("ToolTipText", value)
                End Set
            End Property
            <ExtenderControlProperty()> _
              <DefaultValue(200)> _
              Public Property ToolTipWidth() As System.Web.UI.WebControls.Unit
                Get
                    Return GetPropertyValue("ToolTipWidth", Unit.Pixel(200))
                End Get
                Set(ByVal value As System.Web.UI.WebControls.Unit)
                    SetPropertyValue("ToolTipWidth", value)
                End Set
            End Property
     
            <ExtenderControlProperty()> _
               <DefaultValue("#5E8DD0")> _
               Public Property ToolTipBgColor() As String
                Get
                    Return GetPropertyValue("ToolTipBgColor""#5E8DD0")
                End Get
                Set(ByVal value As String)
                    SetPropertyValue("ToolTipBgColor", value)
                End Set
            End Property
            <ExtenderControlProperty()> _
                    <DefaultValue("Verdana")> _
                    Public Property ToolTipFontName() As String
                Get
                    Return GetPropertyValue("ToolTipFontName""Verdana")
                End Get
                Set(ByVal value As String)
                    SetPropertyValue("ToolTipFontName", value)
                End Set
            End Property
            <ExtenderControlProperty()> _
                  <DefaultValue("White")> _
                  Public Property ToolTipFontColor() As String
                Get
                    Return GetPropertyValue("ToolTipFontColor""White")
                End Get
                Set(ByVal value As String)
                    SetPropertyValue("ToolTipFontColor", value)
                End Set
            End Property
            <ExtenderControlProperty()> _
            <DefaultValue(250)> _
            Public Property DisappearDelay() As Integer
                Get
                    Return GetPropertyValue("DisappearDelay", 250)
                End Get
                Set(ByVal value As Integer)
                    SetPropertyValue("DisappearDelay", value)
                End Set
            End Property
    End Class

    Listing 6 is the Tool tip extender class; you can see many properties and

    attributes in there.

     Since it is a tool tip at the end, it should be targeting all web controls types.

     Therefore, theTargetControlType(GetType(WebControl) attribute will be used

    to allow our extender to target any web control in the page. This attribute will

    insert all the extender properties as new collection properties in the target control.

    The DisappearDelay property will delay the disappearing time of the tool tip in

     milliseconds, the default value attribute is set to be 250 milliseconds.

    Now we need to set the position of the tool tip to be an absolute position,

    the z-index should be equal to 100, and that will occur in the embedded

    Style Sheet file, as you can see in Listing 7.

    Listing 7

    .tooltipdiv{
    position:absolute;
    padding: 2px;
    border:1px solid black;
    font-size:12px;
    font-weight:normal;
    line-height:18px;
    z-index:100;
    }

    You should add the style sheet file to the extender web resources assembly, as in Listing 8.

    Listing 8

    <Assembly: System.Web.UI.WebResource("MyExtenderToolTip.MyExtenderToolTipCss.css", 
    "text/css")>

    In addition, we need to add it to the client cascade style sheet resources, as you see in Listing 9.

    Listing 9

    <ClientCssResource("MyExtenderToolTip.MyExtenderToolTipCss.css")>

    The client-side logic will be located in the behavior JavaScript file, discussed in the next section.

    Behavior JavaScript File
     

    The major goal is to extend the behavior of the ASP.NET control, so the Behavoir.js file will play

    a key role in that process.

    As I explained in "Brief explanation about creating a new Ajax extender" section, 

    we should create a property variable in the initializeBase function for each public property in the

    Extender Class, as you see in Listing 10.

    Listing 10

    this._toolTipText = '';
    this._toolTipWidth = '200px'; 
    this._toolTipBgColor = '#5E8DD0'; 
    this._toolTipFontName='Verdana';
    this._toolTipFontColor='White';
    this._disappearDelay=250;

    If you recall, we need to write a get/set client-side property for each variable,

    which is shown in Listing 11.

    Listing 11

    get_ToolTipText: function()
    {
      return this._toolTipText;
    }
    ,
    set_ToolTipText: function(value)
    {
      this._toolTipText = value;
    }
     
    , set_ToolTipWidth: function(value)
    {
      this._toolTipWidth = value;
    }
     
    , get_ToolTipWidth: function()
    {
      return this._toolTipWidth;
    }
     
    , set_ToolTipBgColor: function(value)
    {
      this._toolTipBgColor = value;
    }
     
    , get_ToolTipBgColor: function()
    {
      return this._toolTipBgColor;
    }
     
    , set_ToolTipFontName: function(value)
    {
      this._toolTipFontName = value;
    }
     
    , get_ToolTipFontName: function()
    {
      return this._toolTipFontName;
    }
     
    , set_ToolTipFontColor: function(value)
    {
      this._toolTipFontColor = value;
    }
     
    , get_ToolTipFontColor: function()
    {
      return this._toolTipFontColor;
    }
     
    , set_DisappearDelay: function(value)
    {
      this._disappearDelay = value;
    }
     
    , get_DisappearDelay: function()
    {
      return this._toolTipFontColor;
    }
    ,

    Now lets do the trick, as you can see in Listing 12, we have created a new HTML Div element in initialize function, which will be the tool tip. 

    Listing 12

     var newDiv = document.createElement('div');
     newDiv.id = this.get_element().id + '_fixedtipdiv';
     newDiv.style.visibility='hidden';
     newDiv.style.width=this._toolTipWidth;
     newDiv.style.backgroundColor=this._toolTipBgColor;
     newDiv.style.fontFamily=this._toolTipFontName;
     newDiv.style.color=this._toolTipFontColor;
     newDiv.className='tooltipdiv';
     document.body.appendChild(newDiv);

    We will add an event handler when the mouse is over and out of the content.

    These handlers will be located at the initialize function, as you see in Listing 13.

    Note that I have removed the "On" prefix word from the event name.

    If you download the source code, you will see the _fixedtooltip function, and the

     _delayhidetipfunction in more details; these two JavaScript functions are responsible

    of show/hide the tool tip.In addition, many JavaScript functions are responsible for

    creating the client-side behavior for the extender.

    Listing 13

    $addHandler(this.get_element(), 'mouseover',Function.createDelegate(this, 
    this._fixedtooltip));
    $addHandler(this.get_element(), 'mouseout', 
    Function.createDelegate(this,this._delayhidetip));

    Now let us test our new extender.

    Using the Extender
     

    To add the extender in your Toolbox, follow the subsequent steps.

    Right click on the toolbox window then choose "Add Tab."

    Type the name you want for the new tab then right click over it, and click "Choose Items."

    Click on Browse button in the ".NET Framework Components" tab, go to the

    tool tip extender project, open the bin folder, and choose MyExtenderToolTip.dll.

    The result is shown Figure 3.

    Figure 3

    fig3

    That is it, all you need now is to drag the extender, and target the web control over which

     you want to display the custom tool tip.

    As you see in Figure 4 and Figure 5, I dragged two tool tip extenders, one for the textbox

    and the other for the button. Moreover, I customized the Tooltip to match my requirements.

    Figure 4

    fig4

    Figure 5

    Figure 6 shows you how the extender properties are added as new collection properties

    in the Textbox control.

    Figure 6

     

    fig6

     

     

    Conclusion
     

    The article covered the concept of the Ajax extenders, and how you can create a new

    extender. In addition, we have created a new custom Tooltip Ajax extender from scratch.

    It is you turn now to create your own Ajax extender.

     

    I hope you found this informative.

    ~ Abdulla AbdelHaq

    Read more...

  • Abdulla AbdelHaq Sessions on JorDev User Group.

     

    Location : Jordan - Microsoft Innovation Center
    Time :  6:25PM Wednesday, October 28th 2009
     

    • ASP.NET Fundamentals for MSPs Day, Nov 2009
    http://microsoftfeed.com/2009/microsoft-student-partners-awareness-day-by-jordan-communities/trackback/
    After the success of “Jordan Remix 2009“, recently, Jordan SharePoint User Group, JorDev .NET User Group and Jordan IT Professional’s User Group in association with Microsoft Jordan conducted the first ever “Microsoft Student Partners Awareness Day” inside the Microsoft Innovation Center.

    Microsoft Student Partners from major Jordanian Universities attended their first official event that took the style of a brainstorming sessions delivered by the remarkable speakers of these user groups.

     

    • Jordan – First .Net Club Launch at Petra University by Jordev

                http://microsoftfeed.com/2009/jordan-first-net-club-launch-at-petra-university-by-jordev/

     http://weblogs.asp.net/abdullaabdelhaq/pages/asp-net-fundamentals-petra-university.aspx



    • Jordan – .Net Club Launched at Hashemite University by Jordev

               http://microsoftfeed.com/2010/jordan-net-club-launched-at-hashemite-university-by-jordev/

     


    • Jordan – .Net Club Launched at Al-Zyatoonah University by Jordev

            http://weblogs.asp.net/abdullaabdelhaq/pages/net-club-launch-in-al-zaytoonah-univ.aspx 


     


    • Introducing .NET 4.0 & ASP.NET 4.0 - Princess Sumaya University for Technology - Loaui Shammout Auditorium Feb 25, 2010
           http://weblogs.asp.net/abdullaabdelhaq/pages/introducing-net-4-0-amp-asp-net-4-0.aspx

     



    • Microsoft Parallel Computing Session - JorDev UserGroup Oct 26, 2011
           http://weblogs.asp.net/abdullaabdelhaq/archive/2012/01/19/microsoft-parallel-computing-session-jordev-group.aspx

     

     


    Read more...

  • PEX - Let Me Fix Your Code [JorDev User Group]

     Hello .NET Heroes,

     This is my session on Microsoft PEX that I gave on JorDev User Group (Jordan .NET User Group), and for those who do not know What JorDev is? it is simply one of the biggest .NET User Group in Middle East.

    Location : MIC (Microsoft Innovation Center)

     Time : 6:25PM Wednesday, October 28th 2009

    I was wondered before if there a kind of tool that check my code in few clicks, just like the spell checker of our word documents! 

    PEX is a Microsoft Research Project that help you to understand the behavior of .NET code, debugging issue and generating test cases for free.

    You can view that playlist of the session from JorDev You Tube Channel 

     Or you can view it right away from the below videos.

    The session was in Arabic, I am planing to translate it into English, but PEX team said that keep it in Arabic because it will target the Arabic speakers.

    The session also posted on Microsoft Reseach - PEX home page  http://research.microsoft.com/en-us/projects/pex/

     You can download the presentation slides from here , or from the attachment link at the bottom of the article.

    Note : Part1 is a brief introduction on Unit Testing, so if you want to see PEX directly, you can start from Part2

     

    Part 1

     

    Part 2

     

    Part 3

     

    Part 4

     

    Part 5

     

    I Hope Some One Will Find It Use Full.

     

    ~ Abdulla AbdelHaq

    Read more...