ASP.NET 4.0 New features – HTML, JS, ASP.NET Snippets

In previous version of VS.NET we encountered the new snippet solution for creating a chunk of code that is usually reusable and then using it during programming or even lecturing. This feature was available for both C# and VB.NET coders. But we could not create or use snippets for the markup we are writing like HTML, JavaScript or even the ASP.NET page. VS.NET 2010 allows us to do just that!

Lets see some of the “out of the box” snippets we can use:

HTML Snippets:

AS you can see the same snippet sign is now available on the ASPX page side.  So for example if I choose the checkbox snippet and double tab click it i will get the following markup:

JavaScript Snippets:

Let move even further and see a much useful sample. Most of us are writing JavaScript and lots of it in our web application, so lets see what is available out of the box for us in JavaScript :

alert snippet,control snippet,create snippet, do for while snippets, if else snippets and much much more. Here for example I am using the for snippet for creating a for clause.

ASP.NET snippets:

We have some useful control declarations as a snippets such as updatepanel, sqldatasource , all the validator controls and much much more.

Creating our own custom snippets:

Wouldn’t it be great to create our own snippets since we are the ones knowing what markup we most commonly using. So before showing how to accomplish this, Here is how you can see the entire list of snippets.

In the VS.NET 2010 , clicj the tool menu and open the “code  snippets manager”
 

This snippet manager will now show you all the HTML, ASP.NET snippets or the JS snippets if you choose Jscript in the language select box. So in order to add them simply use this manager and read how to create the snippet files here.

Surround with feature:

Another cool thing we have in C# and is really useful is the “surround with” . We can for example write some JS code and then decide we want to surround it with a function. Simply select the wanted Js , right click and choose “surround with” .

Enjoy.

ASP.NET 4.0 New features – URL Routing

Hi all, In this series of posts I am going to write about ASP.NET 4.0 new features. I will try to concentrate on the important features since there are many new cool ones. At this point of writing I am using the VS.NET 2010 Ultimate Beta 2 version. So lets introduce the first feature:

URL Routing:                  

URL Routing is the ability to use “friendly” URL’s instead of of using the once we know so far. So instead of using the knows URL’s like:

http://www3.cet.ac.il/FieldsPage.aspx?ID=Science

http://www.google.com/search?q=vs.net+2010&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1

where we have a protocol , a host name , a directory list, a page and a query string in the format: field1=value1&field2=value2&field3=value3...

We can use a “friendlier” version like:

http://www.Developers.com/software/aspnet

These “friendly” URL’s has the following benefits:

1. They are more readable ( Actually it is debatable but lets go with the flow)  
2. They are more SEO friendly (Search engine optimization)

The idea is to map these URL’s to a physical files by configuring your application. Up until now, this feature existed in ASP.NET MVC, now we can use it in ASP.NET 4.0. So how do we do it and where do we do it:

All we need to do is adding the routing data some where in the application , A good place to do it is in the Application_Start event so it will happen only once. Here is a sample code that demonstrate how to achieve the routing:

Adding routing to the global.asax:

protected void Application_Start(object sender, EventArgs e)
{
  //Routes: An object of type RouteCollection that contains all the routes
  ConfigureSiteURLRouting(System.Web.Routing.RouteTable.Routes);
}

private void ConfigureSiteURLRouting(System.Web.Routing.RouteCollection routeCollection)
{
  routeCollection.MapPageRoute("RouteCategory",       // A friendly name to descrive the route
                               "Books/{bookName}",    // The url format
                               "~/Book.aspx");        // The actual web page to handle the request

}

Getting the url values in the destination page:

Now once I am navigating to http://localhost:1559/Books/ASPNET in my development environment I am actually running the page “book.aspx” which has the following code for getting the book parameter:

string bookName = Page.RouteData.Values["bookName"] as string;

Programmatically Generating outgoing URL’s :

Just like we can map incoming URL’s to our real pages, we can generate them for the outgoing request as well. So in order to generate a URL in the following format  we can use the Page.GetRouteUrl method to perform just that.

Enjoy

Ajax ToolKit:Fix ResizableControl handler position problem

One of the controls available in the Ajax ToolKit is the ResizableControlExtender which makes a panel (div) resizable. One of the major bugs this control has his the ability to set the location for the handler (The place holder for the mouse with the resize cursor) to the left bottom corner of the ResizableControl target. There are many solutions out there , but as I tried them most of them simply do not solve the problem. After downloading the ResizableControlBehavior.js file and learning how it works , here is a simple solution to the problem:

1. Set the HandleOffsetY and HandleOffsetX properties of the ResizableControlExtender control to 3.

2. During this point the handler will be set in the top right corner as the following code from the ResizableControlBehavior.js  indicates: 

Ajax Tip: Set position for ModalPopupExtender

Hi all, Ever wanted to set the location of the Modal windows you open using the ModalPopupExtender available when using ASP.NET Ajax toolkit?

Well there is a very simple way to do it using BLOCKED SCRIPT

1. Get the position you want the modal window to show. You can do it using ASP.NET Ajax library using Sys.UI.DomElement.getLocation method like this:

var location = Sys.UI.DomElement.getLocation($get("div1")); 

In this case I used some div control to set the modal windows next to it.

2. Get the Modal window reference by using it’s panel or div element.

Microsoft ASP.NET Ajax DOM Events

Hi all, Lately I add to deal with a lot of cross browser stuff (Needless to say is is very ugly and in frustration times I wish we only had IE :-) )

Anyway , one cool way to solve lots of these issues is of course to use a Framework that does all the Cross browser JS for you.I am using Microsoft ASP.NET Ajax Library. Here is a nice example of how to handle mouse clicks in a way that will work on IE, Chrome and Firefox.

When trying to work with the mouse event (And writing cross browser code) you get familiar with the phrase :”JavaScript Madness”. For example: When wanting to know which mouse button was clicked and we want to use the “event” object JavaScript offers we see there is little cross browser compatibility regarding the number representing which button was clicked. In IE we have “event.button” with the values of 1, 4, 2 but we don’t have “event.which” which works for Safari Netscape and some other browsers. The “event.which” value was originally used in Netscape, and the “event.button” value was originally used in Internet Explorer. Later browsers used both, and messed them both up.

So here is a Sample code to illustrate how simple it is when using the framework and the DOM options it provides:

<script>