DotNetJalps

Number- New HTML5 Input type

2012-02-04T18:26:52Z

I have been writing few series of new HTML5 input types and this is another post on same series. In this post I am going to explain Number input types. The number type is for numeric values. When you use number input type it will have spinner with up and down arrow and with the help of this you can increase or decrease of value.

Attributes of Number Input type:

There are four attributes of Number input types.

Value : This attribute is used to specify the default value of the input type once its first loaded. So what ever you put there in input value it will be there.
Min: As name suggest it defines minimum value for a range that you can you can choose in number input types.
Max: It defines maximum number value for the range a number input type can have.
Step: This attribute defines the number which will decrease or increase number value. If you don’t specify the value for it the default value for this will be 1.

So now we know all attributes for number input types it is time for writing some code now. I am going to use same code for that I was using for that. Following is a code for that.

@{
   ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
   To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<form action="" method="post">  
   <label for="numberInput">Select Number:</label>
   <input id="numberInput" name="numberInput" type="number" min="1" max="10"/>
</form>

Here in the above code you can see I have specified min value is 1 and max value is 10. So it can have any values between 1 to 10. So let’s run that code in browser.

As you can see it is displaying output as expected. Please note that number input type are supported in following browsers.

Safari 5 or higher
Chrome 8 or higher
Opera 11

For other browsers that are not supporting number input type it will work as normal input type. That’s it. Hope you like it. Stay tuned for more.. Till than happy programming..

URL–New HTML5 input element

2012-02-04T07:51:06Z

In earlier post we have seen how the email input tag work in the browser. HTML5 comes with lots of new goodies and today we are going to see one of another new html5 input types URL.

In most of the sites once you fill your contact and personal information it will ask for your URL. Till now there is no specific type for URL and we have to manually validate the URL with the Java Script but now with the HTML5 you don’t have do that. It will automatically validate the URL. For the browsers that are not supporting this will work as normal input text box.

So let’s take a simple example of URL input type. I am going to use same ASP.NET MVC project that I have used for the earlier post. So Here is the code for that.

@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<form action="" method="post">  
    
    <label for="urlInput">URL:</label>
    <input id="urlInput" name="urlInput" type="url"/>
  
    <button type="submit"> Check Input URL</button>  
 </form>

Now let's run that in browser. So once you enter some wrong Url and then click on submit button it will give error message like following.

That’s it. You can see its very easy and I don’t have to write code for the URL validation. It will do that validation automatically. Hope you liked it. Stay tuned for more..till than Happy programming.

Email-New Html5 input element

2012-01-29T07:46:49Z

In most of the websites we have contact forms and other forms where we have some standard inputs like Phone,Email and Website URL and those are widely used in any site and has specific features. Email is one of the most standard used input elements which are used in our forms. Till HTML 4.1 we have standard input type text and that’s for we were doing input validation with java script and other technologies. While we all know HTML5 is there and it’s contains lots of goodies, One of them is email input types.

Email input type comes with HTML5 as standard input type. It has all validation by default which are required for email input like we must have @ and . while we entered email input type.

Let’s check email input type in details. Let’s create a ASP.NET MVC3 project with HTML5 Markup like following. To do that I have created a new Project called via File->New Project-> ASP.NET MVC 3 web application like following.

Once you click ok following dialog box will come. Where you can select HTML5 markup as default.

Here I have selected HTML “Use hTML5 semantic markup”. So It will create a new project with HTML5 semantic markup. Now our Basic ASP.NET MVC application is ready so let’s write some code to check how Email input works. So I have written following code to check how its works in Index view of ASP.NET MVC application.

Following is a code for that.

@{
   ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
   To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<form action="" method="post">  
       <label for="emailInput">Email:</label>  
       <input id="emailInput" name="emailInput" type="email" />  
 
       <button type="submit"> Check Input email</button>  
</form>

Now let’s run that in browser. It will look like following.

Now I am trying to input wrong email address and when I press submit button. It will show validation like following.

So it’s showing validation that please input valid email address. Here I have not written any code for validation. So It’s a by default browser functionality. For the browsers which don’t understand email input type it will work as same old input type. That’s it. It's very easy and with the help of HTML5 we can do lots of other stuff. I am going to explain them in future posts. Hope you like it. Stay tuned for more..Happy programming.

My first video for code refactoring in visual studio 2010

2012-01-28T21:04:43Z

I have been planning this since long but now Its happened. I have created a video for visual studio 2010 code refactoring features. I have made this video public. Following is a link for that.

http://www.youtube.com/watch?v=HvC63rE7tB4&feature=share

Here is the video..

Please see the video and let me know your feedback. I am not a trained professional in this but I have tried to create it. Hope fully I will master this technique in some time. Stay tuned for more. Till then Happy programming.

string.format escape sequence in c#

2012-01-08T11:28:38Z

Recently I was working on something and I need to put a curly bracket on the string with a string.format function but I was not aware how to to do it. So I did some search on internet and found how to give escape sequence in string.format. Suppose You need to put curly bracket then you have write two ‘{{‘ instead of { to put ‘{‘ and same way ‘}}’ to put ‘}’

Let’s take simple example. Following is a code where I am printing simple string with string.format and Response.Write.

using System;
using System.Web.UI;

namespace CallBack
{
    public partial class Index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write( string.Format(@"{{ escape sequence for string format from {0}}}", "DotNetJalps"));
        }

    }
}

Now let’s run that example in browser and let’s see how it goes.

That’s it. It’s very easy to use.Hope you liked it. Stay tuned for more..Happy Programming.

Difference between generic handler and http handler- ASP.NET

2012-01-07T11:37:56Z

Generic handler:

As per MSDN Generic Handler is a default handler which will have @webhandler directive and has .ashx extension this generic handler is not having UI but it provides response when ever any request made to this handler.

HTTP Handler:

HTTP Handler is a process which runs and continue to server request and give response based on the request handling code. This handler does not have UI and need to configured in the web.config against extensions. One of the great example of Http Handler is page handler of ASP.NET which serves .aspx pages request.

Difference between generic handler and http handler:

Following is a main differences between http handler and generic handler.

Generic handler has a handler which can be accessed by url with .ashx extension while http handler is required to be configured in web.config against extension in web.config.It does not have any extension
Typical example of generic handler are creating thumbnails of images and for http handler page handler which serves .aspx extension request and give response.

Hope you liked it.Stay tuned for more..Till then happy programming.

how to vertically middle align text in div-HTML tip

2012-01-07T10:47:24Z

Recently in one of the project I have to vertical align text in div. so doing some internet search I have found there are no proper way to do it. So I thought it would be good do share this within my readers.

Here is the code do vertically align text in div.

<div style="width: 25%;border:solid 1px red;display: table;vertical-align: middle;float:left;height:100px;">
   <div style="display: table-cell;vertical-align: middle;">this is a very long text this is a very long text this is a very long text this is a very long text this is a very long text this is a very long text </div> 
</div>

Here in above code you can see that I have created two divs first one will serve container for other div and other div has the text which I want to align vertically in div. So in container div you can see I have given its style to display table and in child div which has the text I have given its display style to table-cell and also I have set vertical-align set to middle.

That’s it now when you run this in browser you can see text is vertically aligned.

Hope you liked it..Stay tuned for more..Till then happy programming.

ASP.NET Page Methods with Parameters

2012-01-07T10:01:36Z

In earlier post I have written how we can use page methods to call server-side from the java script. In this post I am going to explain How we can pass parameters to page methods with java script.

So let’s take a simple example to see how we can pass parameters to the page methods. I am going to create a page method Hello World which takes name as parameter and return a string to greet user from that page method below is code for that.

using System;
using System.Web.Services;

namespace PageMethods
{
    public partial class Test : System.Web.UI.Page
    {
       [WebMethod]
       public static string HelloWorld(string name)
       {
           return string.Format("Hi {0}",name);
       }
    }
}

As you can see in following page method it’s returning string with greetings. So now our server-side code is completed. Now it’s time to write HTML and java script code for this. Following is code for java script.

<script type="text/javascript">
    function GreetingsFromServer() {
        var name = 'Jalpesh';
        PageMethods.HelloWorld(name,OnSuccess, OnError);
        return false;
    }
    function OnSuccess(response) {
        alert(response);
    }
    function OnError(error) {
        alert(error);
    }
</script>

As you can see in above code I have created a function called ‘GreetingsFromServer’ which called page method helloworld with passing name parameter. Other two functions are handlers for the page methods Onsucess will be called if page method is called successfully without error other wise it will call onError method and alert error message.

Now we are done with java script so its time to write HTML code. So let’s write a HTML code for this page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="PageMethods.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page Method with parameter demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
        </asp:ScriptManager>

        <asp:button ID="btnHelloWorld" runat="server" Text="Greet User" OnClientClick="return GreetingsFromServer();"/>
    </div>
    </form>
</body>
</html>

As you can see from above code I have enabled page methods true with script manager and then I have called JavaScript function “GreetingsFromServer” on button client click. So it’s now time to run this code in browser. Following is output as expected.

That’s it. It’s very easy hope you liked it..Stay tuned for more…Happy programming

Page methods in asp.net

2011-12-23T20:29:21Z

Now days people are looking for richer and fluid user experience and to create that kind of application Ajax is required. There are several options available to call server-side function from JavaScript with ASP.NET Ajax and if you are using asp.net 2.0 or higher version of Microsoft.NET Framework then page methods are one of best options available to you.

Page methods are available there from asp.net 2.0. If works just like a normal web service. You can direct call that page methods directly from the JavaScript.

Let’s take a real world example. I will call java script on button client click event and then from that we call server-side function from the page methods. So let’s create a project called Pagemethods via File->New Project like following

After that I have created a page called test.aspx and now I am creating page method called GetCurrentDate like following.

using System;
using System.Web.Services;

namespace PageMethods
{
    public partial class Test : System.Web.UI.Page
    {
       [WebMethod]
       public static string GetCurrentDate()
       {
           return DateTime.Now.ToShortDateString();
       }
    }
}

As you can see in above there is a web method called GetCurrentDate which is just returning short date in string format. Here you will notice that I have putted WebMehod attribute for that method this is a perquisite for page methods to make available in client side.

Now let’s write code for HTML and JavaScript and following is a HTML code for that.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="PageMethods.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Page Method demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
        </asp:ScriptManager>

        <asp:button ID="btnGetDate" runat="server" Text="Get date from server" OnClientClick="return GetDateFromServer();"/>
    </div>
    </form>
</body>
</html>

As you can see in above code I have taken an ASP.NET button which call client side function GetDateFromServer which call page methods and get server date. Following is a javascript code for that.

<script type="text/javascript">
    function GetDateFromServer() {
        PageMethods.GetCurrentDate(OnSuccess, OnError);
        return false;
    }
    function OnSuccess(response) {
        alert(response);
    }
    function OnError(error) {
        alert(error);
    }
</script>

As you can see in GetdateFromServer methods I have called our page method Get Current date and you can see PageMethods object in JavaScript has all the methods which are available from server-side. I have passed two event handler for success and error. If any error occurred then it will alert that error and on successful response from server it will alert a current date.

So it’s now time to run that in browser.So once you pass F5 then once you click ‘Get date from server’ the output is like following as expected.

That’s it as you see it’s very easy.Hope you like it. Stay tuned for more.Till then happy programming..

Async file upload with jquery and ASP.NET

2011-12-22T20:02:00Z

Recently before some I was in search of good asynchronous file upload control which can upload file without post back and I have don’t have to write much custom logic about this. So after searching it on internet I have found lots of options but some of the options were not working with ASP.NET and some of work options are not possible regarding context to my application just like AsyncFileUpload from Ajax toolkit.As in my application we were having old version of Ajax toolkit and if we change it than other controls stopped working. So after doing further search on internet I have found a great Juqery plugin which can easily be integrated with my application and I don’t have to write much coding to do same.

So I have download that plug from the following link. This plug in created by yvind Saltvik,

http://www.phpletter.com/Our-Projects/AjaxFileUpload/

After downloading the plugin and going through it documentation I have found that I need to write a page or generic handler which can directly upload the file on the server. So I have decided to write a generic handler for that as generic handler is best suited with this kind of situation and we don’t have to bother about response generated by it.

So let’s create example and In this example I will show how we can create async file upload without writing so much code with the help of this plugin. So I have create project called JuqeryFileUpload and our need for this example to create a generic handler. So let’s create a generic handler. You can create a new generic handler via right project-> Add –>New item->Generic handler just like following.

I have created generic handler called AjaxFileuploader and following is simple code for that.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;

namespace JuqeryFileUPload
{
    /// <summary>
    /// Summary description for AjaxFileUploader
    /// </summary>
    public class AjaxFileUploader : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.Files.Count > 0)
            {
                string path = context.Server.MapPath("~/Temp");
                if (!Directory.Exists(path))
                    Directory.CreateDirectory(path);

                var file = context.Request.Files[0];

                string fileName;

                if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE")
                {
                    string[] files = file.FileName.Split(new char[] { '\\' });
                    fileName = files[files.Length - 1];
                }
                else
                {
                    fileName = file.FileName;
                }
                string strFileName=fileName ;
                fileName = Path.Combine(path, fileName);
                file.SaveAs(fileName);

                
                string msg = "{";
                msg += string.Format("error:'{0}',\n", string.Empty);
                msg += string.Format("msg:'{0}'\n", strFileName);
                msg += "}";
                context.Response.Write(msg);  

                
            }
        }

        public bool IsReusable
        {
            get
            {
                return true;
            }
        }
    }
}

As you can see in above code.I have written a simple code to upload a file from received from file upload plugin into the temp directory on the server and if this directory is not there on the server then it will also get created by the this generic handler.At the end of the of execution I am returning the simple response which is required by plugin itself. Here in message part I am passing the name of file uploaded and in error message you can pass error if anything occurred for the time being I have not used right now.

As like all jQuery plugin this plugin also does need jQuery file and there is another .js file given for plugin called ajaxfileupload.js. So I have created a test.aspx to test jQuery file and written following html for that .

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="JuqeryFileUPload.Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="ajaxfileupload.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
          <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">
          <button id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
          <img id="loading" src="loading.gif" style="display:none;">
    </div>
    </form>
</body>
</html>

As you can see in above code there its very simple. I have included the jQuery and ajafileupload.js given by the file upload give and there are three elements that I have used one if plain file input control you can also use the asp.net file upload control and but here I don’t need it so I have user file upload control. There is button there called which is calling a JavaScript function called “ajaxFileUpload” and here we will write a code upload that. There is an image called loading which just an animated gif which will display during the async call of generic handler. Following is code ajaxFileUpload function.

<script type="text/javascript">
    function ajaxFileUpload() {
        $("#loading")
    .ajaxStart(function () {
        $(this).show();
    })
    .ajaxComplete(function () {
        $(this).hide();
    });

    $.ajaxFileUpload
    (
        {
            url: 'AjaxFileUploader.ashx',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            data: { name: 'logan', id: 'id' },
            success: function (data, status) {
                if (typeof (data.error) != 'undefined') {
                    if (data.error != '') {
                        alert(data.error);
                    } else {
                        alert(data.msg);
                    }
                }
            },
            error: function (data, status, e) {
                alert(e);
            }
        }
    )

        return false;

    }
</script>

As you can see in above code I have putted our generic handler url which will upload the file on server as url parameter. There is also parameter called secureURI is required to be true if you are uploading file through the secure channel and as a third parameter we have to pass a file upload control id which I have already passed and in fourth parameter we have to passed busy indicator which I have also passed. Once we passed all the parameter then it will call a method for plugin and will return response in terms of message and error. So There is two handler function written for that.

That’s it. Our async file upload is ready. As you can easily integrate it and also it working fine in all the browser. Hope you like it. Stay tuned for more. Till then happy programming..

Redirection in URL Routing

2011-12-21T19:34:20Z

In one of the my earlier post I have written How easily we do URL rewriting in ASP.NET Web forms. In this post I am going to explain redirection in URL Routing.

In web application it’s a common scenario that we are redirecting our page to the one from the another and those who are familiar with the ASP.NET Web Forms will also know how we can use Response.Redirect() to redirect from one page to another page. In ASP.NET 4.0 Web Forms they have given same kind of Method to redirect to a particular route. The method is Response.RedirectToRoute(). With the help of this method you can redirect to any particular route. Response.RedirectToRoute() has different overload method you can find more information about it from following link.

http://msdn.microsoft.com/en-us/library/dd992853.aspx

Real Example of Response.RedirectToRoute

Iam going to use same example which I have used in my earlier post. We are going to add a new page called Index.aspx. After adding the page. I am going to add following code to global.asax to map index.aspx to launch by default.

using System;
using System.Web.Routing;

namespace UrlRewriting
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {
            RegisterRoutes(RouteTable.Routes);
        }
        
        public static void RegisterRoutes(RouteCollection routeCollection)
        {
            routeCollection.MapPageRoute("RouteForCustomer", "Customer/{Id}", "~/Customer.aspx");
            routeCollection.MapPageRoute("DefaultRoute", string.Empty, "~/Index.aspx");
        }

    }
}

As you can see in above I have added a default route to map index.aspx. Following is HTML code for index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="UrlRewriting.Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>This is my home page</h1>
        <asp:button ID="btnGoToCustomer" runat="server"  Text="Goto first Customer" 
            onclick="btnGoToCustomer_Click"/>
    </div>
    </form>
</body>
</html>

As you can see in above code I have created a ASP.NET Button called for redirection and on click of that button I have written following code for that.

protected void btnGoToCustomer_Click(object sender, EventArgs e)
{
    Response.RedirectToRoute("RouteForCustomer",new {Id=1});
}

As you can see in above code I have redirect it to ‘Customer' route and I am passing Id as “1” so it will load details of customer whose id is 1.

Let’s run this example via pressing F5. So it will directly load index.aspx page as homepage like following.

Now once you click on button It will redirect to custom page and will display customer information.

So that’s it. You can see it’s very easy redirect pages with URL routing. Hope you like it. Stay tuned for more.Till then Happy programming..

My blog post are appearing on MSDN ASP.NET MVC Content Map

2011-12-11T05:44:53Z

Yesterday I was searching something and I got a nice surprise. I have seen my blog post for RSS reader is appearing on MSDN ASP.NET MVC content map. It is really proud movement for me. Following is the link from where you will get this.

http://msdn.microsoft.com/en-us/library/gg416514%28v=VS.98%29.aspx

On this page Microsoft has created a list of best resources for ASP.NET MVC and one of my post are selected for this. Go to additional resources and there you can see my blog post about RSS reader.

I would like to take this opportunity to thank my readers. It’s all because of them. I promise that I will keep same kind of work again. I would also like to thank MSDN people for adding my blog post to their list. Thank you very very much MSDN Content creators.

Hope you like it. Stay tuned for more…Till then Happy programing…

Easy URL routing in ASP.NET 4.0 web forms

2011-12-10T19:59:17Z

In this post I am going to explain URL routing in greater details. This post will contain basic of URL routing and will explain how we can do URL routing in fewer lines of code.

Why we need URL routing?

Let’s consider a simpler scenario we want to display a customer details on a ASP.NET Page so how our page will know that for which customer we need to display details? The simplest way of doing is to use query string we will pass a customer id which uniquely identifies customer in query string. So our url will look like this.

Customer.aspx?Id=1

This will work but the problem with above URL is that its not user friendly and search engine friendly. who is going to remember that what query string parameter I am going to pass and why we need that parameter. Also when search engine will crawl this site it will going to read this URL blindly as this url is not informative because it query string is not readable for search engine crawlers. So your search engine will be ranked lower as this URL is not readable to search engine crawlers.

Now when do a URL routing our URL will be cleaner shorter and simpler like this.

Customers/Id/1/

Here anybody in world can understand it talking about customer and this page will used to show customer details.Even search engine crawler will also know that you are talking about customers. That is why we need URL routing.

URL routing and ASP.NET

In earlier versions of ASP.NET we have to write lots of code for URL routing but Now with ASP.NET 4.0 you can easily route in fewer lines of code.

So let’s start a Demo where I will demonstrate you how we can easily route URLs. So let’s first create a ASP. NET web form application via File->New->Project and a dialog box will open just like below and then created a empty project called URL rewriting.

After creating a project I have added global.asax – where we are going to write url mapping logic and then I have added an asp.net page called which will display customer information just like below.

So everything is now ready let’s start writing code. First thing we need to do is to define routes. Route will map a URL to physical page.First I will create static function called Register route which map route to particular file and then I am going to call this from application_start event of global.asax. Following is code for that.

using System;
using System.Web.Routing;

namespace UrlRewriting
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {
            RegisterRoutes(RouteTable.Routes);
        }
        
        public static void RegisterRoutes(RouteCollection routeCollection)
        {
            routeCollection.MapPageRoute("RouteForCustomer", "Customer/{Id}", "~/Customer.aspx");
        }

    }
}

Now as mapping code has been done let’s right code for customer.aspx page. I have have following code in page_load event of customer.aspx

using System;

namespace UrlRewriting
{
    public partial class Customer : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string id = Page.RouteData.Values["Id"].ToString();

            Response.Write("<h1>Customer Details page</h1>");
            Response.Write(string.Format("Displaying information for customer : {0}",id));

        }
    }
}

Here in above code you can see that I am getting value from page route data and then just printing it. In real world it will fetch customer data from database and show customer details on page.

Now let’s run that application. It will print a details of customer as I have passed Id in URL suppose you pass 1 as id in URL then it will look like following.

Now if you put 2 in url it will print information about customer 2.

That’s it. So we have enabled URL routing in asp.net in fewer lines of code. In next post I am going to explain redirection with URL routing.

Hope you like this post. Stay tuned for more.. Till then Happy programming

new solution explorer feature in visual studio11 developer preview

2011-10-09T18:16:32Z

Microsoft Visual Studio11 Developer preview comes with bunch of new features and Solution explorer is also get some new features in it. There are few new icons added at top of solution explorer like below.

Create new window with copy of this Window Feature:

Now there is a one feature given with solution explorer you can create a another instance of solution explorer via clicking on last icon on solution explorer. Once you click the Last Icon for create copy. It will open a new solution explorer windows as below.

Properties in Solution Explorer:

Now only you can not only the see the properties of class but you can also see the methods property. Once you double-click class then it will show all methods available when you double-click method it will load the code in editor like in below.

Now once you click Page_load method you will see the page_load highlighted in code editor

Previous next view in solution explorer:

You can move previous and next with solution explorer. For example you have search with about like following .

It will search and load About us view like following.

As you can see in above image this is About us view and you can also see that first previous button is enabled. Now once you click that it will return to default view.

Search in Solution Explorer:

Now in Solution explorer search is also provided you can search specific item in solution explorer.

As you can see in above image it is a incremental search so when you start typing it will start searching.

That’s it. Hope you like it. Stay tuned for more.. Till then happy programming..

Namaste!!

ASP.NET MVC 4.0 Mobile Template

2011-10-09T08:22:23Z

Microsoft has released the much awaited ASP.NET MVC 4.0 developer preview and there are lots of features bundle with it. One of the greatest features is a mobile website. Yes, Now with ASP.NET MVC 4.0 you can create mobile site also. So let’s create a simple application and let’s see how it works.

To create mobile site first you need to click File->New Project->ASP.NET MVC 4.0 Web application. Like following.

Now once you click OK it will open a new another dialog like following where we have to choose the Mobile site.

As you can see in above post I have selected Razor view Once you click it will create a new application like following. As you can see similar structure as normal MVC Application application below.

This view are based on the standard jQuery Mobile. So this can be viewed in any tablet or mobile device. So if you have IPad and IPhone both then it will work on both. You need not to different application for both. see the browser first I have selected standard IPad size of browser.

Now lets see how it look in mobile. So I have made my browser same site as mobile. As you can see its working in both.

If you see the code of view you can see the razor syntax over there. Nothing change in razor syntax. But as you can see in below code you need to use Jquery mobile attributes like data-Role and other stuff which will convert standard HTML into mobile or device compatible website.

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

That's it. It’s very easy you can create mobile compatible site in few hours. Hope you like it. Stay tuned for more.. Till then happy programming.

Namaste!!