How to make SEO friendly extensionless urls dynamically in ASP.NET 4.0 webforms

Question

First of all i apologize if this question is already asked, but i am unable to find any solution for my problem. I am working on a ASP.NET 4.0 Wepforms website in which admin will upload a picture and it will be considered as a post, like a pictures blog. Visitors can comment each picture using fb comments and can like it. Currently iam using query strings for each post(picture). But now i want to make each url as a SEO freindly. So basically i have two things to deal with:

1. Make Unique URL for each Picture that admin uploads , url should be its title e.g "www.example.com/posts/mexican-bulldog" same as blogengine or nopCommerce. Currently iam using the following code in Global.asax:

       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("RouteForHome", "home", "~/Default.aspx");
           routeCollection.MapPageRoute("RouteForTroll", "post", "~/post.aspx"); 
   }    
   

   the above code is not solving my problem, in it i have to assign urls statically.

2. want to navigate between posts i.e next and previous

thanx in advance !

Answer 1

Please look a simple way I have just implemented as per your requirement. There may be more ways to do the same.

I created a class: Images

public class Images
    {      
        public string CurrentImage { get; set; }
        public string NextImage { get; set; }
        public string PreviousImage { get; set; }
        public string CurrentImagePhysicalName { get; set; }
        public Images(string currentImagePhysicalName, string Current, string Next, string Previous)
        {
            this.CurrentImagePhysicalName = currentImagePhysicalName;
            this.CurrentImage = Current;
            this.NextImage = Next;
            this.PreviousImage = Previous;
        }
    } 

Register the route and initializes the image collection at application startup:

public class Global : HttpApplication
    {
        public static List<Images> col = new List<Images>();
        private void GetImages()
        {
            // Build this collection as per your requirement. This is just a sample. 
            // Logic is to store current, next, previous image details for current displaying image/page. 
            // Hope while storing image each will have unique name before saving and will have all details in db like path, display name, etc.

            col.Add(new Images("orderedList0.png", "orderedList0", "orderedList1", ""));
            col.Add(new Images("orderedList1.png", "orderedList1", "orderedList2", "orderedList0"));
            col.Add(new Images("orderedList2.png", "orderedList2", "orderedList3", "orderedList1"));
            col.Add(new Images("orderedList3.png", "orderedList3", "orderedList4", "orderedList2"));
            col.Add(new Images("orderedList4.png", "orderedList4", "", "orderedList3"));
        }

        void Application_Start(object sender, EventArgs e)
        {
            GetImages();            
            RegisterRoutes(RouteTable.Routes);
        }

        public static void RegisterRoutes(RouteCollection routeCollection)
        {
            routeCollection.MapPageRoute("RouteForImage", "Posts/{Name}", "~/Posts.aspx");

        } 
}

Posts.aspx

protected void Page_PreRender(object sender, EventArgs e)
        {
            string currentImage = RouteData.Values["Name"].ToString();
            if (!String.IsNullOrEmpty(currentImage))
            {
                Images image = Global.col.Find(x => x.CurrentImage == currentImage);
                // Get Current Image URL where actually it is stored using from image variable and render / set image path where you want to using image.CurrentImagePhysicalName 


                // Set Next - Previous Image urls
                if (!String.IsNullOrEmpty(image.NextImage))
                {
                    hyperlink_next.Visible = true;
                    hyperlink_next.Text = image.NextImage;
                    hyperlink_next.NavigateUrl = GetRouteUrl("RouteForImage", new { Name = image.NextImage });                    
                }
                else
                    hyperlink_next.Visible = false;

                if (!String.IsNullOrEmpty(image.PreviousImage))
                {
                    hyperlink_previous.Visible = true;
                    hyperlink_previous.Text = image.PreviousImage;
                    hyperlink_previous.NavigateUrl = GetRouteUrl("RouteForImage", new { Name = image.PreviousImage });
                }
                else
                    hyperlink_previous.Visible = false;
            }
        }

This is just a sample demonstration. The main idea here was to handle RouteData.Values["Name"].ToString() to handle dynamic urls.

Hope this will be useful for you.