Read, With the Name of Your Lord Who Created

Posts Tagged ‘Web’

The Differences of ASP.NET Forms and Windows Forms in a Nutshell

Posted by triaslama on June 24, 2008

I think its quite interesting if we compare two things that has equalities and differences. Now we will talk about Forms (WebForms and WinForms).

As we already know WebForms uses browser as presentation (ASP.NET Forms is no exception) and Windows Forms has its own presentation. So we may agree that WebForms has the strength through its availability and WinForms through its rich user interface.

In this post I will talk about the differences, what I get from both forms (ASP.NET Forms and Windows Forms) at a glance. I hope this post not tedious for those who already familiar with ASP.NET and Windows Forms.

Base Class
An ASP.NET Form inherits Page class (contained in System.Web.UI namespace). Look at the following example:
Presentation page (Welcome.aspx):

    <%@ Page Language=”C#” debug=”true” CodeFile=”Welcome.aspx.cs” Inherits=”Welcome.HelloWorldClass” %>

    <html>
    <head>
    <title>Welcome To ASP.NET Form</title>
    <script lang=”C#” runat=”server”>
    </script>
    </head>
    <body>
    <form runat=”server”>
    <center><asp:Label id=”label” Font-Size=”25px” style=”font-weight:bold;” runat=”server” /></center>
    </form>
    </body>
    </html>

 

This is the code behind (Welcome.aspx.cs):

Read the rest of this entry »

Posted in .NET, ASP.NET, C#, Programming | Tagged: , , , , | 8 Comments »

Cursor Positions, Selected Text, and A Simple HTML Editor

Posted by triaslama on June 6, 2008

It would be nice if we have a HTML text editor that doing a simple task of HTML editor for us. It works just like HTML view of WordPress admin page when we write a post. We select the text press specific button and then the selected text will be enclosed with appropriate format. I Test the code in Mozilla Firefox and Internet Explorer, so in both browsers this code should works fine. Here the screenshoots:

Screenshoots page.

We need to prepare the prerequisites.

As prerequisites, at least we need two things. First, we need to know how to define the cursor position inside a <textarea> element, second we need to know how to retrieve a selected text inside a <textarea> element. So, for the first step, I will talk about the both things shortly.

Every browser brings the different behaviour. The browser quirk will make our code a little bit longer because we need to specify different code for different browser. Defining cursor position (current position) is trivial in Mozilla Firefox, but we need a little trick in Internet Explorer. If we want to retrieve selected text in a <textarea> element, both (Forefox and IE) has their own way too.

Defining Cursor Position Inside a <textarea> Element
In Firefox we just need the following code to determine the current position of cursor in a <textarea> element:

var currentPosition = txtArea.selectionStart;

txtArea is a <textarea> element.
Internet Explorer (I use IE 6) doesn’t have selectionStart and selectionEnd property, so we need a little more effort to determine start and end position of the cursor (this is a tricky way).

var range = document.selection.createRange();
var drange = range.duplicate();
drange.moveToElementText(txtArea);
drange.setEndPoint("EndToEnd", range);

var currentPosition = drange.text.length - range.text.length;
var endPosition = drange.text.length - currentPosition;

Read the rest of this entry »

Posted in HTML / CSS, Javascript | Tagged: , , , , , , , | 17 Comments »

Pagination in ASP.NET

Posted by triaslama on May 18, 2008

ASP.NET has DataGrid control, and datagrid control has build in support for pagination. What I do in this post is just something like datagrid pagination, but I add two buttons each of them to navigate to previous and next page respectively.

I use ListOfPage class to produce list of page number, you can see more on this class in my previous post here. For simplicity I use array of string as data source, in more common scenario maybe we use data from database, represent it in DataTable then use the DataTable as a data source.

I do the manual pagination in ASP.NET with code behind style. There is I put the code that produce list of page in a separate file (I named it ManualPagination.aspx.cs). The presentation page laid in ManualPagination.aspx which refers to our code behind file.

Let’s start with presentation page! It’s quite simple, this is the source code (ManualPagination.aspx):

    <%@ Page Language=”C#” CodeFile=”ManualPagination.aspx.cs” Inherits=”ManualPagination.CodeBehindClass” %><html>
    <head>
    <title>Manual Pagination in ASP.NET</title>
    <style type=”text/css”>
    .clr
    {
    background-color:lightblue;
    }
    </style>
    </head>
    <body>
    <form runat=”server”>
    <asp:Label id=”lblPresentation” runat=”server” />
    <p />
    <asp:Button id=”btnPrev” text=”Prev” onclick=”btnPrev_Click” runat=”server” />

    <asp:Label id=”lblPages” runat=”server” />

    <asp:Button id=”btnNext” text=”Next” onclick=”btnNext_Click” runat=”server” />
    </form>
    </body>
    </html>

 

One of the important portion of our presentation page relies on the following code:

Read the rest of this entry »

Posted in ASP.NET, C#, Javascript | Tagged: , , , , , , | Leave a Comment »

CSS in ASP.NET Server Controls, Declaratively vs. Programmatically

Posted by triaslama on May 7, 2008

ASP.NET controls has a bunch of attributes that take in order the look and feel of every control. For example TextBox server control, if we want the TextBox color turn into specific color we specify the ForeColor attribute to the name of Color defined in Color structure. If we want the TextBox text font appear in Georgia font, set Font-Name attribute to Georgia. ASP.NET TextBox script for above requirements will look something like this:

<asp:TextBox id="txtTest" ForeColor="Red" Font-Name="Georgia" runat="server" />

It looks simple, right?

But wait, for the one familiar with ASP.NET it doesn’t matter, but for everyone who already familiar with CSS maybe there is a bit problem because the attribute name of ASP.NET server controls slightly different with attribute in CSS file. So sometimes we may prefer that the looks and feels of ASP.NET controls ruled within CSS file. And yes, we can do this!

In ASP.NET information within a CSS file can be accessed either declaratively or programmatically, its up to you which one to choose. To make a CSS file visible within our page put this declaration inside our <head></head> tag:

<link rel="stylesheet" type="text/css" href="[filelocation/css_filename.css]" />

Read the rest of this entry »

Posted in .NET, ASP.NET, HTML / CSS | Tagged: , , , , , | 28 Comments »

Interacting With Get and Post Methods in ASP.NET

Posted by triaslama on May 1, 2008

There are two common ways to pass data from one page to another, using http Get and Post methods. In Get method, data passed to server using URL encoding. So with Get method data added in URL as query string. For more information on how to retrieve query string values, you can read my previous post here. When we use Post method the URL is still intact, because data passed in HTTP body.

In correlation with ASP.NET, retrieving data passed through HTTP Get and Post methods is quite simple. If data passed with Get method we need the following code to retrieve the data:

Page.Request.QueryString[<param>];

If data passed with Post method we need the following code to retrieve the data:

Page.Request.Form[<param>];

Maybe the problem will more suitable addressed with hand in code practice, so let’s try a simple code! I named the HTML file as methods_source.htm:

    <html>
    <head>
    <title>Using Http Get And Post</title>
    </head>
    <body>
    <form id=”frm_get” action=”get_recv.aspx” target=”_blank” method=”GET” >
    <table>
    <tr>
    <td>Name: </td> <td><input type=”text” id=”txtName” name=”name” /></td>
    </tr>
    <tr>
    <td>Address: </td> <td><input type=”text” id=”txtAddr” name=”addr” /></td>
    </tr>
    <tr>
    <td></td> <td><input type=”submit” value=”Send Using Get” /></td>
    </tr>
    </table>
    </form>
    <p />
    <form id=”frm_post” action=”post_recv.aspx” target=”_blank” method=”POST” >
    <table>
    <tr>
    <td>Name 2: </td>
    <td><input type=”text” id=”txtName2″ name=”name2″ /> </td>
    </tr>
    <tr>
    <td>Address 2: </td>
    <td><input type=”text” id=”txtAddr2″ name=”addr2″ /> </td>
    </tr>
    <tr>
    <td></td>
    <td><input type=”submit” value=”Send Using Post” /> </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

Read the rest of this entry »

Posted in .NET, ASP.NET | Tagged: , , , , | 82 Comments »

Calling Client Script Events in ASP.NET Server Controls

Posted by triaslama on April 25, 2008

ASP.NET has its own controls (WebControls or HtmlControls) that rendered as elements in a page. ASP.NET server controls declared with ‘asp’ tag (<asp:[control_type] />) and contains runat=”server” attribute. ASP.NET server controls has its own attribute related to a specific control (such as onclick and text for click event and button text respectively).

For example: if we want a click event associated with a button of ASP.NET server control we use this script in our ASP.NET page:

<asp:Button id="btn" onclick="btn_Click" text="Test" runat="server" />

The click event received in onclick attribute and will be handled by btn_Click method. btn_Click is a method that will be called everytime a click occurs in this button control. We can write btn_Click method with any languages that supported by .NET framework.

But how if we want to call client script within ASP.NET server controls? Fortunately it can be accomplished to. Suppose that I have a button of ASP.NET server control but I want a click event of this button handled by Javascript function (in client side) rather than any of .NET languages (in server side).

In this example I use two buttons of ASP.NET server controls. The first button will have click event handled using server script and click event of second button handled via client script. I embed the javascript code inline inside the page, but we can pull it out and place it in separate *.js file then this file is referenced inside our ASP.NET page (expage.aspx):

Read the rest of this entry »

Posted in .NET, ASP.NET, Javascript | Tagged: , , , , , , | 20 Comments »

DOM & HTML Revisited

Posted by triaslama on April 18, 2008

What can I say about DOM (Document Object Model)? Its lightweight, its everywhere, its some kind useful. How about HTML? its everywhere and its easy. But, I think, the most important about them both is because both doesn’t suck!
I don’t know how about you. I just doing a simple (and I think interesting enough) exploration about HTML & DOM. Let’s check it out!

Suppose I want to make an element enabled & disabled when I select an item from a dropdownlist (combo box). With HTML it can be accomplished easily! How about if I want to make a new <select> element when I have choose something from previous <select> element?? With mix blend of DOM & HTML it can be accomplished easily too!

This page consist of two parts, each of them separated by horizontal lin. This is the screenshots of my simple page:
init
Initial condition, first part and second part separated by horizontal line.

Read the rest of this entry »

Posted in DOM, HTML / CSS, Javascript | Tagged: , , , , , | 1 Comment »

Retrieving Query String Values in ASP.NET and Javascript

Posted by triaslama on April 12, 2008

In World Wide Web, a query string is a part of a URL that contains data to be passed to web applications (http://en.wikipedia.org/wiki/Query_string).
The query string is composed of a series of field – value pair. Below is the pattern of query string:
field1=value1&field2=value2&field3=value3

An URL that contains query string can be depicted as follow:
http://test.com/tag?name=alma&role=user
The URL and query string separated by a question mark (?). Query string consist of two parts (field and value), and each of pair separated by ampersand (&). So the example above consists of two query strings which are name and type with value of each field ‘alma’ and ‘user’ respectively.

We can retrieve the query string values programmatically and used that values. Now we will learn how to get the query string values in ASP.NET and Javascript.

Read the rest of this entry »

Posted in ASP.NET, Javascript | Tagged: , , , , | 40 Comments »