News from asp.net official website

Unit Testing ASP.NET Pages Using WatiN

2008-03-27T11:19:00.001+07:00

Introduction:

Unit testing is an integral part of the application design. Unit testing is applied at different levels of the application. In this article we will focus on the User Interface level unit testing. We will use WatiN to test our ASP.NET application.

What is WatiN?

WatiN is a tool inspired from Watir (Don't worry I will write an article on Watir very soon) to test web pages. WatiN stands for Web Application Testing in .NET.

What are we testing?

In this article we will be testing a simple ASP.NET page. The page will demonstrate an agreement acceptance scenario. The user will type his name in the TextBox, click the "I agree" checkbox and then press the submit button. This is a very simple page to test but after you are familiar with the workings of the WatiN framework you can apply the same concepts for testing large pages.

Here is the screen shot of our page:

Testing the Agreement Page:

Add a class library project to your solution and make references to the testing tool (I am using MbUnit but you can use NUnit or VS Team Suite Test Project) and the WatiN library. You can download the WatiN library from the here.

Here is the simple test which makes sure that the user has agreed the agreement.

[TestFixture(ApartmentState = ApartmentState.STA)]
    public class TestAgreementPage
    {
        [Test]
        public void test_can_accept_the_user_agreement()
        {
            IE ie = new IE(ConfigurationManager.AppSettings["DefaultPageUrl"] as String);

ie.TextField("txtName").TypeText("Mohammad Azam");

            ie.CheckBox("chkAgree").Checked = true;

            ie.Button("Btn_Agree").Click();

            Assert.AreEqual("Valid",ie.Span("lblMessage").Text);
        }

    }

The class is decorated with the TestFixture attribute which also makes sure that the tests are run in a Single Threaded Apartment state. This is because the test will launch the Internet Explorer.

The IE class contained in the WatiN library does the main work. IE class opens the Internet Explorer and refers to the HTML controls using their name or ID. The line ie.TextField("txtName").TypeText("Mohammad Azam") refers to the TextBox with the ID "txtName". When the browser is launched WatiN will write the text "Mohammad Azam" inside the TextBox named "txtName". This will be done right before our eyes and you would be able to see WatiN typing text into the TextBox. Then the CheckBox with the ID "chkAgree" will be checked. Finally, WatiN will press the submit button and the form is submitted.

If you run this test it will fail. This is because the Label named "lblMessage" is never set to "Valid". Let's do that in the page code behind.

protected void Btn_Agree_Click(object sender, EventArgs e)
        {
                lblMessage.Text = "Valid";
        }

Now, if you run the test it will pass. But, something does not seem right. Let's remove the following line from our test.

ie.CheckBox("chkAgree").Checked = true;

This means we are not going to mark the CheckBox as checked. If you run the test again it will pass. This is not right! The test should only pass when the CheckBox is checked. Let's make a change to the code behind of the page.

protected void Btn_Agree_Click(object sender, EventArgs e)
        {
            if (chkAgree.Checked)
            {
                lblMessage.Text = "Valid";
            }
        }

Now, the test will only pass when the CheckBox is checked.

Programmatically Running the Web Server:

In the above example you will need to start your WebServer by either manually running the command line tool or by running the Web Application Project. But, sometimes you will want the unit test project to dynamically start a web server. Let's check it out how this can be done.

First, if you want to start the ASP.NET internal server (WebDev.WebServer) then you can use command line to start it. The syntax is shown below:

WebDev.WebServer.exe /port:1950 /path: "C:\Projects\MyWebApplication"

You will need to be in the same directory where the WebDev.WebServer exists. By default it is located at:

C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\WebDev.WebServer.exe

Now, let's use this information to start the server using unit tests. First, here is the required configuration saved in the configuration file (App.config).

The BaseTestPage class will use this information to start the server and all the test classes will derive from the BaseTestPage class to use this functionality.

Here is the complete code for the BaseTestPage class:

public class BaseTestPage
{
static Process server = null;

        static BaseTestPage()
        {
            if (Process.GetProcessesByName("WebDev.WebServer").Count() == 0)
            {
                string webServerExePath = (string)ConfigurationManager.AppSettings["WebServerExePath"];
                server = new Process();
                Process.Start(webServerExePath, GetWebServerArguments());
            }
        }

        public static string GetWebServerArguments()
        {
            string args = String.Format("/port:{0} /path:\"{1}\"",GetPort(),GetWebApplicationPath());
            if (String.IsNullOrEmpty(args)) throw new ArgumentNullException("Arguments is not defined");
            return args;
        }

        public static string GetPort()
        {
            string port = ConfigurationManager.AppSettings["Port"] as String;
            if (String.IsNullOrEmpty(port)) throw new ArgumentNullException("Port is null or empty");

return port;
}

        public static string GetWebApplicationPath()
        {
            string webApplicationPath = ConfigurationManager.AppSettings["WebApplicationPath"] as String;
            if (String.IsNullOrEmpty(webApplicationPath)) throw new ArgumentNullException("WebApplicationPath is null or empty");

return webApplicationPath;
}

}

We used a static constructor to make sure that the process is not running. If it is not running we make a new process and start it else we use the old process. The GetWebServerArguments(), GetPort() and GetWebApplicationPath() are just helper methods to improve the readability.

Finally, you will derive all your unit test classes from the BaseTestPage class as shown below:

public class TestAgreementPage : BaseTestPage

Now, if you run your unit test project will start the WebServer and then run all the tests.

Conclusion:

In this article we learned how to unit test our user interface layer. Unit testing the user interface helps us to understand the requirements of the interface and quickly see the expected result based on the user input. If this testing is done manually then it might take a lot of time.

By AzamSharp

Source: http://www.gridviewguy.com/ArticleDetails.aspx?articleID=367

Supporting Complex Types in Property Window

2008-03-26T09:44:00.001+07:00

ntroduction

Whenever you set any property of a control in the property window, the property window needs to save this property value in the .aspx file. This process is known as code serialization. For properties that are of simple types (such as integer and string) this code serialization happens automatically. However, when property data types are user defined complex types then you need to do that work yourself. This is done via what is called as Type Converters. This article is going to examine what type converters are and how to create one for your custom control.

Type Converters

A type converter is a class that converts values entered in the property window to the actual data type of the property and vice a versa. The type converter class is inherited from TypeConverter or ExpandableObjectConverter base class. If you inherit from TypeConverter base class then you need to supply a delimited string in the property window where each part of the string corresponds to a property of the underlying complex type. If you inherit from ExpandableObjectConverter base class then Visual Studio makes your job easy by providing an expandable tree to enter the individual property values. The following figure shows how this expandable region looks like:

Creating an Expandable Type Converter

As an example of creating a type converter let's assume that you have a custom control that displays full name in the web form. The Name property of the control allows you to specify the full name to be displayed. The Name property is of type FullName. The FullName class consists of two public properties namely FirstName and LastName.

Creating FullName class

To begin developing this example first of all create a new Web Control project in Visual Studio. Add a new class to the project and name it as FullName. Code the FullName class as shown below:

[Serializable] public class FullName { private string strFName; private string strLName;  public string FirstName  { get { return strFName; } set { strFName = value; } }  public string LastName { get { return strLName; } set { strLName = value; } }  public FullName() { }  public FullName(string fname, string lname) { strFName = fname; strLName = lname; } }

The FullName class simply consists of two public properties namely FirstName and LastName. Notice that the FullName class is marked as [Serializable]

Creating FullNameConverter class

Now add another class to the project and name it as FullNameConvertor. Inherit the FullNameConvertor class from ExpandableObjectConverter base class. As a convention the type converter class names should have name of the class they convert attached with "Converter" at the end. Once created you need to override certain methods of the base class. These methods are explained next.

bool CanConvertFrom(ITypeDescriptorContext context, Type sourceType)
The CanConvertFrom method tells the property window whether the source type can be converted to the property data type. Most of the cases you will ensure that if the source type is string then the method returns true; false otherwise.
bool CanConvertTo(ITypeDescriptorContext context, Type destinationType)
The CanConvertTo method tells the property window whether a property value can be converted to the destination data type. Most of the cases you will ensure that if the destination type is string then the method returns true; false otherwise.
object ConvertFrom(ITypeDescriptorContext context, System.Globalization.CultureInfo culture, object value)
The actual task of converting a source value (string) into the destination type (FullName) is done inside ConvertFrom method
object ConvertTo(ITypeDescriptorContext context, System.Globalization.CultureInfo culture, object value, Type destinationType)
The actual task of converting a property value (FullName) to the destination type (string) is done inside ConvertTo method.

The following code shows all these methods for FullNameConverter class.

public override bool CanConvertFrom (ITypeDescriptorContext context, Type sourceType) { if (sourceType == typeof(string)) { return true; } else { return base.CanConvertFrom(context, sourceType); } }  public override bool CanConvertTo (ITypeDescriptorContext context,  Type destinationType) { if (destinationType == typeof(string)) { return true; } else { return base.CanConvertTo(context, destinationType); } }  public override object ConvertFrom (ITypeDescriptorContext context,  System.Globalization.CultureInfo culture,  object value) { if(value is string) { string[] names = ((string)value).Split(' '); if (names.Length == 2) { return new FullName(names[0],names[1]); } else { return new FullName(); } } else { return base.ConvertFrom(context,culture,value); } }  public override object ConvertTo (ITypeDescriptorContext context,  System.Globalization.CultureInfo culture,  object value, Type destinationType) { if (value is string) { FullName name = value as FullName; return name.FirstName + " " + name.LastName; } else { return base.ConvertTo(context, culture, value,  destinationType); } }

The CanConvertFrom() method checks if the data type of proposed value is string. If so it returns true otherwise base class version of CanConvertFrom() method is called. Similar job is done inside CanConvertTo() method. Remember that these two methods though sound similar are called at different times. The CanConvertFrom() method is called when you enter a value in the property window whereas CanConvertTo() method is called when property window reads previously serialized property value.

The ConvertFrom() method converts a supplied string value into an instance of type FullName. It does so by splitting the source string (e.g. Nancy Davalio) at the occurrence of a white space. An instance of FullName class is returned based on the supplied FirstName and LastName values.

The ConvertTo() method does reverse of ConvertFrom() method. It converts a FullName instance into its string representation. This is done by simply concatenating FirstName property, a white space and the LastName property. The resultant string is returned from the ConvertTo() method.

Note that in the above example we inherited FullNameConverter class from ExpandableObjectConverter base class. Even if you inherit from TypeConverter base class the process of overriding the methods remains the same.

Attaching type converter to FullName class

Now that you have completed the FullNameConverter class it's time to attach it to the FullName class. This is done as follows:

[TypeConverter(typeof(FullNameConvertor))] [Serializable] public class FullName ...

You need to decorate the FullName class with [TypeConverter] attribute. The TypeConverter attribute accepts the type information of a class that is acting as a type converter for this class.

Synchronizing markup and property window

Whenever you make any change in the property window immediately the new values should be saved to the .aspx file. To enable this behavior you need to mark the FirstName and LastName properties with the following additional attributes.

[RefreshProperties(RefreshProperties.All)] [NotifyParentProperty(true)]

The RefreshProperties() attribute should be familiar to you because we discussed it in the previous article of this series. It simply refreshes the property window by re-querying all the property values. More important is the NotifyParentProperty() attribute. This attribute governs whether the parent property (Name) is to be notified when any of the child properties (FirstName and LastName) are changed. This way the parent property can reflect the newly assigned values.

Coding the custom control

Now it's time to develop our custom control. We will call it as FullNameLabel and it resembles as shown below:

public class FullNameLabel : WebControl { [DesignerSerializationVisibility (DesignerSerializationVisibility.Visible)] [PersistenceMode(PersistenceMode.InnerProperty)] public FullName Name { get { return ViewState["_fullname"] as FullName; } set { ViewState["_fullname"] = value; } }  protected override void Render(HtmlTextWriter writer) { if (Name != null) { writer.WriteFullBeginTag("span"); writer.Write(Name.FirstName); writer.Write("&nbsp;"); writer.Write(Name.LastName); writer.WriteEndTag("span"); } } }

The code inside the FullNameLabel control is not a rocket science. It simply declares a public property called Name that is of type FullName. It then emits the first name and last name separated by a white space in the overridden Render() method.

Carefully notice the declaration of FullNameLabel class. It is marked with two special attributes viz. [DesignerSerializationVisibility] and [PersistenceMode]. The [DesignerSerializationVisibility] attribute governs whether a property will be serialized. The DesignerSerializationVisibility enumeration has four possible values viz. Default, Visible, Content, Hidden. The value of Content indicates that the contents of the property will be serialized.

The [PersistenceMode] attribute governs how a property will be serialized. The PersistenceMode enumeration has four values namely Attribute, InnerProperty, InnerDefaultProperty and EncodedInnerDefaultProperty. The value of InnerProperty indicates that the Name property will be serialized as a nested tag of the custom control tag.

You can see details of other enumerated values of DesignerSerializationVisibility and PersistenceMode enumeration in MSDN help.

If you use the FullNameLabel control on a web form you should see its Name property in the property window as shown below:

Notice how the FirstName and LastName properties appear as sub-properties of Name property. The serialized markup of the control after the Name property is set looks like this:

<cc1:FullNameLabel ID="FullNameLabel1"  runat="server" EnableTheming="True"> <Name FirstName="Nancy" LastName="Davalio" /> </cc1:FullNameLabel>

Notice how the Name tag appears as a nested tag of <FullNameLabel> tag.

In the next article of this series I will show how to create custom editors to set a property value. Stay tuned.

Source: http://www.bipinjoshi.net/articles/c1eee649-4e4b-486a-9fd3-2151d6821f0e.aspx

Adding Multiple Rows in the GridView Control

2008-03-25T09:41:00.001+07:00

Introduction:

A while back an article was published on www.gridviewguy.com which explained how to add a single row at the bottom of the GridView control. You can read the article using this link. Many readers were interested in the idea of adding multiple rows to the GridView. This article explains how to add multiple rows to the GridView control.

Populating the GridView Control:

The first task is to populate the GridView control. We will be using the LINQ to SQL Classes to populate the GridView but you can use any data container that you like.

private void BindData()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            gvReport.DataSource = GetProducts();
            gvReport.DataBind();
        }

        // since the product list is long I am only selecting three products
        private List<Product> GetProducts()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            return (from p in northwind.Products
                    select p).Take(3).ToList<Product>();
        }

The database is the Northwind database and we are using the Products table of the database. The GetProducts method returns the top three products from the Products table (You can return all the rows it does not really matter).

Here is the ASPX part of the code:

<asp:GridView ID="gvReport" runat="server" AutoGenerateColumns="false">

    <Columns>

    <asp:TemplateField HeaderText="ProductName">
    <ItemTemplate>
    <%# Eval("ProductName") %>

    <asp:TextBox ID="txtProductName" runat="server" Visible='<%# DoesProductExists( (string) Eval("ProductName")) %>' />

    </ItemTemplate>
    </asp:TemplateField>

     <asp:TemplateField HeaderText="CategoryID">
    <ItemTemplate>
   <asp:DropDownList ID="ddlCategories" DataSource=<%# GetCategories() %> DataTextField="CategoryName" DataValueField="id" runat="server" />
    </ItemTemplate>
    </asp:TemplateField>

    </Columns>

    </asp:GridView>

The first column displays the "ProductName". If the ProductName is not available then a TextBox is created which is used to enter a new ProductName.

The GetCategories method is used to populate the DropDownList in the second column of the GridView control. Here is the implementation of the GetCategories method.

protected List<Category> GetCategories()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            return northwind.Categories.ToList<Category>();
        }

Adding New Rows to the GridView Control:

Now, let's see how to add new rows to the GridView control. The rows are added using the "Add" Button control. Here is the implementation of the add button click.

// adds the new row
        protected void Button1_Click(object sender, EventArgs e)
        {
            Count += 1;

            var list = GetProducts();
            // add empty elements at the end of the list
            list.AddRange(new Product[Count]);

            gvReport.DataSource = list;
            gvReport.DataBind();
        }

Let's first talk about how we are going to add empty rows to the GridView control. Each time a button is clicked the postback is triggered. So, we need a way to know how many empty rows have to be created. We will use ViewState to store the number of rows that have to be created and then add the rows in the product list as empty products.

The Count property in the button click code is used to store the number of empty rows to be created. Here is the implementation of the Count property.

public int Count
        {
            get
            {
                if (ViewState["Count"] == null)
                    return 0;

                return (int) ViewState["Count"];
            }
            set
            {

                ViewState["Count"] = value;
            }
        }

The list.AddRange(new Product[Count]); line is used to append the rows to the product list.

The effect is shown in the GIF Animation below:

I have also used UpdatePanel to eliminate the server postback.

I hope you liked the article, happy coding!

Author: AzamSharp

Source: http://gridviewguy.com/ArticleDetails.aspx?articleID=374_Adding_Multiple_Rows_in_the_GridView_Control

Building a Volta Control : A Flickr Widget

2008-03-22T11:09:00.001+07:00

By: Tanzim Saqib
Download Sample Code

This article illustrates how to create a Volta control around Flickr, the popular image hosting service.

What is Volta?

Microsoft Live Labs Volta is Microsoft's emerging toolset that enables developers to build multi-tier web applications by applying familiar .NET techniques and patterns. The intended use of this toolset is for Developers to build web application as .NET client application, and then specify the portions of the codes that will run on the client and server side. The compiler then creates cross browser JavaScript, Web Services, communication, serialization, security etc. to tie the tiers together. This article is based on the first CTP of Volta considering its current limitations. We will see how we can create a Volta control that the compiler can convert into an AJAX Widget without requiring us writing a single line of JavaScript code. We will write code in our very familiar C# language. In this article, you will end up creating a Flickr widget like the one shown in figure 1.

Figure 1: The Flickr widget built using Volta

Currently Volta is at its first CTP release, which was made publicly available on December 5 last year. Volta requirements and the installer can be found at http://labs.live.com/volta/download/ Since it's just the first CTP, there are still a lot of limitations. I hope they will get over those in the next CTP or so.

The Specification of the Widget

The widget will have the following features:

The photos for a particular Flickr user will be shown in a 3x3 grid.
The tooltip of each of the photos will display the title of the image.
There will be "prev" and "next" buttons for navigation.
On click of each of the photos, a new window will open with the original Flickr source.
There will not be a single line of JavaScript code.

The Flickr API

Flickr is a very popular photo hosting and sharing service. It is considered to be one of the leading examples of Web 2.0 applications. Users of Flickr can host hundreds of photos and share them with others. Flickr allows users to tag their photos, which make them easy to find. It has some of the best photo management features, which let users control access to photos pretty efficiently. A few of the interesting features of Flickr are the possibility of marking photos as favourites, grouping photo pool and Flickr Interestingness. Flickr also offers users the ability to release images under certain common usage licenses.

Flickr has an open API besides RSS and Atom feeds. The Flickr API offers numerous methods. It supports different popular request and response formats that should be familiar to the third party developers:

REST
XML-RPC
SOAP

We choose REST because it is the simplest among others, and it is performed by simple HTTP GET or POST actions.

The Flickr Methods

The Flickr API exposes 115 methods so far. The methods are categorized in Authentication, Photos, User Activity, Photo Pool, Photo Upload and many more. Few of them are named as follows:

flickr.photos.getInfo
flickr.photos.search
flickr.interestingness.getList
flickr.photos.transform.rotate
flickr.test.echo

A full listing can be found at: http://www.flickr.com/services/api/.

The Flickr Request, Response format

The general format of a Flickr request is:

http://api.flickr.com/services/rest/?api_key=__API_KEY__&method=__METHOD_NAME__&param1=value1&param2=value2

__API_KEY__ is replaced by the API key

http://api.flickr.com/services/rest/?api_key=9163070a740049b1bfe553864a4f1519&method=flickr.interestingness.getList

The response of a REST query can be rendered by the browser. Simply copy the URL above and paste it into the browser's address bar; then hit enter. You will see a response text somewhat like the following:

<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<photos page="1" pages="5" perpage="100" total="500">
<photo id="621909774" owner="30959251@N00" secret="70cdeec6f7" server="1411"
farm="2" title="Yeah, holidays!" ispublic="1" isfriend="0" isfamily="0" />
<photo id="620373432" owner="80176513@N00" secret="7c9d5769ab" server="1151"
farm="2" title="In the Mood" ispublic="1" isfriend="0" isfamily="0" />
<photo id="619761326" owner="50008412@N00" secret="5aec4bf2ec" server="1037"
farm="2" title="Hear me roar!!!!" ispublic="1" isfriend="0" isfamily="0" />
<photo id="619727916" owner="46355903@N00" secret="76680dafa6" server="1146" farm="2"
title="Rain, rain, go away, I want to do some Sunrise photos" ispublic="1"
isfriend="0" isfamily="0" />
<photo id="620355782" owner="42009080@N00" secret="148cbdb6b0" server="1145" farm="2"
title="Beneath A Black Sky" ispublic="1" isfriend="0" isfamily="0" />
<photo id="621726130" owner="35373726@N00" secret="6b3d8fa0ca" server="1114" farm="2"
title="" ispublic="1" isfriend="0" isfamily="0" />
... ...
</photos>
</rsp>

<?xml version="1.0" encoding="utf-8" ?> <rsp stat="ok"> <photos page="1" pages="5" perpage="100" total="500">  <photo id="621909774" owner="30959251@N00" secret="70cdeec6f7" server="1411"    farm="2" title="Yeah, holidays!" ispublic="1" isfriend="0" isfamily="0" />  <photo id="620373432" owner="80176513@N00" secret="7c9d5769ab" server="1151"     farm="2" title="In the Mood" ispublic="1" isfriend="0" isfamily="0" />  <photo id="619761326" owner="50008412@N00" secret="5aec4bf2ec" server="1037"    farm="2" title="Hear me roar!!!!" ispublic="1" isfriend="0" isfamily="0" />  <photo id="619727916" owner="46355903@N00" secret="76680dafa6" server="1146" farm="2"     title="Rain, rain, go away, I want to do some Sunrise photos" ispublic="1"     isfriend="0" isfamily="0" /> <photo id="620355782" owner="42009080@N00" secret="148cbdb6b0" server="1145" farm="2"     title="Beneath A Black Sky" ispublic="1" isfriend="0" isfamily="0" /> <photo id="621726130" owner="35373726@N00" secret="6b3d8fa0ca" server="1114" farm="2"    title="" ispublic="1" isfriend="0" isfamily="0" />  ... ...  </photos> </rsp>

As you see the response is pretty straightforward. It simply has a bunch of photo tags and each of the tags has information about that particular photo. A photo tag has the unique identifier of the photo, owner identifier, server information and also a title. In our widget, we need to parse such XML and display the photos.

Note the rsp tag with a stat attribute that has ok as value. It means the API call was completely errorless and successful. Let us make some mistakes intentionally to see how Flickr reacts. Hit the browser using the previous URL with a wrong API Key. You will receive an XML as response like the following:

<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="fail">
<err code="100" msg="Invalid API Key (Key not found)" />
</rsp>

Here the stat attribute has fail as value, which means some kind of problem has occurred during the API call and the Flickr API notifies it so that the code can decide whether it should crawl any further or not.

The User NSID

User NSID is an alphanumeric string which uniquely identifies a user. It is often useful, especially in our case where our widget will display the photos of a particular user. In order to retrieve the NSID for a user, Flickr offers a method named flickr.people.findByUsername which takes the Flickr screen name of the user and returns an XML like the following:

<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<user id="9198206@N07" nsid="9198206@N07">
<username>your_screen_name</username>
</user>
</rsp>

The Solution Structure

First of all, create a new Volta Application and name it VoltaFlickrWidgetDemo. Then, add a new Volta Control application named VoltaFlickrWidget to the solution. Add a class to the Volta control project named FlickrHelper.cs. This class contains very useful methods that fetch Flickr photo data and make them easily accessible by the control. Now include the VoltaFlickrWidget project in the References of the VoltaFlickrWidgetDemo project. The resulting solution structure will be like the one shown in the following figure.

Figure 2: Solution Structure

The Flickr Volta Control

The Flickr Volta control we are going to develop should be easy to add to the Volta page considering that there is a div element with an id of divWidgetContainer present in the Volta page:

var divWidgetConatiner = Document.GetById<Div>("divWidgetContainer");
VoltaControl1 flickrWidget = new VoltaControl1("screen_name", "9149b1bfe387273833553864a4f1519", "Flickr Widget", 300, 270);
flickrWidget.AddToDiv(divWidgetConatiner);
flickrWidget.DownloadPhotos();

Here VoltaControl1 is the Flickr control we are going to build. Sorry for the naming, but Volta is still immature and can't rename the underlying HTML file of the Volta Control which we will discuss later. Thus, instead of making it confusing, we are keeping it called VoltaControl1. In the above code snippet, VoltaControl1 is initialized with the screen name, API key, control's title, height and width properties. The AddToDiv method of the control adds itself to the div passed as a parameter and then the DownloadPhotos method starts downloading the photos. As soon as AddToDiv is called, the control's HTML file content is injected into the DOM, and HTML elements become accessible like so:

Document.GetById<Div>("divSomeDiv");

The FlickrHelper

The FlickrHelper class basically performs two operations. One of them is retrieving the NSID of the user against the screen name; and the other is fetching the photo collection of the specified user. The following GetNSID method performs an Asynchronous REST call to the Flickr API and receives the NSID back:

public void GetNSID()
{
IHttpRequest request = HttpRequestFactory.Create();
request.AsyncSend("POST", URL_USER_NSID + ScreenName, string.Empty,
delegate(string response)
{
OnNsidLoaded(new NsidLoadedEventArgs(response));
});
}

Both the IHttpRequest interface and the HttpRequestFactory class can be found in the Microsoft.LiveLabs.Volta.MultiTier namespace. The AsyncSend method performs the asynchronous call and then calls back the delegate, inside of which the OnNsidLoaded event is fired to notify the user of the FlickrHelper class that the NSID data has just arrived. An instance of the NsidLoadedEventArgs is passed to the subscriber of that event to make the NSID available after parsing the necessary XML:

public class NsidLoadedEventArgs : EventArgs
{
public string Nsid { get; set; }
public NsidLoadedEventArgs(string response)
{
var xdocument = new XmlDocument();
xdocument.LoadXml(response);
var xnUser = xdocument.GetElementsByTagName("user")[0];
if (xnUser == null)
throw new Exception("Incorrect screenName");
else
{
var xelUser = xnUser as XmlElement;
Nsid = xelUser.GetAttribute("nsid");
}
}
}

Similarly, an asynchronous call is made for fetching photo feed:

public void DownloadPhotos(string nsid)
{
IHttpRequest request = HttpRequestFactory.Create();
request.AsyncSend("POST", URL_PHOTOS + nsid, string.Empty,
delegate(string response)
{
OnPhotosLoaded(new PhotosLoadedEventArgs(response, nsid));
});
}

In the above code snippet, an instance of PhotoLoadedEventArgs is passed to the subscriber. In this case the photo URL collection is sent back using a Dictionary object:

public class PhotosLoadedEventArgs : EventArgs
{
public Dictionary<int, string> PhotoPool { get; set; }
public PhotosLoadedEventArgs(string response, string nsid)
{
...
// code edited to save space
}
}

The Control Logic

The contents of VoltaControl1.cs file is basically HTML manipulation, so most of it is self-explanatory and doesn't need further discussion. Yet there are few points to ponder. The most important part is the DownloadPhotos method:

public void DownloadPhotos()
{
_WidgetContent.InnerHtml = "<br /><center><i>Downloading photos...</i></center>";
flickrHelper.NsidLoaded += new NsidLoadedEventHandler(flickrHelper_NsidLoaded);
flickrHelper.GetNSID();
}

It registers the NsidLoaded event of FlickrHelper, which is handled by flickrHelper_NsidLoaded. Then, the GetNSID method is called. Therefore, as soon as the NSID data is available, it will call the flickrHelper_NsidLoaded method to handle the data:

void flickrHelper_NsidLoaded(object sender, NsidLoadedEventArgs e)
{
if (e.Nsid == null)
throw new Exception("Invalid NSID supplied.");
else
{
_Nsid = e.Nsid;
flickrHelper.PhotosLoaded += new PhotosLoadedEventHandler(flickrHelper_PhotosLoaded);
flickrHelper.DownloadPhotos(_Nsid);
}
flickrHelper.NsidLoaded -= flickrHelper_NsidLoaded;
}

Unlike the NSID, the DownloadPhotos method of FlickrHelper returns a Dictionary of photos URLs and the LoadPhotos method iterates through the photos and displays them in a 3x3 grid using a typical logic for pagination.

Construction of the Volta Page

The construction of the Volta page is simple. The default page would do, but for our project we need an extra div with an id of divWidgetContainer. Moreover, we will add some other HTML code to beautify it. As for the Volta control, we are keeping the Volta page called VoltaPage1. We will use some CSS classes, and add a CSS file named Style.css in the root of the Volta application. In the current release of Volta, CSS files are not automatically discovered even if you add it in the page's HTML as links. To make the Style.css file usable by the Volta page, perform the following steps:

Right click on the Style.css from the Solution Explorer and choose Properties
Set the Build Action as Embedded Resource
Open the VoltaPage1.Designer.cs file and add the following line before namespace VoltaFlickrWidgetDemo:

[assembly: VoltaFile("Style.css")]

As stated before, the control is very convenient to use:

VoltaControl1 flickrWidget = new VoltaControl1("ajaxwidget",
"9163070a740049b1bfe553864a4f1519", "Flickr Widget", 300, 270);
flickrWidget.AddToDiv(divWidgetConatiner);
flickrWidget.DownloadPhotos();

This is pretty much it. When you download and run this project, you will see Flickr REST calls and photo navigation all performed within an AJAX application created without writing any JavaScript code. Volta generated the necessary client code for us to run the application in multiple browsers.

Summary

You have learned how to create a Volta control around the Flickr API. The code was purely written in .NET, yet we achieved complete AJAX functionality without writing a single line of JavaScript code introducing typical ContentProxy kind of things.

Source: http://dotnetslackers.com/articles/aspnet/BuildingAVoltaControlAFlickrWidget.aspx

Extending the GridView to Include Sort Arrows

2008-03-21T23:30:00.001+07:00

Introduction
Before ASP.NET version 2.0 was released, I wrote a book and dozens of articles on the DataGrid control, which was the most functional data Web control in the ASP.NET 1.x toolbox. While the DataGrid still exists in ASP.NET 2.0, the GridView control serves as a much more functional and feature-rich choice. The GridView can be bound to data source controls like the SqlDataSource and ObjectDataSource, and paging, sorting, editing, and deleting can be implemented without having to write a single line of code.

While the DataGrid (and GridView) offer built-in sorting support, there is no visual feedback as to what column the data is sorted by. In Part 18 of the An Extensive Examination of the DataGrid Web Control article series, I showed how to dynamically update a sortable DataGrid's header columns so that an up or down arrow image would appear next to the sorted column name depending on whether the column was sorted ascendingly or descendingly (view a live demo). This was accomplished by programmatically looping through the DataGrid's Columns collection and adding the up or down arrow image to column whose SortExpression value matched the DataGrid's SortExpression.

I recently needed to implement this functionality in a GridView control. Rather than adding this code to an ASP.NET page, like I did with the DataGrid demo, I decided to instead create a custom Web server control that extended the GridView control, adding the necessary functionality. In this article we will look at the steps for building such a custom control as well as how to use the control in an ASP.NET page. The custom control's complete source code and a demo application are available for download at the end of this article. Read on to learn more!

A Quick Primer on GridView Sorting
The GridView control makes sorting a breeze. Simply set the grid's AllowSorting property to True. Doing so renders each column's header as a LinkButton. When this LinkButton is clicked, a postback ensues and the GridView's Sorting event is fired. If the GridView is bound to a data source control that supports sorting, the GridView will internally re-bind to the data source using the new sort order. If you have programmatically bound data to the GridView, then you will need to create an event handler for the Sorting event, and manually sort and re-bind the data. After the Sorting event has fired and the data has been re-sorted, the GridView fires its Sorted event, thereby completing the sorting workflow.

Each column in the GridView has a SortExpression property that indicates the data field by which the data should be sorted if that column's sorting LinkButton is clicked. When the LinkButton in a column header is clicked, the GridView sets its SortExpression property value to the value of the clicked column's SortExpression. If the GridView's SortExpression matches the SortExpression of the sorted column, then the GridView's SortDirection property is toggled. This functionality enables the GridView control to provide built-in, bi-directional sorting.

The following diagram depicts the sorting workflow, including the GridView's assignment of its SortExpression and SortDirection properties. Keep in mind that the entire process is kicked off by the user clicking a LinkButton in one of the sortable column's headers, and completes by displaying the data in the requested sorted order. So, from the end user's perspective, she clicks the text in a particular column header and the data is sorted by that column.

For more information on sorting with the GridView, along with a downloadable demo, check out the Paging and Sorting Report Data tutorial.

Creating a Custom Server Control that Extends the GridView
When I implemented the up and down arrow images for the DataGrid control in Part 18 of the An Extensive Examination of the DataGrid Web Control article series, I put the code that added (or removed) the arrow images in the ASP.NET page's code-behind class. Specifically, the code enumerated the DataGrid's Columns collection and, for every column, started by removing any <img> elements that were present in the HeaderText. This "cleaned out" the up or down arrow image from all columns. After removing any <img> elements, the code checked to see if the current column's SortExpression matched the DataGrid's SortExpression. If so, then an <img> element was tacked on to the end of the column's HeaderText, displaying the up or down arrow image depending on whether the data was being sorted in ascending or descending order.

Like the DataGrid, the GridView has a Columns collection; each column has a SortExpression; the GridView has SortExpression and SortDirection properties. In short, I could have implemented the up and down arrow images in the GridView using code in the ASP.NET page very similar to that used for the DataGrid. However, I decided that instead of having to write code for each page where I wanted to show up and down arrow images, I decided to instead build a custom server control that extended the GridView control. I could then bake in the necessary code by overriding the necessary GridView methods.

To create a custom server control that extends an existing control, create a public class that derives from the Web control that you want to extend. I created a class named GridView in my skmControls2 Class Library project. (The skmControls2 Class Library project was first created and discussed in Creating a TextBox Word / Character Counter Control.)

public class GridView : System.Web.UI.WebControls.GridView
{
    ... Override necessary GridView methods here ...
}

The GridView has a virtual InitializeRow method that is called each time a row is added to the GridView, including the header row. My first thought was to override this method and, for the header row, enumerate the fields and update each column's HeaderText appropriately (removing any image markup first, and then adding the up or down arrow image for the sorted row). However, if you attempt to update a GridView's field's properties during the databinding stage, the field reports to the GridView that its state has been changed and that the data needs to be re-bound. Consequently, I ended up stuck in an infinite loop:

Databinding would commence
The InitializeRow method would be executed for the header row
I'd update the HeaderText for the cells in the header row
Updating the HeaderText would signal the GridView to re-bind its data, taking us back to Step 1! Eep.

Instead, I needed to modify the HeaderText properties either before or after the databinding process. After some thought, I realized that I really only needed to update the HeaderText properties after the data has been sorted. The GridView's OnSorted method is what raises the Sorted event, which occurs after the data has been sorted. Therefore, I decided to override this method and update the HeaderText properties there.

public class GridView : System.Web.UI.WebControls.GridView
{
   protected override void OnSorted(EventArgs e)
   {
      string imgArrowUp = ...;
      string imgArrowDown = ...;
       
      foreach (DataControlField field in this.Columns)
      {
         // strip off the old ascending/descending icon
         int iconPosition = field.HeaderText.IndexOf(@" <img border=""0"" src=""");
          if (iconPosition > 0)
            field.HeaderText = field.HeaderText.Substring(0, iconPosition);

         // See where to add the sort ascending/descending icon
         if (field.SortExpression == this.SortExpression)
          {
            if (this.SortDirection == SortDirection.Ascending)
               field.HeaderText += imgArrowUp;
            else
               field.HeaderText += imgArrowDown;
         }
      }
 
      base.OnSorted(e);
   }
}

The overridden OnSorted method starts by defining the URLs for the up and down arrow images. We'll discuss how these image URLs are determined later on in this article. Next, the GridView's Columns collection is enumerated. For each column, if there is an <img> element it is stripped off. Next, a check is performed to see if the current column's SortExpression matches the GridView's. If so, the HTML to display the up or down arrow image is appended to the column's HeaderText depending on the value of the GridView's SortDirection property.

An HTML Encoding Gotcha

This Control Has Been Enhanced!
The "HTML Encoding Gotcha" outlined here is no longer an issue with the enhancements made to this control on February 6th, 2008. For more information on these enhancements, see: Improving the Sort Arrows GridView Control.

One subtlety that I quickly stumbled upon when testing, is that the BoundField HTML encodes its HeaderText's content, by default. That is, when the BoundField was being rendered it was taking the <img> tag added in the OnSorted method and HTML encoding it, replacing < and > with < and >, respectively. In other words, it was transforming a HeaderText value of:

Price <img border="0" src="up.gif" />

To:

Price <img border="0" src="up.gif" />

Consequently, the browser would display the sorted column's header text as Price <img border="0" src="up.gif" /> rather than showing an image.

This BoundField has an HtmlEncode property that, if True (the default), HTML encodes the entire content of the BoundField. One way to fix the header text being HTML encoded, then, would be to set the BoundField's HtmlEncode property to False. But what if you wanted the data rows to be HTML encoded, but not the header text?

To allow for this level of flexibility, I created another custom class in the skmControls2 project. This one extended the BoundField class and overrode the InitializeCell method, which is where the HTML encoding takes place. The BoundField HTML encodes its content only if both its HtmlEncode and SupportsHtmlEncode properties are True. SupportsHtmlEncode is a read-only property that, for the BoundField, always returns True. I overrode this property and instead had it return a value based on a private member variable. Then, in the InitializeCell method I set this member variable to false when initializing a header cell.

public class BoundField : System.Web.UI.WebControls.BoundField
{
   bool allowHtmlEncode = true;

   protected override bool SupportsHtmlEncode
   {
      get
       {
         return allowHtmlEncode;
      }
   }

   public override void InitializeCell(DataControlFieldCell cell, DataControlCellType cellType, DataControlRowState rowState, int rowIndex)
   {
       if (this.HtmlEncode && cellType == DataControlCellType.Header)
      {
         allowHtmlEncode = false;
         base.InitializeCell(cell, cellType, rowState, rowIndex);
         allowHtmlEncode = true;
       }
      else
         base.InitializeCell(cell, cellType, rowState, rowIndex);
   }
}

Since the BoundField is the only GridView field that HTML encodes its data, this hack is only needed for the BoundField. All other fields - the TemplateField, CheckBoxField, ButtonField, and so on - will correctly display the up and down arrow images without any extra hacks. We'll see how to use this custom BoundField class in the "Using the Custom GridView Control in an ASP.NET Web Page" section.

Specifying the Image URLs for the Up and Down Arrows
At this point you may be wondering how the custom GridView control determines the URLs for the up and down image arrows. The simplest option would be to require the page developer to specify the URLs for these two images. I created two such properties: ArrowUpImageUrl and ArrowDownImageUrl. But I also wanted to allow the page developer to have a working GridView even if she didn't want to spend the time to find up and down arrow images. Therefore, I embedded an up and down arrow image into the skmControls2 assembly and use these in the case where the developer does not specify a value for the ArrowUpImageUrl and ArrowDownImageUrl properties.

For more information on embedding resources into an assembly, and retrieving these resources through an ASP.NET page, be sure to read Accessing Embedded Resources through a URL Using WebResource.axd.

Using the Custom GridView Control in an ASP.NET Web Page
The download available at the end of this article includes the complete source code for the custom GridView and BoundField controls, as well as a demo ASP.NET website. To use the skmControls2 controls in an ASP.NET website, copy the DLL to the website's /Bin directory and then add the following @Register directive to the tops of the .aspx pages where you want to use the controls:

<%@ Register Assembly="skmControls2" Namespace="skmControls2" TagPrefix="skm" %>

(Alternatively, you can add this @Register directive in the Web.config file so that you do not need to add it to every ASP.NET page that uses the controls. See Tip/Trick: How to Register User Controls and Custom Controls in Web.config.)

Then just use the same GridView declarative markup you normally would, but replace the "asp" in the <asp:GridView> tags with "skm", as in <skm:GridView>. That's it! Likewise, if you're using any BoundFields that have their HtmlEncode properties set to True (the default), you will want to replace the "asp" in <asp:BoundField with "skm".

The demo included in the download has an ASP.NET page that shows the ProductID, ProductName, CategoryName, UnitPrice, and Discontinued fields from the Northwind's Products database table in a sortable GridView using BoundFields (namely, skmControls2 BoundFields), a TemplateField, and a CheckBoxField.

<skm:GridView ID="ProductsGrid" runat="server" AutoGenerateColumns="False" DataSourceID="NorthwindDataSource" AllowSorting="True">
    <Columns>
      <skm:BoundField DataField="ProductID" HeaderText="ID" InsertVisible="False"
         SortExpression="ProductID" />
      <asp:TemplateField HeaderText="Name" SortExpression="ProductName">
          <ItemTemplate>
            <asp:Label runat="server" Text='<%# Bind("ProductName") %>' id="Label1" Font-Bold="True"></asp:Label>
         </ItemTemplate>
       </asp:TemplateField>
      <skm:BoundField DataField="CategoryName" HeaderText="Category Name" SortExpression="CategoryName" />
      <skm:BoundField HtmlEncode="False" DataFormatString="{0:c}" DataField="UnitPrice" HeaderText="Price" SortExpression="UnitPrice" />
       <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
   </Columns>
</skm:GridView>

Note that the grid's declarative markup does not set the ArrowUpImageUrl or ArrowDownImageUrl properties. Consequently, the grid displays the standard up and down arrow images (see the first screen shot below). If you want to use custom arrow images, specify the URL either declaratively or programmatically. The properties can be set to absolute URLs (like http://www.example.com/images/UpArrow.gif) or relative paths using the ~ character, like ~/Images/UpArrow.png. The demo page includes a checkbox that allows you to toggle between using the default arrow images and custom ones.

The following two screen shots show the demo page in action. The first one shows the grid sorted by price in descending order. The built-in up and down arrow images are used here.

The second image shows the grid sorted by product name in ascending order. Here, a custom up arrow image is used.

Custom BoundField Markup is Lost When Using the Fields Dialog Box

Custom BoundField Markup is Lost When Using the Fields Dialog Box
If you use the custom BoundField controls from the `skmControls2` library - e.g., `<skm:BoundField ... />` - it is important to know that if you use the Fields dialog box to modify the GridView's columns, Visual Studio will replace the custom BoundField markup with the default markup (namely, `<asp:BoundField ... />`). The Fields dialog box is the dialog box displayed when you click the "Edit Columns" link from the GridView's Smart Tag.

If you use the custom BoundField controls from the skmControls2 library - e.g., <skm:BoundField ... /> - it is important to know that if you use the Fields dialog box to modify the GridView's columns, Visual Studio will replace the custom BoundField markup with the default markup (namely, <asp:BoundField ... />). The Fields dialog box is the dialog box displayed when you click the "Edit Columns" link from the GridView's Smart Tag.

Conclusion
In this article we looked at building a custom GridView server control (along with a custom BoundField control) in order to automatically display up and down arrow images for the sorted column. This arrow provides the user with visual feedback as to what column the data is sorted by, as well as whether the data is sorted in ascending or descending order. Best of all, this functionality is wrapped up in a custom server control, so you can utilize this behavior without having to write any code in your ASP.NET page's code-behind class. Be sure to download the source code and the demo application available at the end of this article.

Happy Programming!

By Scott Mitchell

Source: http://aspnet.4guysfromrolla.com/articles/012308-1.aspx

How to open popup windows in IE/Firefox and return values using ASP.NET and Javascript

2008-03-20T09:26:00.001+07:00

With the forums flooded with questions of opening a popup window, passing values to the popup window and then return values back to the parent page using both Internet Explorer and Firefox, I decided to take a plunge into the subject and experiment with an easy implementation. This article explains how to transfer values between the Parent page and a Pop-up window. The code has been tested against IE7 and Firefox.

Internet Explorer(IE) contains the showModalDialog() method which proves very effective while creating a modal dialog box and displaying a html document in it. One caveat being, showModalDialog() is not a W3C implementation. So it is not supported in Firefox (as of version 2.0.0.11). Firefox supports the window.open() method. However there is no built in functionality in Firefox that keeps the popup modal. At the most, you can use 'modal=yes' to make the popup appear in front. However unlike the showModalDialog() in IE, you cannot restrict the user to access the parent page when the popup is opened in Firefox. In short, it is not truly modal. There are different ways to get around this problem, however in this article, we will only focus on exchanging values between the parent and popup page.

In this article, we will see how to take a simple approach and create a popup window using both IE and Firefox. In the first part, we will pass in the first name from the parent page to the popup window. In the second part, the popup window will reverse the name and return the reversed string to the parent window. All set!! Let us get started.

Part 1 - Passing value to Popup window

Step 1: Open Visual Studio. Create a new website (File > New > Website). Set the location, filename and language of the project.

Step 2: In your Default.aspx, add a label (lblFName), textbox (txtFName) and a button (btnPopup). Set the 'Text' property of the label to 'FirstName'. Similarly set the 'Text' property of the button control to 'Show Popup'.

Step 3: Now add the popup form. Right click your project > Add New Item > Web Form > Rename form as 'PopupWin.aspx' and click on Add.

Step 4: In the PopupWin.aspx, add a textbox (txtReverse) and a button (btnReverse).

Well now we have two pages, Default.aspx which is the parent page and PopupWin.aspx which will be the popup page. Let us now pass a value from Default.aspx to the popup window.

Step 5: We will invoke the popup window on the button (btnPopup) click of Default.aspx. To do so, we will use Button.Attribute.Add and call a javascript function that will open the popup window. The javascript function will be contained in a seperate pop.js file which we will create shortly. Add this code in the code behind file of your Default.aspx.

protected void Page_Load(object sender, EventArgs e)

{

btnPopup.Attributes.Add("onClick", "javascript:InvokePop('" + txtFName.ClientID + "');");

}

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

btnPopup.Attributes.Add("onClick", "javascript:InvokePop('" & txtFName.ClientID & "');")

End Sub

Over here we are passing the ClientID of the textbox. ClientID is the identifier of the server control, generated by ASP.NET. You must be wondering why I am not passing the value of the textbox directly. Well passing the control has an advantage where there is more than one control that is passed to the popup page. While returning back the values from the popup to the parent page; it helps you to decide and determine which control receives which value. Even though we will be using only one textbox for simplicity, I thought of creating a sample which can be extended later by you to suit your needs. If the use of ClientID is not clear to you, wait till we get to part 2 of this article, and I will again touch upon the subject.

Step 6: Let us now create the javascript functionality which will open the Popup. Right click your project > Add New Item > Jscript file > Rename the file to pop.js. Add the following function to the pop.js file

function InvokePop(fname)

{

val = document.getElementById(fname).value;

// to handle in IE 7.0

if (window.showModalDialog)

{

retVal = window.showModalDialog("PopupWin.aspx?Control1=" + fname + "&ControlVal=" + val ,'Show Popup Window',"dialogHeight:90px,dialogWidth:250px,resizable:yes,center:yes,");

document.getElementById(fname).value = retVal;

}

// to handle in Firefox

else

{

retVal = window.open("PopupWin.aspx?Control1="+fname + "&ControlVal=" + val,'Show Popup Window','height=90,width=250,resizable=yes,modal=yes');

retVal.focus();

}

This function accepts the textbox control, retrieve's the value of the textbox that needs to be reversed and passes the textbox control and its value to PopupWin.aspx through query string. This is the function which will be called on the btnPopup click.

Step 7: To wire up the .js with your asp.net pages, add a link to the javascript file in both the pages as shown below:

Default.aspx

<title>Parent Page</title>

</head>

PopupWin.aspx

<title>Popup Page</title>

</head>

Step 8: In the code behind file of PopupWin.aspx, add the following code at the Page_Load() to retrieve the value from the querystring and display the value in the TextBox 'txtReverse', placed in the popup window.

protected void Page_Load(object sender, EventArgs e)

{

txtReverse.Text = Request.QueryString["ControlVal"].ToString();

}

VB.NET

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

txtReverse.Text = Request.QueryString("ControlVal").ToString()

End Sub

If you are eager to test the value going from Parent page to the popup window, you can do so now. Make Default.aspx as 'Set as Start page' and run the sample. Enter your name in txtFName TextBox and click on Show Popup button. A popup window opens with the value entered in the Parent page.

Part 2 - Passing value from Popup window to the Parent page

In this second part, we will reverse the string and pass the reversed string back to the parent page. To do so, follow these steps:

Step 1: Add additional functions to the pop.js file which will reverse the string and return the string back to the parent page.

// pop.js

function ReverseString()

{

var originalString = document.getElementById('txtReverse').value;

var reversedString = Reverse(originalString);

RetrieveControl();

// to handle in IE 7.0

if (window.showModalDialog)

{

window.returnValue = reversedString;

window.close();

}

// to handle in Firefox

else

{

if ((window.opener != null) && (!window.opener.closed))

{

// Access the control.

window.opener.document.getElementById(ctr[1]).value = reversedString;

}

window.close();

}

function Reverse(str)

{

var revStr = "";

for (i=str.length - 1 ; i > - 1 ; i--)

{

revStr += str.substr(i,1);

}

return revStr;

}

function RetrieveControl()

{

//Retrieve the query string

queryStr = window.location.search.substring(1);

// Seperate the control and its value

ctrlArray = queryStr.split("&");

ctrl1 = ctrlArray[0];

//Retrieve the control passed via querystring

ctr = ctrl1.split("=");

}

As you saw in part 1, the value was passed from the parent window to the popup window and was kept in the txtReverse TextBox. The function ReverseString() retrieves the value from this textbox and passes the string to the Reverse() function which reverses the string. The reversed string is then kept in the 'reversedString' variable. The 'RetrieveControl' splits the query string and identifies the control in the parent page to which the reversed string value is to be sent.

Note: If you observe, in the IE implementation, I am not really making use of the RetrieveControl(), however in Firefox I am. If you remember, in the beginning of part1 , I had mentioned the use of ClientID, using which both controls and their values can be passed to determine which control recieves which value. This is especially needed when there are multiple controls. Well the RetrieveControl seperates the different controls and you can use the variables in this method to return values to the respective contro.l

The value is then returned to the parent window and the popup window is closed.

Step 2: Now in order to use these newly added javacript functions, just call the ReverseString() function on the btnReverse click. To do so, add the onclick attribute to the btnReverse.

That's it. Now test the code. Pass your name from the Parent window to the Popup window and then reverse the string and pass it back to the Parent window.

I would like to mention that there are multiple ways of doing the task demoed in this article. I have seen some cool examples by experts. One of them I would like to mention is that of NC01 where he makes use of properties and ViewState, to pass values to the Popup window. I would encourage you to use this article as a base and try out your own implementations that would work on multiple browsers.

The source code of this article, both in C# and VB.NET, can be downloaded from here. I hope this article was useful and I thank you for viewing it. If you liked the article, please subscribe to the RSS feed over here.

Source: http://www.dotnetcurry.com/ShowArticle.aspx?ID=99&AspxAutoDetectCookieSupport=1

Creating Client and Server-Side Form Validation using the Validator Toolkit for ASP.NET MVC

2008-03-19T11:44:00.001+07:00

Introduction

Microsoft just released the first preview of ASP.NET MVC Framework and it's Microsoft's way to develop Web applications based on the model-view-controller architecture. It will not replace the classic ASP.NET WebForms model. For more information about the new Framework, please see the Scott Guthrie's blog message.

Since there is just a first preview version available, the final feature list is not complete. At this point of time, there is no built-in solution to validate an HTML form on the client and server-side using a standardized system. The Validator Toolkit for ASP.NET MVC offers a way to do form validation on the client and server-side using validation sets. The toolkit is a new project on Microsoft's Open Source Community site at CodePlex.com.

NOTICE: The latest version of the source code and the sample site for the Validator Toolkit can be downloaded from the CodePlex project (source code tab).

The screenshots below give you an idea about how the toolkit will work:

Here's another screenshot showing how the error messages can be displayed:

Now, let's start!

Solution

As mentioned above, the toolkit uses validation sets as a crucial element. Validation sets are special classes that derive from the ValidationSet base class and define all validation rules (validators) for an HTML form. The toolkit generates client-side JavaScript code based on the defined validators during the view rendering.

The client-side uses the very powerful jQuery JavaScript library in conjunction with the jQuery validation plug-in to fulfil the final task of client validation. For more information regarding jQuery and the plug-in, please take a look at the following links:

The validation plug-in used by the toolkit is slightly customized to support all the needed behaviour. Besides using the jQuery library for client validation, you can use it for a lot of other stuff, like animations or DOM manipulation. There are also a lot of plug-ins developed that extend the core library. Validation sets are also used to validate forms on the server (based on the Request.Form collection).

Before we go ahead, let's have a look at a sample validation set:

public class LoginValidationSet : ValidationSet {     protected override ValidatorCollection GetValidators() {           return new ValidatorCollection (          new ValidateElement("username")              { Required = true, MinLength = 5, MaxLength = 30 },          new ValidateElement("password")              { Required = true, MinLength = 3, MaxLength = 50 }       );    } }

This LoginValidationSet class defines the rules for validating a simple login form by overriding the GetValidators method of the base class. The method must return a ValidatorCollection instance with all validators used to validate the HTML form later on. In this case, the username field is required and the input for it must contain at least 5 characters and a maximum of 30 characters. The password field is required too, but within the boundaries of 3 and 50 characters.

The order of the defined validators also defines the execution order of validation process. If the toolkit would use custom attributes to set validation rules instead of the method GetValidators, there is no guarantee for the validation process to validate in the same order the attributes are defined, since the Type.GetCustomAttributes method returns the attribute list in alphabetical order.

Of course, you can also write your own custom validators or you may use the ValidateScriptMethod validator which allows you to call a specific JavaScript function on the client-side and a method within the validation set class for the server-side. More on that later.

Once a validation set class is defined, you attach it to the view and the HTML form processing controller action using the ValidationSet attribute, like this:

Collapse

// // File: LoginController.cs // public class LoginController : Controller {     [ControllerAction]    public void Login() {       RenderView("Login");    }     [ControllerAction]    [ValidationSet(typeof(LoginValidationSet))]    public void Authenticate() {       if(this.ValidateForm())          RenderView("Overview");       else          RenderView("Login");    } }     ...  // // File: Login.aspx.cs (CodeBehind) // [ValidationSet(typeof(LoginValidationSet))] public partial class Login : ViewPage {     [ValidationSet(typeof(LoginValidationSet))]    public partial class Login : ViewPage {    } }

The controller action Authenticate then calls the ValidateForm method, which uses the ValidationSet attribute to do the server-side form validation, based on the NameValueCollection Request:Form.

Within the HTML page, you need to initialize script validation for the login form (loginForm) as follows:

<script type="text/javascript">    $(function(){      updateSettingsForSample1ValidationSet($('#loginForm').validate({rules:{}}));    }); </script>

In the next step, you define the HTML form as usual:

<form id="loginForm" action="/Login/Authenticate" method="post">    Username: <input type="text" id="username" name="username" /><br />    Password: <input type="text" id="password" name="password" /><br />    <input type="submit" value="Login" /> </form>

Finally, the script that defines the validation rules must be defined:

<% this.RenderValidationSetScripts(); %>

You also need to include the jQuery JavaScript library into the form or master page. See the Validator Toolkit sample site for more information. Sample site of the toolkit includes the scripts in the master page:

<script type="text/javascript" src="../../Content/jDate.js"></script> <script type="text/javascript" src="../../Content/jQuery.Core.js"></script> <script type="text/javascript" src="../../Content/jQuery.Delegate.js"></script> <script type="text/javascript" src="../../Content/jQuery.Validation.js"></script>

That's basically all you need to do - include form validation on the client and server-side. The next section gives you an overview of the standard validators and their usage.

Standard Validators

The toolkit offers a handful of standard validators out of the box. The following table gives you an overview of the provided validators:

`ValidatePresence`	Validates the presence of input value. Sample: new ValidatePresence("username")
`ValidateDate`	Validates input value against the given date formats. Setting the `DateFormats` property to a comma-separated list of date formats, allows you to check if the value is formatted in one of the specified formats. You may check for date formats like MM/ DD/ YYYY. If `DateFormats` is not defined, then the validator will use the culture information of the current thread. Sample: new ValidateDate("startDate", "yyyy-mm-dd,yyyymmdd") new ValidateDate("startDate") { DateFormats = "yyyy-mm-dd,yyyymmdd" }
`ValidateMin` `ValidateMax` `ValidateRange`	Validates input value either against a minimum, maximum or integer range. Sample: new ValidateMin("step", 5) new ValidateRange("step") { Min = 1, Max = 99 }
`ValidateMinLength` `ValidateMaxLength` `ValidateRangeLength`	Validates input value either against a minimum, maximum or integer range. Sample: new ValidateMaxLength("password ", 30) new ValidateRangeLength("password") { MinLength = 5, MaxLength = 30 }
`ValidateElement`	Joins multiple validators into one validator to keep things simple and allows the following to validate: `Required`, `Min`, `Max`, `MinLength`, `MaxLength` Sample: new ValidateElement("username") { Required = true, MinLength = 5 }
`ValidateEqualTo`	Validates input value against another input value. This validator is useful to compare password inputs. Sample: new ValidateEqualTo("password", "passwordAgain")
`ValidateScriptMethod`	Validates input value using a custom JavaScript function and validation set class method. Sample: new ValidateScriptMethod("username") { MethodName = "valUsername" } new ValidateScriptMethod("username") { MethodName = "valiUsername", Parameters = "{Opt1:2, Opt2: "AB"}" }

There are still some validators missing, e.g. a general regular expression validator or a specific email validator.

Validation Sets

Each validation set definition class derives from the ValidationSet base class. This base class contains and offers common functionality for the validation process. Let's take a look at the sample below to explain some possibilities the validation set offers to validate complex forms:

public class LoginValidationSet : ValidationSet {     string Username = "";    string Password = "";     protected override ValidatorCollection GetValidators() {       return new ValidatorCollection       (          new ValidateElement("username")              { Required = true, MinLength = 5, MaxLength = 30 },          new ValidateElement("password")              { Required = true, MinLength = 3, MaxLength = 50 },          new ValidateScriptMethod("username", "validateUsername")       );    }     protected bool ValidateUsername() {       // DO HERE SOME VALIDATION AND RETURN RESULT AS BOOLEAN VALUE       return true;    }     protected override void OnValidate() {       if(Username.StartsWith("billy") && Password.StartsWith("gat"))          throw new ValidatorException("username", "The username/password combination ");    } }

Creating non-public instance member fields of type String like the Username or Password fields, allows the base class to populate those fields with the accompanying input field values. This is a simple way to access input values without checking the underlying values collection (e.g. Request.Form).

The ValidateScriptMethod validator defines a JavaScript function (validateUsername) to call during the client-side validation. This function must be defined or included in the HTML page. The ValidationSet base class checks during the server-side validation if the current validation set class contains a case-insensitive method named validateUsername.

Once all validators defined with the GetValidators method are called during the validation process, the base class will call an overall method called OnValidate. By overriding this method you can do some final validation. If you want to throw an exception you need to throw the ValidatorException with the field name and message as parameters.

Using the described techniques, the possibilities of the jQuery library and the custom validators (see below), you can validate most complex forms quite efficiently. The next section will describe ways to localize the messages.

Localization

It's easy to localize error messages of the toolkit using the standard folder. If the default settings are not changed, the default error message for each validator is stored in the ValidationSet.resx file (in the folder App_GlobalResources). The naming convention for the resource key is as follows: <VALIDATORNAME>_DefaultErrorMessage.

To change the default name of the ValidationSet.resx resource file, a derived validation set class can set the name by using the static field DefaultMessageResourceName or by adding the MessageResourceName attribute to the class. It is also possible to combine the techniques and use more than one resource file.

The sample site within the Validator Toolkit contains usage examples of localized error messages and field names. The localization is simple and straightforward.

Custom Validators

Creating custom validators is quite simple, but requires some basic knowledge of the jQuery JavaScript library and the validation plug-in if the validator wants to support client validation. The sample site includes a custom validator called ValidateBuga, which checks the input value against the constant string buga. Each validator derives from the Validator class, which provides a couple of virtual methods a custom validator must override:

`GetClientMethodData`	This method defines by returning an instance of the `ValidatorMethodData` class the name of the custom validator (for the `jQuery` validation plug-in), the JavaScript function code and the default error message.
`GetClientRule`	This method returns the plug-in client rule to use once the validator is defined within a validation set class.
`GetClientMessage`	This method returns the localized error message for a given element.
`GetDefaultErrorMessageFormat`	This method returns the default error message of the custom validator.
`Validate`	This method validates the input value for the given element. If the input is not valid the validator must call the `InsertError` method of the `Validator` base class to signal an error.

Here is the source code of the ValidateBuga sample validator:

Collapse

public class ValidateBuga : Validator {     public ValidateBuga(string elementsToValidate)       : base(elementsToValidate) {    }     public override ValidatorMethodData GetClientMethodData() {       return new ValidatorMethodData(          "buga",          "function(value,element,parameters){return value=='buga';}",          "$.format('" + ErrorMessageFormat + "')"       );    }     public override string GetClientRule(string element) {       return "buga:true";    }     public override string GetClientMessage(string element) {       return string.Format("buga:'{0}'", GetLocalizedErrorMessage(element))          .Replace("'", "\'");    }     protected override void Validate(string element) {       if(Values.ContainsKey(element) == false || (Values[element] ??          string.Empty).Trim() != "buga")          InsertError(element);    }     protected override string GetDefaultErrorMessageFormat() {       return "The field {0} must contain the value \"buga\"";    } }

Another way to use custom validation is by using the validator ValidateScriptMethod. It allows to call a JavaScript function on the client-side and a specific method of the validation set class on the server-side. The custom validation is part of the validation set class and is not usable in multiple validation sets.

Summary

The Validator Toolkit is a simple and easy way to add client-side and server-side HTML form validation to the new ASP.NET MVC Framework. It is easy to extend the toolkit by adding custom validators. You may use the toolkit until Microsoft provides a solution for HTML form validation.

Extending Base Type Functionality with Extension Methods

2008-03-18T11:07:00.001+07:00

By Scott Mitchell

Introduction
In November 2007, Microsoft released the .NET Framework version 3.5, Visual Studio 2008, and new versions of the C# and Visual Basic languages (see An Overview of ASP.NET 3.5 and Visual Studio 2008 for more details on the release). The new C# and Visual Basic versions include a myriad of exciting new features that make the languages more expressive and open the door for new syntax constructs, like LINQ. One of these new language features is extension methods, which is the topic for today's article.

Extension methods allow a developer to tack on her own methods to an existing class in the .NET Framework. For example, imagine that our developer created a method named StripHtml, that strips HTML elements from a string using a regular expression. By associating this method with the System.String class, it could be called as if it was one of the System.String class's built-in methods:

' VB
Dim str As String = "<b>Hello, world!</b>"
Dim strippedString = str.StripHtml()

// C#
string str = "<b>Hello, world!</b>";
 string strippedString = str.StripHtml();

Extension methods make it easy to add functionality to an existing type using a natural syntax. Also, since the extension methods appear in Visual Studio's IntelliSense drop-down list, they are easier to find and use than wrapper class equivalents. In this article we will see how to create extension methods in both C# and Visual Basic. Read on to learn more!

The Impetus Behind Extension Methods
Over the past several years, I've worked with a number of clients in building large ASP.NET web applications. In most of these applications there has been a need to define extra functionality on strings. On some pages we need to strip all of the HTML elements from a string before displaying it; on other pages we need to parse the string and censor out an potentially profane words; and on other pages we need to convert URLs into appropriate HTML anchor tags (i.e., converting the text URL into <a href="URL">URL</a>).

To provide this function I created a wrapper class named StringHelpers with methods for stripping HTML elements, censoring profanity, and converting URLs into hyperlinks. The wrapper class was implemented as a class with a series of static methods that accepted a string as input, perform the intended operation, and then return the resulting string.

' VB
Public Class StringHelpers
   Public Shared Function StripHtml(ByVal str As String) As String
      ... Strip the HTML, and return the stripped string ...
    End Function

   Public Shared Function RemoveProfanity(ByVal str As String) As String
      ... Remove the profanity, and return the "clean" string ...
   End Function

   Public Shared Function ConvertUrlsToHyperlinks(ByVal str As String) As String
       ... Replace URLs with the appropriate HTML ...
   End Function
End Class


// C#
public class StringHelpers
{
   public static string StripHtml(string str)
   {
      ... Strip the HTML, and return the stripped string ...
    }

   public static string RemoveProfanity(string str)
   {
      ... Remove the profanity, and return the "clean" string ...
   }

   public static string ConvertUrlsToHyperlinks(string str)
    {
      ... Replace URLs with the appropriate HTML ...
   }
}

With the StringHelpers wrapper class in place, I can exercise this added string functionality using code like:

' VB
Dim str As String = "<b>Hello, world!</b>"
Dim strippedString = StringHelpers.StripHtml(str)

// C#
string str = "<b>Hello, world!</b>";
 string strippedString = StringHelpers.StripHtml(str);

While wrapper classes offer a simple approach to encapsulate commonly used functionality, there is no tight association between the wrapper class's functionality and the type its methods operate on. In order to use the wrapper class, a developer must first know of its existence; he must dig into the various methods to see how they operate. Ideally, these string-specific methods (StripHtml, RemoveProfanity, and ConvertUrlsToHyperlinks) would be part of the System.String type, and I could call them using a more intuitive syntax (StringVariable.StripHtml()) and enjoy IntelliSense support through Visual Studio. Extension methods provide these advantages, allowing a developer to more intuitively assign methods to a particular type.

Extending Type Functionality via Inheritance

Extending Type Functionality via Inheritance
In addition to wrapper classes, another common approach to adding functionality to an existing type is through inheritance. Inhertiance is a core object-oriented programming principle that enables a developer to take an existing type and extend its functionality by adding new methods, properties, and events. The downside with inheritance is that you need to create a new type to extend the existing type. Consequently, in order to use the added functionality you have to work with the new type. This is a Good Thing and appropriate design in most cases, but if you just want to add a simple method or two to add new functionality to an existing type, having to use the newly created type can be burdensome. Moreover, not all types can be extended. The `System.String` class, for example, is marked as `sealed`, meaning that it cannot be extended. For more on using inheritance, see Ian Stallings article, Using Object-Orientation in ASP.NET: Inheritance.

In addition to wrapper classes, another common approach to adding functionality to an existing type is through inheritance. Inhertiance is a core object-oriented programming principle that enables a developer to take an existing type and extend its functionality by adding new methods, properties, and events. The downside with inheritance is that you need to create a new type to extend the existing type. Consequently, in order to use the added functionality you have to work with the new type. This is a Good Thing and appropriate design in most cases, but if you just want to add a simple method or two to add new functionality to an existing type, having to use the newly created type can be burdensome. Moreover, not all types can be extended. The System.String class, for example, is marked as sealed, meaning that it cannot be extended.

For more on using inheritance, see Ian Stallings article, Using Object-Orientation in ASP.NET: Inheritance.

Creating Extension Methods for System.DateTime
Let's look at how to create and use extension methods. Many online messageboard sites - like the ASP.NET Forums - display the times the messages were posted using descriptions relative to the current date and time (rather than simply displaying the full date and time). For example, if a post was made within the last minute, the post's date value might read: "Seconds ago." Alternatively, if the post happened in the past few minutes, the message might read: "3 minutes ago." If the post happened within the current date, it might just show the time, like: "10:34 AM". If the post happened in a prior day, then the entire date and time would be displayed: "December 3rd, 2007 10:34 AM."

The System.DateTime class has a number of formatting methods - ToString(), ToShortDateString(), and ToLongTimeString(), to name a few - but wouldn't it be nice to have a method like ToRelativeToCurrentTimeString() method that effected the logic described above? We can add such a method using extension methods. Let's create two such extension methods on the System.DateTime class: ToRelativeToCurrentTimeString() and ToRelativeToCurrentUtcTimeString(). These methods will both operate on a DateTime instance and return a string that displays a time description relative to the current time (or UTC time).

Since the syntax for creating extension methods differs quite a bit between VB and C#, let's examine first implement these extension methods using VB; after doing so, we will create the extension methods in C#. The download at the end of this article includes two ASP.NET website applications, either of which you can open with Visual Studio 2008: one in VB and one in C#.

Creating the Extension Methods with Visual Basic
In order to create the extension methods in Visual Basic we need to first create a Module. For each extension method you want to create, add a method whose first input parameter is of the type that you want to add the extension method to. Moreover, prefix the method with the Extension() attribute.

The following Module named DateTimeHelpers contains two methods: ToRelativeToCurrentTimeString(DateTime) and ToRelativeToCurrentUtcTimeString(DateTime), both of which accept a DateTime instance as their first input parameter. The methods are also marked with the Extension() attribute (which is found in the System.Runtime.CompilerServices namespace). The two methods call the private ToRelativeString method, which returns the appropriate string message based on the difference in time between the two passed-in DateTime values.

Imports System.Runtime.CompilerServices
Imports Microsoft.VisualBasic

Namespace Helpers
    Public Module DateTimeHelpers
       <Extension()> _
       Public Function ToRelativeToCurrentTimeString(ByVal dt As DateTime) As String
             Return ToRelativeString(dt, DateTime.Now)
       End Function

       <Extension()> _
       Public Function ToRelativeToCurrentUtcTimeString(ByVal dt As DateTime) As String
            Return ToRelativeString(dt, DateTime.UtcNow)
        End Function

       Private Function ToRelativeString(ByVal timeInPast As DateTime, ByVal currentTime As DateTime) As String
            If timeInPast.Date <> currentTime.Date Then
                ' timeInPast happend more than a day ago... show the date & time
                 Return timeInPast.ToString()
            Else
                ' timeInPast and currentTime happened on the same day...
                Dim secondsApart As Integer = Convert.ToInt32(currentTime.Subtract(timeInPast).TotalSeconds)
 
                ' See if the date dt is within the last hour...
                If secondsApart < 10 Then
                   Return "Seconds ago..."
                ElseIf secondsApart < 60 Then
                    Return "Less than a minute ago..."
                ElseIf secondsApart < 3600 Then
                   Return String.Format("{0:N0} minutes ago...", secondsApart / 60 + 1)
                 End If

                ' Ok, the date is more than an hour old... show the time
                Return timeInPast.ToShortTimeString()
            End If
       End Function
    End Module
 End Namespace

We can now call these extension methods from a DateTime instance. In order to use an extension method, we first need to add an Imports directive to the code file, importing the namespace where the extension methods reside (Helpers). Upon doing that, the extension method is visible in the IntelliSense drop-down list, as the following screen shot illustrates.

The download at the end of this article includes a demo that allows the visitor to enter a date and time value into a TextBox. On postback, the entered value is converted into a DateTime and the return value from the ToRelativeToCurrentTimeString() method is displayed in a Label Web control.

Extension Methods with Input Parameters

The ToRelativeToCurrentTimeString() and ToRelativeToCurrentUtcTimeString() methods are defined in the Module as having one input parameter of type DateTime. This results in an extension method applied to the DateTime type that has no input parameters. But what if we needed to pass in one or more parameters to the ToRelativeToCurrentTimeString()? For example, maybe we wanted to pass in some integer value like so: DateTimeInstance.ToRelativeToCurrentTimeString(someIntegerValue).

To accomplish this, simply update the definition of the ToRelativeToCurrentTimeString() method so that it takes in two input parameters: a DateTime first and then an Integer like so:

<Extension()> _
Public Function ToRelativeToCurrentTimeString(ByVal dt As DateTime, ByVal i As Integer) As String
   ...
End Function

The order of the input parameter's are important with extension methods, because the first parameter is the type that the extension method is applied to. In other words, if you redefined the extension method so that the Integer parameter was the first input parameter, and the DateTime the second, then the resulting extension method would be applied to objects of type Integer.

Creating the Extension Methods with C#
The syntax for creating the extension methods in C# is a little different than in Visual Basic. The equivalent of a Module in C# is a static class. Also, the methods in a static class must be marked as static, as well. Finally, instead of using the Extension() attribute, C# requires that the this keyword be used for the input parameter whose type the extension method will be applied.

using System;

namespace Helpers
{
    public static class DateTimeHelpers
    {
       public static string ToRelativeToCurrentTimeString(this DateTime dt)
       {
             return ToRelativeString(dt, DateTime.Now);
       }

       public static string ToRelativeToCurrentUtcTimeString(this DateTime dt)
       {
            return ToRelativeString(dt, DateTime.UtcNow);
        }

       private static string ToRelativeString(DateTime timeInPast, DateTime currentTime)
       {
            if (currentTime.Date != timeInPast.Date)
                // dt happend more than a day ago... show the date & time
                 return timeInPast.ToString();
            else
            {
                // dt and rightNow happened on the same day...
                int secondsApart = Convert.ToInt32(currentTime.Subtract(timeInPast).TotalSeconds);
 
                // See if the date dt is within the last hour...
                if (secondsApart < 10)
                   return "Seconds ago...";
                else if (secondsApart < 60)
                    return "Less than a minute ago...";
                else if (secondsApart < 3600)
                   return string.Format("{0:N0} minutes ago...", secondsApart / 60 + 1);
 
                // Ok, the date is more than an hour old... show the time
                return timeInPast.ToShortDateString();
            }
       }
    }
}

With the extension methods defined, they can be used in code as if they were native members on the underlying type. Like with the Visual Basic example, in order to use the extension methods in a code file you must import the appropriate namespace (Helpers) via the using statement (i.e., using Helpers;).

Things to Remember When Using Extension Methods
When using extension methods there are a few things to keep in mind. First, realize that extension methods are simply syntactic sugar - they do not introduce any new functionality, but just provide existing functionality in a more human-friendly syntax. Underneath the covers, the design-time experience allows for the IntelliSense functionality, but in actuality an extension method call is compiled into a call to the appropriate method in the static class or Module. In other words, extension methods are synonymous with wrapper classes - the only difference is the design-time syntax.

Since extension methods are functionality equivalent to wrapper classes, the same limitations apply. A wrapper class, for instance, can only access public members of the types it is working with. Likewise, an extension method defined on a type can only work with those types public members. It cannot read or write protected members (which is possible with inheritance). Moreover, extension methods can only be applied to methods - there is no such thing as an extension property or an extension event.

Finally, don't forget that in order to use an extension method you must import the appropriate namespace into your code. In VB that means you'll need to do an Import namespace. In C# it's using namespace;.

Conclusion
In this article we looked at a new feature in C# 3.0 and Visual Basic 9.0: extension methods. We saw how to create and use a simple extension method in both C# and VB. The download at the end of this article includes the code examined in this article along with a simple demo application illustrating the extension method is use.

Happy Programming!

By Scott Mitchell

Source: http://aspnet.4guysfromrolla.com/articles/120507-1.aspx#postadlink

Building a Simple Blog Engine with ASP.NET MVC and LINQ - Part 2

2008-03-14T10:25:00.001+07:00

Abstract
In the second part of the article series about ASP.NET MVC Framework, Keyvan adds controllers to his blogging engine in order to describe how to use controllers in ASP.NET MVC and discusses some details related to controllers. He first discusses the concept of URL routing patterns and then explores the anatomy of a controller class. Finally, he examines how to implement the controllers in his sample blog application.

by Keyvan Nayyeri

Introduction In the first part of this article series about ASP.NET MVC Framework, I gave a short introduction to Model View Controller (MVC) pattern, ASP.NET MVC and the basic structure of the sample blogging engine that I am going to build in this article series and have named it KBlog. In this second part I am going to cover one of the main three elements in MVC pattern which is controller. Controller is the most common element of the MVC pattern and is responsible for handling user inputs and executing appropriate codes to load data and display them to the user. Even though this is not a 100% correct definition, you can consider controller as an intermediate component between the user and view which tries to handle the user inputs and displays the appropriate output to him or her. Normally, you use some template files to handle different requests in your web applications. It means that you have a page named Post.aspx to handle requests to such a post and the same for other pages. In MVC framework this is different and you use controller classes to handle requests. In other words, you no longer handle user requests with .aspx pages. Instead, you write controller classes that handle requests and pass appropriate data to view pages to be shown to the end users. But how do controller classes receive requests? To do this, ASP.NET uses an URL routing mechanism that uses routes to route incoming requests to appropriate controller classes. There is a default definition for routing in ASP.NET MVC framework, but you can change it for your own needs as I will do for KBlog in this article series. I will cover routing mechanism in the future parts, but for this part I give a quick overview of the necessary parts. The other topic that I will cover in this article is the anatomy of controller classes and their structure as well as the action methods and how to pass parameters to action methods in order to route requests to them.
Default URL Routing Pattern As I stated, there is a default routing pattern for routing mechanism in ASP.NET MVC framework that you can modify for your own. This mechanism can be modified in the ASP.NET Application Class (Global.asax file). But here I do not care about routing mechanism details and how to modify it. A future article of this series covers this in good detail, but I just talk quickly about the default routing pattern. By default, ASP.NET MVC framework routes requests to /Url/ paths to a controller class with UrlController name. As an instance, requests to /Post/ URL will be routed to PostController class by default. Moreover, all requests to URL's under /Url/ path will be routed to UrlController class as well. For instance, requests to /Post/Technology/Surface will be routed to PostController class.
The Anatomy of a Controller Class A controller class is a class just like other classes. It is not necessary to derive this class from a special class or implement an interface for it, but it is recommended to derive a controller class from System.Web.MVC.Controller base class for ease of development and getting the benefits of this base class in your development. Controller class provides some tools that can assist you on developing your ASP.NET MVC applications and I do not think any developer wants to avoid using it. Controller class is applied to all project and file item templates in Visual Studio and whenever you create a new MVC controller class in Visual Studio this class appears in your code. You can add a new MVC controller class file in the Add New Item dialog as is shown in Figure 1. Figure 1 Listing 1 shows the default code for a controller class that I named SampleController. Listing 1 using System; using System.Web; using System.Web.Mvc; namespace KBlog.Controllers { public class SampleController : Controller { [ControllerAction] public void Index() { //Add action logic here } } } As you see, there is a reference to System.Web.Mvc namespace which comes to your machine after installing the ASP.NET 3.5 extensions and the class is also derived from the Controller base class.
Action Methods The main part of a controller class is its action methods. Action methods are just some public methods that do not return anything and are marked with a ControllerAction attribute which makes a method an action method. But what is the responsibility of an action method? Well, an action method receives a request and triggers appropriate logic to fetch data from the data model and passes this data to views in order to show the appropriate result to end users. So action methods are like the heart of the controller class. But how do action methods work? Action methods work based on the parameters that are passed to them. Obviously, URL's represent the content that a user is looking for and routing mechanism routes each request to the appropriate controller class. But here, parameters specify the action that should take place. For instance, when the user is viewing a page like /Post?ID=5 then the request should be routed to PostController class where Post action method handles the request in some ways. Listing 2 adds an action method to Listing 1. Listing 2 using System; using System.Web; using System.Web.Mvc; namespace KBlog.Controllers { public class SampleController : Controller { [ControllerAction] public void Index() { //Add action logic here } } } By default, there is a HomeController class in ASP.NET MVC projects that handles requests to default home pages. In the next section I will discuss more about the parameters in action methods.
Parameters in Action Methods Parameters are the key part of the controller class and specify the user's choice to actions methods. Parameters come directly from the URL and its query parameters and you need to decide how to use them with your own logic. There are some different ways to handle parameters in action methods and it is left to you to decide how to do this. The first approach is to use query parameters and fetch them in the action method from the URL. Obviously, this approach does not need any parameter for the action method. Listing 3 shows such an action method that retrieves the ID parameter from query string. Listing 3 // Sample URL: /Page/Article?ID=5 [ControllerAction] public void Article() { int id = Convert.ToInt32(Request["ID"]); } The first approach was something that you could do in all ASP.NET web applications as well. In the second approach you pass the URL parameter to the action method as its parameter by defining the type. Listing 4 shows an example of this approach. You can simply use the id parameter in your action method to write your logic. Listing 4: // Sample URL: /Page/Article?ID=5 [ControllerAction] public void Article(int id) { // Implement the logic to handle the // request based on the id parameter } The last way is similar to the previous one. You handle parameters via action method parameters, but parameters also come from sub-paths. So if you have a URL like /Page/Article/5, then 5 can be considered as the ID parameter to be passed to the controller. Listing 5 shows this in action. Listing 5: // Sample URL: /Page/Article/5 [ControllerAction] public void Article(int id) { // Implement the logic to handle the // request based on the id parameter } You can use nullable type arguments in order to pass optional parameters to an action method. For instance, suppose that you have an article that consists of several sections. In one case the user can request the whole article and in an optional case he can also pass a Section parameter to get a specific section based on its unique string title. In listing 6 you see how this can be implemented. Listing 6: // Sample URL 1: /Page/Article/5 // Sample URL 2: /Page/Article/5?section=introduction [ControllerAction] public void Article(int id, string? section) { // Implement the logic to handle the request // based on the id and/or section parameters }
Implementing the Controllers for KBlog Now that we have gotten familiar with the principles of controller classes, action methods and action parameters, we can apply them in KBlog to update our code. For KBlog we need three controllers (regarding that here we just want to build a very simple blogging engine to show some concepts): · Controller for homepage which is our index: We load data for recent N posts and the list of all categories. · Controller for individual posts: We load data for a specific post based on its ID. · Controller for individual categories: We load all posts that are in a specified category based on its unique name. Listing 7 is the code for the homepage in HomeController where we do not need to pass any parameter. Later I will update this controller to load recent posts and all categories and pass them to the appropriate view. For now, just focus on the controller part of the code. Listing 7: using System; using System.Web; using System.Web.Mvc; namespace KBlog.Controllers { public class HomeController : Controller { // Sample URL: /Default.aspx [ControllerAction] public void Index() { } } } The other controller is PostsController where we handle requests for individual posts based on the unique ID (Listing 8). Note that later we need to modify the default routing definitions in order to route request to this controller. Listing 8: using System; using System.Web; using System.Web.Mvc; namespace KBlog.Controllers { public class PostsController : Controller { // Sample URL: /Post/25 [ControllerAction] public void Post(int id) { } } } And the last controller is CategoriesController where we handle requests for a specific category based on its unique string name and load all posts in that category (Listing 9). Like PostsController we need to modify default routing definition in order to route requests to this controller. Listing 9: using System; using System.Web; using System.Web.Mvc; namespace KBlog.Controllers { public class CategoriesController : Controller { // Sample URL: /Category/DotNet [ControllerAction] public void Category(string name) { } } }
Summary In the second part of my articles about ASP.NET 3.5 MVC framework I discussed controller as one of the main parts of the MVC pattern. First, I introduced controllers then talked about the anatomy of controller classes in ASP.NET MVC. Then I talked about action methods and their parameters. Finally, I applied these theories in KBlog to move forward in the development of the simple sample blogging engine that I am going to write in this article series. In the future parts I will talk about data model, views, unit testing of MVC applications, URL routing and other related ideas.

Working with Callback and Control Rendering

2008-03-13T09:41:00.001+07:00

Introduction

In my previous article, I wrote about Callback and JSON based JavaScript serialization which you can find here. Callback doesn't cause postback and page rendering, neither full nor even partial. With it we can communicate with the server (IIS) and our server side code runs there successfully and could rebind our controls like DropDownList, GridView, ListView, DataList, Repeater, or any server side control to which you assign data. The problem is when the page won't render, its controls won't render, and if controls won't render then changes won't reflect. When changes don't reflect there won't be anything at the front end to show on the webpage.

This article is mainly about callback and rendering controls but through this tutorial you can also learn many other things; how postbacks work, how rendering works, how to dynamically create server-side controls, how to create DataTables dynamically in memory to bind with, how to get server-side controls during client-side execution and set their properties, and how to register client-side events of server side control from the server-side code.

Important Terms First of all, I would like to briefly describe some terms of which I believe every web developer should be aware. Postback A postback is a mechanism of communication between client-side (browser) and server-side (IIS). Through a postback all contents of page/form(s) are sent to the server from client for processing. After following the page life cycle, all server-side contents get render into client-side code and the client (browser) displays the content. Callback is another form of communication between server and client. Callback doesn't follow the page life cycle which is followed by standard postback, and it doesn't even cause rendering. Rendering Rendering is the process of converting server-side code/content into client-side code/content so the client (browser) can understand the code and could display the output. Browsers can understand, or you may say decode, code of client-side languages and scripts like HTML, DHTML, XHTML, JavaScript, VbScript, etc. If rendering doesn't happen then changes won't be reflected at client-side. Ajax leverages partial page postbacks automatically whereas callback doesn't, so programmer needs to perform that task manually. The ASP.NET team has created a RenderControl method which is applied to the base control. By using that method we can render our controls very easily. Callback Callback is a lightweight process. It uses the well known XMLHTTP object internally to call server side methods. It doesn't cause page postback so doesn't cause page rendering, so if we want to show output at client side, we need to make output html ourselves and render controls manually. ICallbackEventHandler ICallback is implemented in ASP.NET by using the ICallbackEventHandler interface, which has two methods, one of them used to be called from JavaScript (client-side code) and the other one returned results asynchronously back to the JavaScript function. We just need to perform some action through server-side code at server-side and need to return results, but the results could be an instance or object of a class which might not be easy for JavaScript code to handle, so here we prefer JSON which stands for JavaScript Object Notation.
Real Time Scenario with implementation Suppose we have categories, subcategories, products data, and we need to populate categories and subcategories which depend upon categories, and the data would be populated in two different DropDownLists. For products data which contains multiple columns so we need to show that data in tabular format so I would prefer GridView control. So the situation would be load/populate categories on Page_Load and load/populate subcategories on the basis of selected category using callback and finally load products into Gridview on the basis of selected subcategory. Before starting coding, I would like to write the Pseudo code for better understanding.
Steps 1. Create Server side controls e.g. DropDownLists and GridView 2. Load Categories on Page load 3. Implement ICallbackEventHandler interface 4. Create subcategories data in server memory to bind to Subcategory DropDownLists. 5. Render control (subcategory DropDownLists) and show output. 6. Create products data in server memory to bind to Products GridView. 7. Render Control (products GridView) and return rendered contents to client side to show 8. Set innerHTML of each control by rendered contents Create DropDownLists and GridView Controls Listing 1 <b>Categories:</b> <br /> <asp:DropDownList ID="ddlCategories" runat="server" Width="100" onchange="CallSrv(this);"> </asp:DropDownList> <br /> <b>Subcategories</b>: <div id="ddlSubcategories"> </div> <b>Products:</b> <div id="grvProducts"> </div>
Callback Server side code Let's implement the ICallbackEventHandler to call server side methods asynchronously step by step Implement Server Side (C#) Page/Control class by System.Web.UI.ICallbackEventHandler Following are definition of two methods which needs to implement: RaiseCallbackEvent method invoke by JavaScript function Listing 2 public void RaiseCallbackEvent(string eventArgument) { string[]commands = eventArgument.Split("," .ToCharArray()); if (commands[0].Equals("LoadSubCategory")) { DropDownList ddlSubcategories = new DropDownList(); switch (commands[1]) { case "Autos": ddlSubcategories.Items.Add("Cars"); ddlSubcategories.Items.Add("Bikes"); break; case "Electronics": ddlSubcategories.Items.Add("Computers"); ddlSubcategories.Items.Add("TV"); break; } ddlSubcategories.Attributes.Add("onchange", "CallSrv(this);"); System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.IO.StringWriter sw = new System.IO.StringWriter(sb); HtmlTextWriter htw = new HtmlTextWriter(sw); ddlSubcategories.RenderControl(htw); this.RenderedOutput = "LoadSubCategory," + sb.ToString(); } else if (commands[0].Equals("LoadProducts")) { DataTable dtProducts = new DataTable(); dtProducts.Columns.Add("ProductName"); dtProducts.Columns.Add("ProductDescription"); dtProducts.Columns.Add("ProductPrice"); DataRow drProduct; switch (commands[1]) { case "Cars": drProduct = dtProducts.NewRow(); drProduct["ProductName"] = "Honda"; drProduct["ProductDescription"] = "2000 CC"; drProduct["ProductPrice"] = "$1000"; dtProducts.Rows.Add(drProduct); drProduct = dtProducts.NewRow(); drProduct["ProductName"] = "Toyota"; drProduct["ProductDescription"] = "1800 CC"; drProduct["ProductPrice"] = "$800"; dtProducts.Rows.Add(drProduct); break; case "Bikes": drProduct = dtProducts.NewRow(); drProduct["ProductName"] = "Pak Hero"; drProduct["ProductDescription"] = "125 CC"; drProduct["ProductPrice"] = "$100"; dtProducts.Rows.Add(drProduct); drProduct = dtProducts.NewRow(); drProduct["ProductName"] = "Honda"; drProduct["ProductDescription"] = "250 CC"; drProduct["ProductPrice"] = "$150"; dtProducts.Rows.Add(drProduct); break; case "Computers": drProduct = dtProducts.NewRow(); drProduct["ProductName"] = "Dell"; drProduct["ProductDescription"] = "P4 Centrino"; drProduct["ProductPrice"] = "$400"; dtProducts.Rows.Add(drProduct); drProduct = dtProducts.NewRow(); drProduct["ProductName"] = "IBM"; drProduct["ProductDescription"] = "P4 Think PAD"; drProduct["ProductPrice"] = "$350"; dtProducts.Rows.Add(drProduct); break; case "TV": drProduct = dtProducts.NewRow(); drProduct["ProductName"] = "Sony"; drProduct["ProductDescription"] = "Plasma"; drProduct["ProductPrice"] = "$600"; dtProducts.Rows.Add(drProduct); drProduct = dtProducts.NewRow(); drProduct["ProductName"] = "Philips"; drProduct["ProductDescription"] = "Projection"; drProduct["ProductPrice"] = "$550"; dtProducts.Rows.Add(drProduct); break; } GridView grvProducts = new GridView(); grvProducts.DataSource = dtProducts; grvProducts.DataBind(); System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.IO.StringWriter sw = new System.IO.StringWriter(sb); HtmlTextWriter htw = new HtmlTextWriter(sw); grvProducts.RenderControl(htw); this.RenderedOutput = "LoadProducts," + sb.ToString(); } } public string GetCallbackResult() { return RenderedOutput; } In the Page_Load or Page_Init events Following statements are used to register client side methods. CallServer(arg, context) as name implies would use to call/raise server side method which was RaiseCallbackEvent string eventArgument) ReceiveServerData(arg, context) would use to get result through arg parameter by GetCallbackResult() Listing 3 //Register Client Script for Callback and populate categories protected void Page_Load(object sender, EventArgs e) { ClientScriptManager scriptMgr = Page.ClientScript; String cbReference = scriptMgr.GetCallbackEventReference(this, "arg", "ReceiveServerData", ""); String callbackScript = "function CallServer(arg, context) {" + cbReference + "; }"; cm.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true); if (!Page.IsPostBack) { //Load Products Data this.ddlCategories.Items.Add("Select"); this.ddlCategories.Items.Add("Autos"); this.ddlCategories.Items.Add("Electronics"); } }
Callback client side code Listing 4 <script language = "JavaScript" type = "text/JavaScript"> function ReceiveServerData(arg, context) { var cmd_content = arg.split(','); if (cmd_content[0] == 'LoadSubCategory') { document.getElementById('ddlSubcategories').innerHTML = cmd_content[1]; } else { document.getElementById('grvProducts').innerHTML = cmd_content[1]; } } function CallSrv(ddl) { if (ddl.id == 'ddlCategories') { if (ddl.value != 'Select') { CallServer('LoadSubCategory' + ',' + ddl.value, ''); } } else { CallServer('LoadProducts' + ',' + ddl.value, ''); } } </script> That's it. These are the steps which you need to use to call and get result from server side code using ICallback. Asynchronously output would be within a millisecond and without Postback Figure 1
Downloads [Download Sample]
Conclusion Callback is a lightweight technique used to call server side methods asynchronously from JavaScript without any postback and reloading/rendering of unnecessary parts of a page and unnecessary code. So we can use that when we need to perform any operations at the backend on the server like updating records in database. You don't need to send all your contents of page in a request and make that object heavyweight which could cause slow performance. Source: http://aspalliance.com/1573_Working_with_Callback_and_Control_Rendering.all

Accessing data using Language Integrated Query (LINQ) in ASP.NET WebPages – Part 1

2008-03-12T09:32:00.000+07:00

This article comprises of two parts; Part 1 deals with the introduction to LINQ and LinqDataSource control in ASP.NET and describes how to define and retrieve an in-memory data collection and display data in a web page. Part 2 explains how to create entity classes to represent SQL Server database and tables using Object Relational Designer and display data in a web page using LinqDataSource control.


Introduction to LINQ Language Integrated Query (LINQ) is a query syntax that defines a set of query operators that allow traversal, filter, and projection operations to be expressed in a declarative way in any .NET-based programming language. It provides a unified programming model for querying and updating data from different types of data sources and extends data capabilities directly into the C# and Visual Basic languages. LINQ simplifies the interaction between object-oriented programming and relational data by applying the principles of object-oriented programming to relational data. With the advent of LINQ, a ground-breaking, new concept of a query has been introduced as a first-class language construct in C# and Visual Basic. LINQ simplifies the way you work with data queries. LINQ offers you a unified, declarative syntax model to query any data source including an XML document, SQL database, an ADO.NET Dataset, an in-memory collection, or any other remote or local data source that chooses to support LINQ Language Integrated Queries are strongly typed and designer tools can be used to create object-relational mappings. It is easier now for developers to catch many errors during compile-time; also supports Intellisense and debugging. Sample Query A query is an expression that retrieves data from a data source. All LINQ query operations consist of three essential actions: Obtain the data source,Create the query and Execute the query. In LINQ, the execution of the query is isolated from the query itself and hence data cannot be retrieved just by creating a query; In the following sample, a query retrieves even numbers from an array of integers. // Data source. int[] numbers = new int[10] { 0, 1, 2, 3, 4, 5, 6 ,8,9,10}; // Query creation. IEnumerable<int> numQuery = from num in numbers where (num % 2) == 0 select num; // Query execution. foreach (int j in numQuery) { Console.Write("{0,1} ", j); } Output will be: 0,2,4,6,8,10 LinqDataSource Control in ASP.NET As many of you familiar with various DataSource controls in ASP.NET 2.0, the 2008 version of ASP.NET includes a new DataSource control called LinqDataSource control. The LinqDataSource control enables us to retrieve, update data using Language Integrated Queries (LINQ) from an in-memory collection of data or SQL Server database tables. It automatically generates data commands for select, update, delete and insert operations and you need not have to create them manually. This control has two main properties: 1. ContextTypeName property that represents the name of the type object that contains data collection 2. TableName property that represents the name of the public field or property that returns data collection, or table name in case of database access. Walkthrough 1: Connecting in-memory data collection using LinqDataSource control and perform queries to display dat in a ASP.Net page Open Visual Studio 2008 and create a New WebSite Project. Add a new class file to the App_Code folder of the project. Define classes that supplies data to the control and write LINQ Queries to retrieve data from them. public class Student { public string First { get; set; } public string Last { get; set; } public int ID { get; set; } public List<int> Scores; } public class StudentData { static List<Student> students = new List<Student> { new Student {First="Svetlana", Last="Omelchenko", ID=111, Scores= new List<int> {97, 92, 81, 60}}, new Student {First="Claire", Last="O'Donnell", ID=112, Scores= new List<int> {75, 84, 91, 39}}, new Student {First="Sven", Last="Mortensen", ID=113, Scores= new List<int> {88, 94, 65, 91}}, new Student {First="Cesar", Last="Garcia", ID=114, Scores= new List<int> {97, 89, 85, 82}}, new Student {First="Debra", Last="Garcia", ID=115, Scores= new List<int> {35, 72, 91, 70}}, new Student {First="Fadi", Last="Fakhouri", ID=116, Scores= new List<int> {99, 86, 90, 94}}, new Student {First="Hanying", Last="Feng", ID=117, Scores= new List<int> {93, 92, 80, 87}}, new Student {First="Hugo", Last="Garcia", ID=118, Scores= new List<int> {92, 90, 83, 78}}, new Student {First="Lance", Last="Tucker", ID=119, Scores= new List<int> {68, 79, 88, 92}}, new Student {First="Terry", Last="Adams", ID=120, Scores= new List<int> {99, 82, 81, 79}}, new Student {First="Eugene", Last="Zabokritski", ID=121, Scores= new List<int> {96, 85, 91, 60}}, new Student {First="Michael", Last="Tucker", ID=122, Scores= new List<int> {94, 92, 91, 91} } }; You have just added a Student Class and an initialized list of students in the class file. The data source for the queries is a simple list of Student objects. Each Student record has a first name, last name, and an array of integers that represents their test scores in the class. Creating Queries You can create number of queries to retrieve data from the datasource and in this article, I have create few queries for demonstration purposes. Each query is assigned to a public property or field so that it would be used in the LinqDataSource Controls in the WebPage. 1. Queries of IEnumerable<StudentAverage> type public class StudentAverage { public int ID; public string First; public string Last; public double ScoreAverage; } public IEnumerable<StudentAverage> studentAverageMarks = from student in StudentData.students where student.Scores[0] > 90 select new StudentAverage { ID=student.ID, First=student.First, Last=student.Last, ScoreAverage = student.Scores.Average()}; Declared a new type StudentAverage that consists of ID,First, Last, ScoreAverage fields. This query returns the list of students with average marks. 2. Queries of IEnumerable<int> type public static int studentID; public IEnumerable<int> GetStudentTotal = from student in StudentData.students where student.ID == StudentData.studentID select student.Scores.Sum(); Declared another public property that returns a int type of collection that holds the result from the query. This query retrieves sum total of all marks for a particular student and it uses a condition in the where clause. User will supply data to the parameter studentID during runtime. public IEnumerable<int> GetStudentList = from student in StudentData.students select student.ID; GetStudentList is another property added to the class that stores the result of a query. This query returns a collection of Student.ID. 3. Queries of Implicit Type(Anonymos Type) public IEnumerable GetData { get { var studentMarks = from student in StudentData.students where student.ID > 110 select new { ID = student.ID, First = student.First, Last = student.Last, ScoreTotal = student.Scores.Sum() }; foreach (var s in studentMarks) yield return s.ID + ", " + s.Last + ", " + s.First + ", " + s.ScoreTotal; } } Now you have just added a public property that returns a query result as collection of Student's marks data. Note that the query involves an anonymous type that contains fields such as ID, First, Last and ScoreTotal. The query returns implicit type var and it uses Iterators to return the elements in the collection. By this time, you have your data sources and queries ready for access by the data-bound controls of a web page.

Designing the Webpage to view data To demonstrate the usage of Linq data sources and to view data on a web page, the layout of the page has been designed in three sections. Section 1: View Student Details such as Student ID, First Name, Last Name and Average Score. This view executes the Query No. 1 studentAverageMarks defined earlier in this article. Drag a LinqDataSource control(ID=LinqDataSource1) into the page from the data tab in the toolbox and configure it to access the data sources and queries you have just created in the project as below in the Configure Data Source Wizard. 1. Choose "StudentData" as a Context object. (Pic1) 2. Choose "studentAverageMarks" as Table in the Data Selection and Check all the fields appear in the Select list.(Pic2) 3. Click the "Finish" button to complete the configuration of LinqDataSource control. Drag a GridView control(ID=GridView1) into the page from the data tab in the tool box and set Data Source property to LinqDataSource1. Section 2: View Total Score for a selected student ID listed in the drop-down list. This section executes the Query No. 2 GetStudentTotal defined earlier in this article. Drag a LinqDataSource control(ID=LinqDataSource2) into the page from the data tab in the toolbox and configure it to access the data sources and queries you have just created in the project as below in the Configure Data Source Wizard. 1. Choose "StudentData" as a Context object. 2. Choose "GetStudentList" as Table in the Data Selection and Check the field appear in the Select list. (Pic3) 3. Click the "Finish" button to complete the configuration of LinqDataSource control. Drag a Drop-down list control (ID=DropDownList1) into the page and set the DataSource Property to LinqDataSource2. Remember to check the box that enables AutoPostBack behaviour to this control. Place a TextBox and Label controls in the page and add the following code to SelectedIndexChanged Event handler of the DropDownList1. protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) { StudentData sd = new StudentData(); StudentData.studentID = Convert.ToInt32(DropDownList1.SelectedItem.Text); TextBox2.Text = Convert.ToString(sd.GetStudentTotal.ToList<int>()[0]); } Section 3: View Student Details such as Student ID, First Name, Last Name and Total Score. This view executes the Query No. 3 studentMarks returned from the public property GetData defined earlier in this article. Drag a LinqDataSource control(ID=LinqDataSource3) into the page from the data tab in the toolbox and configure it to access the data sources and queries you have just created in the project as below in the Configure Data Source Wizard. 1. Choose "StudentData" as a Context object. Refer Pic1. 2. Choose "GetData" as Table in the Data Selection and Check all the fields appear in the Select list. 3. Click the "Finish" button to complete the configuration of LinqDataSource control. Drag a ListBox control (ID=ListBox1) into the page from the data tab in the tool box and set Data Source property to LinqDataSource3. That's' it. Now run the webpage and see the output as displayed below. (pic4) Download Source Download Summary The Part-I of this article has demonstrated how to define and connect to in-memory data sources and explained various ways of defining and executing queries on that data collection. You are now invited to walk-through the Part-II of this article that defines entity classes to database objects and write and execute Linq queries on database table objects. Source: http://www.codedigest.com/Articles/ASPNET/38_Accessing_data_using_Language_Integrated_Query_(LINQ)_in_ASPNET_WebPages_%E2%80%93_Part_1.aspx

File Denial

2008-03-11T09:31:00.001+07:00

Let authorized users download files from your site - and keep unauthorized users out!

By Steve C. Orr

Introduction

A common web site requirement is the ability to share certain files with specific users. For example, customers who have purchased software or other digital assets from a web site should ideally be able to return to that site and re-download the file(s) any time they want. However, that user (and other users) must be prevented from downloading packages that they have not purchased.

This article will not attempt to cover ASP.NET user authentication techniques since that topic is already thoroughly covered elsewhere. Instead this article will focus on how (and how not) to provide access to a file once it has been determined the user is indeed authorized to download it.

How Not to Share Files

Many webmasters have a public folder underneath their web root somewhere that holds downloadable files. When appropriate, the user is provided with a hyperlink to a file within that folder which allows the user to download it. While this approach is common, it is also very insecure since anyone that knows that URL can download the file. The only security in place here is "security through obscurity", since it relies completely on users not knowing information; users that have not been given the URL will not know that they can download it. However, a user could easily give the URL to other people or post it on the Internet, or a hacker could intercept it by probing network traffic, etc. Before you know it everybody has the URL and can download at will.

Because of this insecurity, valuable files should never be placed in a public folder, unless perhaps it is an Intranet application (not available over the Internet) and is secured by Windows Authentication with the appropriate ACLs set on the files.

Private Parts

Instead, files should be stored in a secure location and managed via code to allow downloads only for select individuals. There are two main accepted techniques for storing files securely in an ASP.NET web site:

Store the files in a private folder that is directly inaccessible to web users.
Store the files in a database (such as SQL Server).

Both techniques have potential performance implications, depending primarily on the number and size of files. Other factors include the frequency of file updates & uploads, the number of concurrent users, hardware capacity, bandwidth, etc. So if top performance is a top priority then you should test both techniques to see which is better for your particular application.

Private Folders

When storing downloadable files on a server's file system, instead of storing them in a public folder (such as c:\inetpub\wwwroot\myapp\downloads) they should instead be stored in a folder outside the web application's directory hierarchy (such as d:\downloads).

If it's not possible to store the files outside the application's folder hierarchy (as the case may be if you're using a shared host) then the download folder should be secured so it cannot be directly accessed via the Internet. This can be done via IIS (by turning of all permissions off to that folder as shown in Figure 1) or via Windows ACL settings (as shown in Figure 2) by removing permissions. Alternately, many shared hosts have custom user interfaces that allow the configuration of such settings.

Figure 1: IIS can be configured to deny direct Internet access to specified folders.

Figure 2: The standard Windows security dialogs can be used to adjust ACLs and prevent access to unauthorized user accounts.

The Response.WriteFile method can be used to send a file to the user dynamically from a private folder once it has been determined they are authorized to download it. Here's an example:

Response.Clear()
Response.ContentType = "application/ms-excel"
Response.WriteFile("d:\downloads\Confidential.xls")
Response.AddHeader("Content-Disposition", "inline;filename=Confidential.xls")
Response.End()

Since this code is sending out a file instead of HTML, the first line clears the page's Response object to get rid of any HTML that may already be buffered in the output stream. Then the content type is set on the second line to inform the browser that the output is (in this case) an Excel file. The Response.Writefile method is then invoked on the 3rd line to grab the file from the web server's private folder and output its contents. On the fourth line of the above code sample, a header is added to the response object to let the browser know that it may open the Excel file embedded within the browser. (Replace "inline" with "attachment" to specify that it should be opened in an external Excel application window instead.) Finally, the Response is ended to ensure nothing else is written to the Response stream.

Note: In some cases you may need to use impersonation or grant access to the ASPNET user account (aka NetworkService) in order for ASP.NET to be able to access a private file share.

Database Storage

Applications that require large numbers of downloadable files - or allow users to upload files - may benefit from storing those files in a database instead of the web server's file system. By leveraging SQL Server's data management capabilities you can avoid writing reams of custom file management code that may otherwise be necessary.

SQL Server 2000 can store binary file data in a field of type image. SQL Server 2005 has improved binary storage capabilities in the form of the new varbinary data type.

The following block shows VB.NET code that retrieves binary data from a SQL Server query and sends the resulting file to the user:

Dim dr As DataReader = GetFileCommand.ExecuteReader
If dr.Read Then
Response.Clear()
Response.ContentType = dr("ContentType").ToString
Response.OutputStream.Write(CType(dr("FileData"), Byte()), 0, _
Convert.ToInt32(dr("FileSize")))
Response.AddHeader("Content-Disposition", "attachment;filename=" + _
dr("FileName").ToString())
Response.End()
End If

Just as in the previous example, the Response object is first cleared of any buffered HTML since a file is being output instead. Next the content type that was stored along with the file is retrieved from the DataReader's current row and assigned to the Response's ContentType property.

The third line is the most important. The file data is written to the Response's output stream after the binary data is converted into a byte array. The file size that was also stored along with the file data is cast into an integer and passed as a parameter to the write method.

Finally the file's name is retrieved from the DataReader and provided to the browser via the Content-Disposition header, and the Response is ended to prevent anything else from slipping into the output.

Summary

You should now know how to provide ASP.NET file download capabilities to authorized users without compromising the security of those files. By storing files in a private folder or database, they can be easily retrieved with a just few lines of code - after you've determined the user is authorized to access the file.

References

For further reading on this subject you may wish to review these articles:

Easy Uploads

Protect Your Downloadable Files Using HTTP Handlers

Source: http://steveorr.net/articles/File-Denial.aspx

Adding Multiple Rows in the GridView Control

2008-03-10T00:57:00.001+07:00

By AzamSharp

Introduction:

Populating the GridView Control:

The first task is to populate the GridView control. We will be using the LINQ to SQL Classes to populate the GridView but you can use any data container that you like.

private void BindData()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            gvReport.DataSource = GetProducts();
            gvReport.DataBind();
        }

Here is the ASPX part of the code:

The first column displays the "ProductName". If the ProductName is not available then a TextBox is created which is used to enter a new ProductName.

The GetCategories method is used to populate the DropDownList in the second column of the GridView control. Here is the implementation of the GetCategories method.

protected List<Category> GetCategories()
        {
            NorthwindDataContext northwind = new NorthwindDataContext();
            return northwind.Categories.ToList<Category>();
        }

Adding New Rows to the GridView Control:

Now, let's see how to add new rows to the GridView control. The rows are added using the "Add" Button control. Here is the implementation of the add button click.

// adds the new row
        protected void Button1_Click(object sender, EventArgs e)
        {
            Count += 1;

The Count property in the button click code is used to store the number of empty rows to be created. Here is the implementation of the Count property.

public int Count
        {
            get
            {
                if (ViewState["Count"] == null)
                    return 0;

                return (int) ViewState["Count"];
            }
            set
            {

                ViewState["Count"] = value;
            }
        }

The list.AddRange(new Product[Count]); line is used to append the rows to the product list.

The effect is shown in the GIF Animation below:

I have also used UpdatePanel to eliminate the server postback.

I hope you liked the article, happy coding!

Source: http://www.gridviewguy.com/ArticleDetails.aspx?articleID=374_Adding_Multiple_Rows_in_the_GridView_Control

Handling the back button from server code

2008-03-10T00:56:00.001+07:00

By: Bertrand Le Roy

One common drawback of Ajax applications is the loss of the browser's back button. This article by Bertrand Le Roy shows how to restore it using ASP.NET 3.5 Extensions Preview and server code.

A brief history of History

ASP.NET has introduced a very powerful component model for the Web at a time when templating engines were limited to inserting code into markup placeholders. The new level of abstraction aims at reproducing the component and event-based model that was familiar to VB developers on the Web, along with the productivity boost it represented. At the time, Ajax was a concept that was almost limited to a few big applications such as Outlook Web Access and that didn't even have a clearly defined name. Most of the interactivity was implemented on the server-side, which means that a round-trip to the server was necessary for each and every user interaction. This, in addition to the disconnected nature of HTTP and the scalability requirements of Web applications, set state management as one of the most important problems that a Web framework had to solve. It also meant that a lot of redundant data was travelling back and forth as the server had to reconstruct the application's state on the one side, and the browser had to reconstruct the page UI on the other, every single time the user was doing anything. One advantage of this system is that every user interaction resulted in the browser creating a point in History and adding it to its back button's stack of previous states, making it possible and relatively natural for the user to step back. If anything, there was an excess of history points.

It was only a matter of time before the industry moved to a more rational model where the client-server conversation becomes a lot less chatty and redundant. This is essentially what Ajax is all about, but switching to a model where the page gets its updates out of band instead of posting back and rebuilding itself from scratch means that the browser has no clue that anything significant happened and no history points get created. Essentially, we went from too many history points to none at all!

In ASP.NET Ajax, you can go all the way and implement a lot of logic on the client-side, which involves some investment in the understanding of client-side technologies, or you can continue to implement the logic in server-side code using UpdatePanels, or even have a mix of UpdatePanels and client-side code. In all three cases, ASP.NET provides a simple and efficient way of restoring the back button. What's interesting is that it is now up to the application developer to decide which user interactions represent a change that should be reflected by a point in browser history. In summary, we're now moving from no history points to the exact right number of history points.

An important side-effect of implementing browser history in an Ajax application is that each state of the application becomes bookmarkable.

How to prepare an application for history

To make a page work well with the back button, you'll need to determine the minimum set of variables that is necessary to represent its state. For a mapping application, this may be the current longitude and latitude and for a wizard it may be the current step index and maybe the contents of the different fields in each step. But one thing to keep in mind is that this set of variables needs to remain small because of the way history management systems have to be implemented. In effect the implementation is severely constrained by the fact that browsers don't have built-in APIs to manage the history stack as we speak (the next generation of browsers will very likely change that, seeing how important this scenario has become). The only place where the framework can store state is in the so-called fragment part of the url (the part after '#', which was originally designed to enable links within a single page). This is a very different process than the ViewState model where everything is automatically maintained (and as a consequence can become very large if one is not careful).

It is actually a very useful and structured design phase to stop and think about what constitutes the state of the application.

A simple Ajax wizard

Let's start with a simple wizard inside of an UpdatePanel:

<asp:ScriptManager ID="ScriptManager1" runat="server"
EnableHistory="True" EnableStateHash="False"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Wizard ID="Wizard1" runat="server">
<WizardSteps>
<asp:WizardStep runat="server" Title="Step 1">
<asp:TextBox ID="TextBox1" runat="server"/>
</asp:WizardStep>
<asp:WizardStep runat="server" Title="Step 2">
<asp:TextBox ID="TextBox2" runat="server"/>
</asp:WizardStep>
<asp:WizardStep runat="server" Title="Step 3">
<asp:TextBox ID="TextBox3" runat="server"/>
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</ContentTemplate>
</asp:UpdatePanel>

The minimum state that we want to maintain here is the wizard's step index, and that's what we'll do here. Depending on what use we want to make of this page, we may also want to store the contents of each textbox, but these contents could potentially be quite large, so if it's not strictly necessary, I'd keep them out. An alternative for such potentially large pieces of state is to use a more traditional state store such as ViewState or Session, but of course you won't get history or bookmarkability on them.

Handling state changes and navigation

To handle history, once we've set EnableHistory to true, we only have two things left to do. The first one is to create history points every time state changes. In our case, this is done by handling the ActiveStepChanged event of the wizard and creating a history point from there:

Listing 1: C# code

protected void Wizard1_ActiveStepChanged(object sender, EventArgs e) {
if (ScriptManager1.IsInAsyncPostBack && !ScriptManager1.IsNavigating) {
ScriptManager1.AddHistoryPoint("index", Wizard1.ActiveStepIndex.ToString(),
"Wizard step " + Wizard1.ActiveStepIndex.ToString());
}
}

Listing 2: VB code

Protected Sub Wizard1_ActiveStepChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles Wizard1.ActiveStepChanged
If ScriptManager1.IsInAsyncPostBack And _
Not ScriptManager1.IsNavigating Then
ScriptManager1.AddHistoryPoint("index", _
Wizard1.ActiveStepIndex, _
"Wizard step " & Wizard1.ActiveStepIndex)
End If
End Sub

It is important to note that although we only have one piece of state in this sample (the wizard index), you can handle as many events as you want and independently create history points from there. Each part of the application can manage its own part of the state without having to know about the others. In other words, state is added by AddHistoryPoint more than it is set, and setting a new entry doesn't delete the previously added ones.

The second thing we need to do is handle the Navigate event on the ScriptManager, which gets triggered every time the user clicked the back or forward button and restore the state from there:

Listing 3: C# code

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e) {
string indexString = e.State["index"];
if (String.IsNullOrEmpty(indexString)) {
Wizard1.ActiveStepIndex = 0;
}
else {
int index = int.Parse(indexString);
Wizard1.ActiveStepIndex = index;
}
Page.Title = "Wizard step " + indexString;
}

Listing 4: VB code

Protected Sub ScriptManager1_Navigate(ByVal sender As Object, ByVal e As HistoryEventArgs) Handles ScriptManager1.Navigate
Dim indexString As String = e.State("index")
If String.IsNullOrEmpty(indexString) Then
Wizard1.ActiveStepIndex = 0
Else
Dim index As Integer = Convert.ToInt32(indexString)
Wizard1.ActiveStepIndex = index
End If
Page.Title = "Wizard step " & indexString
End Sub

You can think of these two things as analogous to SaveViewState and LoadViewState in the ViewState model.

An important thing to note here is that when restoring the state, our code has to account for empty state and restore the default state of the page in that case. This is to handle the case of the user going back from a later state of the page to the initial request to the page, where no state existed yet.

One could notice while running this application that the state on the URL looks very cryptic. Indeed, by default the server state is hashed using the same algorithm as ViewState. This can be relaxed by setting EnableStateHash to false on the ScriptManager. In that case, the state becomes readable (and modifiable) and looks very much like a regular query string:

Listing 5: EnableStateHash = true

Default.aspx#&&/wEXAQUFaW5kZXgFATFywiqnhio4diSZ0PbZMAUM2NG7xg==

Listing 6: EnableStateHash = false

Default.aspx#&&index=1

It's also important to say a word about security here. Even if the state is hashed, the data that the application puts in there is essentially user data, and there is potential for injection attacks. It is thus very important to validate that data before using it, as with any piece of user data.

Summary

By writing two simple server-side event handlers, we've enabled meaningful state and history management on a sample application. Furthermore, we've done that without writing a single line of client-side JavaScript. This is made possible by all the work that has been put into the history feature of ASP.NET Ajax, which abstracts away browser differences to a large extent (there are still some caveats on Safari 2 and Internet Explorer, and Opera versions before 9.5 are broken). This will enable productive development of user-friendly applications that behave in a natural way and don't break Web users' expectations.

References

Source: http://dotnetslackers.com/articles/ajax/HandlingTheBackButtonFromServerCode.aspx

Creating Derived Controls

2008-03-07T09:16:00.001+07:00

Introduction

In the previous lesson you developed a composite control by assembling existing server controls. There is one more technique to add to the functionality of the existing controls. You can extend existing controls and add/customize functionality as per your requirement. This way you avail the core functionality of the base control to create a tailor-made control meeting your requirement. The designer features of Visual Studio such as smart tags and dialogs that are available for the base control continue to remain available for the derived control also.

Example

As an example I am going to take up a common scenario. You might be aware that features of the GridView control such as paging and sorting work in code less fashion if you use data source controls (ODS or SDS). However, when you bind raw data in the form of say a DataSet to the GridView it forces you to write event handlers for Sorting and PageIndexChanging events. In most of the cases code within these event handlers look very similar. To reduce this repetition you can create your own grid control that inherits from GridView base class. You can then add the logic for sorting and paging inside this custom control.

To clearly understand how this can be done, create a new web site in Visual Studio. Add a class to it named MyGridView. The class definition should look as shown below:

namespace BinaryIntellect {   public class MyGridView:GridView   {   } }

Here, we created MyGridView class that inherits from GridView as its base class. This way all the functionality of GridView becomes available to our custom control class.

Then we need to create two helper methods viz. GetSortDirection() and BindGrid(). The GetSortDirection() method stores sort direction (ASC/DESC) in a ViewState variable. This is necessary because when you are not using any data source control for the purpose of data binding then GridView will not maintain the sorting direction by itself. The BindGrid() method bind the GridView with the required data. Internally it uses GetSortDirection() to sort the data on required column. These two functions are shown below:

private SortDirection GetSortDirection() { SortDirection dir; if (ViewState["_sortdirection"]==null) { ViewState["_sortdirection"] = "ASC"; dir = SortDirection.Ascending; } else { dir = (ViewState["_sortdirection"].ToString()  == "ASC" ? SortDirection.Ascending :  SortDirection.Descending); } ViewState["_sortdirection"] = (ViewState["_sortdirection"]. ToString() == "ASC" ? "DESC" : "ASC"); return dir; }  private void BindGrid(string sortExpression) { SqlDataAdapter da = new SqlDataAdapter("select * from  employees", @"data source=.\sqlexpress;initial  catalog=northwind;integrated security=true"); DataSet ds = new DataSet(); da.Fill(ds); DataView dv=ds.Tables[0].DefaultView; if (sortExpression != string.Empty) { ViewState["_sortexpression"] = sortExpression; dv.Sort = sortExpression + " " + (GetSortDirection()  == SortDirection.Ascending ? "ASC" : "DESC"); } else { if (ViewState["_sortexpression"] != null) { sortExpression = ViewState["_sortexpression"].ToString(); dv.Sort = sortExpression + " " + (GetSortDirection()  == SortDirection.Ascending ? "ASC" : "DESC"); } } this.DataSource = dv; this.DataBind(); }

The GetSortDirection() method returns the sort direction as SortDirection enumeration. The SortDirection enumeration is the same enumeration that GridView uses to represents its sorting direction. We persist the sort direction in a ViewState variable named _sortdirection. The possible values for this variable are ASC and DESC. Every time you cann GetSortDirection() method it returns existing direction to the caller and toggles the direction so that next time correct direction can be retirned. This is because if the grid is sorted in ascending order the first time then the next time we should sort it in descending order.

The BindGrid() method accepts the sort expression (Column name) on which you want to sort the data. It then proceeds to create a DataView containing the required data. In above code we are fetching all the records from Employees table of Northwind database. The DataView is then sorted using its Sort property and the return value of GetSortDirection() method. We also persist the sort expression in a ViewState variable so that sorting and paging can co-exist properly. The base GridView is then bound with the DataView.

Next, we override some events of the base class viz. Load, Sorting, Sorted, PageIndexChanging and PageIndexChanged. Their event handlers are shown below:

protected override void OnLoad(EventArgs e) { if (!this.Page.IsPostBack) { BindGrid(string.Empty); } }  protected override void OnSorting (GridViewSortEventArgs e) { BindGrid(e.SortExpression); } protected override void OnSorted(EventArgs e) { //nothing here } protected override void OnPageIndexChanging (GridViewPageEventArgs e) { this.PageIndex = e.NewPageIndex; BindGrid(string.Empty); } protected override void OnPageIndexChanged (EventArgs e) { //nothing here }

The OnLoad() method simply binds the grid during first load (IsPostBack is false). The OnSorting() method calls the BindGrid() method by passing the appropriate sort expression. The OnPageIndexChanging method sets the current page index of the grid using the NewPageIndex property and rebinds the grid. In our example we have not provided any specific code inside OnSorted() and OnPageIndexChanged() methods but you can add it if you so wish.

To use our MyGridView control on a web form, register it with the page using @Register directive.

<%@ Register Namespace="BinaryIntellect" TagPrefix="cc1"  %>

Also, create one instance of MyGridView in the form.

<cc1:MyGridView ID="GridView1" runat="server" AllowPaging="True"> </cc1:MyGridView>

Using Visual Studio designer add two BoundFields to the MyGridView control. Bind the first BoundField with FirstName column and the second with LastName column. Make sure to set their SortExpression property to FirstName and LastName respectively. Set AllowPaging and AllowSorting properties of MyGridView to true.

If you run the web form now you should something as shown below:

Try playing with sorting and paging functionality.

Download Source Code

Source: http://www.bipinjoshi.net/articles/5d98c230-1143-4ff2-a473-96a2ca00a58d.aspx

Building a Simple Blog Engine with ASP.NET MVC and LINQ - Part 1

2008-03-06T09:39:00.001+07:00

Microsoft released the first CTP of ASP.NET 3.5 Extensions and it includes ASP.NET MVC Framework as one of the main extensions for ASP.NET 3.5. In the first part of this article series about building a simple blog engine with ASP.NET MVC and LINQ, Keyvan introduces the MVC pattern, ASP.NET MVC Framework, and the fundamentals of a simple blogging engine.

by Keyvan Nayyeri

Introduction A few weeks ago Microsoft released the first CTP of ASP.NET 3.5 Extensions which includes the first public version of ASP.NET MVC Framework. There have been many good resources about this MVC Framework on the web as tutorials, blog posts and web casts. I want to write a set of articles about ASP.NET MVC Framework to build a simple blogging engine based on MVC and LINQ in .NET 3.5 and show you all the steps in detail then extend the discussion to some more-in-depth topics. I have not written this application completely and will write it in parallel with these articles. Such a sample application is provided by ASP.NET MVC toolkit, but there is not a description about it yet. But why I am doing this while there are some other tutorials with the same approach? In my opinion, the learning curve of this MVC Framework consists of a workflow progress of some steps that should be followed and the major thing is this, building this simple blogging engine and describing its process would be a very good example for ASP.NET MVC Framework. So here is the first part of this series (I want to finish them in a few weeks) and it is an introduction with some basic information.
What is MVC? Yes, what is that?! Others have described this better than me but I repeat it in my words. Model View Controller (MVC) is a methodology to build an application based on the idea of dividing the implementation into three roles: Model, View and Controller. Let us take a second look at the above sentence. From the above sentence we believe that MVC is a methodology not a technology, so it has been used before Microsoft adapts it to ASP.NET. I persisted on this because saw some guys who thought it was a technology that is designed for ASP.NET specifically. I also need to introduce the three roles in a nutshell: · Model: This is the role to maintain the state. Usually these are classes that represent data in a database. · View: The second role displays the data in the user interface to end users. This may be a set of user interface elements like TextBoxes, editors and buttons. · Controller: The last role is responsible to interact with user inputs and handling it. In fact, controller is where you implement the actual logic to handle what the user has asked for. The MVC has become a very good methodology to design applications that rely on data interactions. The most important benefit of MVC is the ability to unit test the application easily because you can unit test an MVC application via its controllers and apply a TDD workflow (Red-Green-Refactor) easily. Figure 1 shows the structure of MVC pattern where the model is independent from the controller and view so this enables the testability of the model independently from what controller and view are. On the other hand, there is a separation between model, view and controller that lets developers test their MVC applications easily. In fact, separation of view as the user interface element and controller and model is important because it simplifies the testing process. Figure 1: MVC structure I do not discuss more about the MVC and just refer you to Scott Guthrie's post about it and its description on Wikipedia that would be sufficient to get you started.
What is ASP.NET MVC Framework? The ASP.NET MVC Framework is the Microsoft's adoption of MVC for its ASP.NET technology for version 3.5 where it provides features required to build a web application based on MVC. ASP.NET MVC Framework is currently under construction and only one public release is available for download as a part of ASP.NET 3.5 Extensions CTP. Once you download and install this package, you can get the benefit of different pieces of ASP.NET 3.5 Extensions and it automatically installs some project templates for you on Visual Studio 2008. Along this download package, there is an MVC toolkit package available for download that provides some helpful tools for your MVC development. I may use them in my posts as well.
Basics of KBlog For this article series, I am going to build a simple sample blogging tool that I call KBlog. This blogging engine will be built on top of some considerations that will be described here. This blogging engine supports blog posts, comments and categories. A blog post can have only one category and as many comments as possible. This blog engine is for single users only and has some URL patterns for public and private pages. Everything will be referred by its ID and KBlog does not support post names as a part of URL just to make the application simpler. I will use SQL Express for my database and for the first steps. I fill this database manually and after finishing my discussion with public pages, I will jump into details of administration pages where the user can enter data.
Create the Project Obviously, the first step is to create a project in Visual Studio. Under Web category, you can choose "ASP.NET MVC Web Application" project item which should be available after installing ASP.NET 3.5 Extensions CTP. I name my project KBlog (Figure 2). Figure 2: Create a new ASP.NET MVC Web Application project After this, Visual Studio generates a project for you with the pre-defined template and structure.
Getting Started At first glance, Visual Studio generates an ASP.NET web application project for you with a simple structure. Figure 3: ASP.NET MVC solution structure Taking a look at this project, you believe that there are some references for the project and one important reference is to System.Web.Extensions assembly. There are also four folders available including Content, Controllers, Models and Views. · Content folder is just for a default CSS stylesheet file for default look and feel of the site. · Controllers folder is responsible to hold controller classes. · Models folder is responsible to hold model classes. · Views folder is responsible for holding view files and contains some folders that include ASPX and master files. As you see, Controllers, Models and Views are more important for us here. While they are generated to hold controllers, models and views, this is not a rule and you can replace them with your own structure. Beside these folders, there are some well-known ASP.NET files that of course have some extra definitions that I will describe later. There is a point to mention here about Default.aspx file and as mentioned in the content of this file, you should not remove the file to let IIS activate MVC for the application when the user navigates to this page. That is enough for now. Step-by-step, I am going to add my implementation to this project in the upcoming posts.
Further Reading Here is a list of some good blogs that you can use for further reading about ASP.NET MVC framework and they already contain excellent information about ASP.NET MVC. This technology is completely new in ASP.NET so there is a hope to see many more resources in the future, but fortunately MVC has become popular among developers and we saw great reactions against it in these a few weeks. · Scott Guthrie · Scott Hanselman · Phil Haack · Rob Conery · Brad Abrams
Summary In the first part of my article series about new ASP.NET MVC framework, I introduced you to the MVC pattern, fundamentals of Model View Controller and ASP.NET MVC framework as well as basic information about the simple blogging engines that I am going to write in this series. I also covered the structure of MVC solutions in ASP.NET MVC. In the future parts, I will build this blogging engine step-by-step and will show you some principles and techniques about the ASP.NET MVC framework.

News from asp.net official website

Unit Testing ASP.NET Pages Using WatiN

Supporting Complex Types in Property Window

ntroduction

Type Converters

Creating an Expandable Type Converter

Creating FullName class

Creating FullNameConverter class

Attaching type converter to FullName class

Synchronizing markup and property window

Coding the custom control

Adding Multiple Rows in the GridView Control

Building a Volta Control : A Flickr Widget

What is Volta?

Figure 1: The Flickr widget built using Volta

The Specification of the Widget

The Flickr API

The Flickr Methods

The Flickr Request, Response format

The User NSID

The Solution Structure

Figure 2: Solution Structure

The Flickr Volta Control

The FlickrHelper

The Control Logic

Construction of the Volta Page

Summary

Extending the GridView to Include Sort Arrows

How to open popup windows in IE/Firefox and return values using ASP.NET and Javascript

Creating Client and Server-Side Form Validation using the Validator Toolkit for ASP.NET MVC

Introduction

Solution

Standard Validators

Validation Sets

Localization

Custom Validators

Summary

License

Extending Base Type Functionality with Extension Methods

Building a Simple Blog Engine with ASP.NET MVC and LINQ - Part 2

Working with Callback and Control Rendering

Accessing data using Language Integrated Query (LINQ) in ASP.NET WebPages – Part 1

File Denial

Let authorized users download files from your site - and keep unauthorized users out!

By Steve C. Orr

Introduction

How Not to Share Files

Private Parts

Private Folders

Database Storage

Summary

References

Adding Multiple Rows in the GridView Control

Handling the back button from server code

A brief history of History

How to prepare an application for history

A simple Ajax wizard

Handling state changes and navigation

Listing 1: C# code

Listing 2: VB code

Listing 3: C# code

Listing 4: VB code

Listing 5: EnableStateHash = true

Listing 6: EnableStateHash = false

Summary

References

Creating Derived Controls

Introduction

Example

Building a Simple Blog Engine with ASP.NET MVC and LINQ - Part 1