Saturday, December 24, 2011

Page methods in asp.net

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

Page methods in ASP.NET

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.

PageMethodOutput

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

Shout it

kick it on DotNetKicks.com
Share:
Friday, December 23, 2011

Async file upload with jquery and ASP.NET

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

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.

GenericHandlerForJqueryFileUploadwithASPNET

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..
Share:
Thursday, December 22, 2011

Redirection in URL Routing

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.

HomePageForURLRedirection- ASP.NET 4.0 URL Routing and revwriting

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

CustomerDetailsPage

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..

Shout it
kick it on DotNetKicks.com
Share:
Sunday, December 11, 2011

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

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.

MSDN

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…

Shout it
Share:

Easy URL routing in ASP.NET 4.0 web forms

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.

Add new project for URL rewriting in asp.net 4.0

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.

Project for URL rewriting in asp.net 4.0

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.

Customer details via URL rewriting in asp.net 4.0

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

Customer two details via URL rewriting in asp.net 4.0

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

Share:
Search This Blog
About Me
My Photo

Full Stack Developer,Blogger,Microsoft Mvp, Mentor, Life long learner, 12+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC,Web Forms,C#,AngularJs,Golang
Mvp profile
Subscribe to my blog

Enter your email address:

Follow us on facebook
Blog Archive
Total Pageviews