Ehsan Ghanbari

Experience, DotNet, Solutions

How to create UrlSlug in Asp.Net MVC

UrlSlug Is a way of generating a valid Url, and using the title of an article to generate a URL. UrlSlug is very important in CEO because google likes to index the meaningful Urls at the first and then it refers to other Urls. Spouse you wanna to create the this Url:

  1.  MyWebSite.com/Blog/Post/2013/4/14/how-to-create-url-slug-in-aspnet-mvc

create the model class :

  1.     public class Blog
  2.     {
  3.         public int Id { get; set; }
  4.         public string Title { get; set; }
  5.         public string Body { get; set; }
  6.         public string PostSlug { get; set; }
  7.         public DateTime CreationTime { get; set; }
  8.      }

Now to creating the UrlSlud you have to call a function, you can create it as an extension method like this:

  1.      public static class SlugGeneratorHelper
  2.      {
  3.         public static string GenerateSlug(this string phrase, int maxLength = 100)
  4.          {
  5.             string str = phrase.ToLower();
  6.             str = Regex.Replace(str, @"[^a-z0-9\s-]", "");
  7.             str = Regex.Replace(str, @"[\s-]+", " ").Trim();
  8.             str = str.Substring(0, str.Length <= maxLength ? str.Length : maxLength).Trim();
  9.             str = Regex.Replace(str, @"\s", "-");
  10.             return str;
  11.          }
  12.      }

Now it's time to use this extension method, create the CreatePost action and use the GenerateSlug

  1.         public ActionResult CreatePost()
  2.         {
  3.                 return View("CreatePost");
  4.         }
  5.  
  6.         [HttpPost]
  7.         public ActionResult CreatePost(Blog blog)
  8.         {
  9.             if (ModelState.IsValid)
  10.             {
  11.                 _blogService.CreateBlogPost(blog);
  12.                  blog.PostSlug = blog.Title.GenerateSlug();
  13.             }
  14.             return View("CreatePost");
  15.         }

You craeted the postSlug, now about how to use and show it in URL look at the action below

  1.         public ActionResult Post(int year, int month, int day, string postSlug)
  2.         {
  3.             var post = _blogService.GetBlogPostByDate(year,month,day,postSlug);
  4.             return View("Post", post);
  5.         }

 

GetBlogPostByDate is a method that you can define in your repository to get the post by year, month , day and postSlug ; something like this:

  1.  public Blog GetBlogPostByDate (int year, int month, int day,string postSlug)
  2.         {
  3.             var query =
  4.                 _dbContextConfiguration.Blog.Where(
  5.                     p => p.CreationTime.Year == year && p.CreationTime.Month == month && p.CreationTime.Day == day&&p.PostSlug==postSlug);
  6.  
  7.             return query.Single();
  8.         }

Finally register this route in your global.asax

  1.  routes.MapRoute("BlogRoute",
  2.                             "Post/{year}/{month}/{day}/{postSlug}",
  3.                             new
  4.                                 {
  5.                                     controller = "Blog",
  6.                                     action = "Post",
  7.                                     year = UrlParameter.Optional,
  8.                                     month = UrlParameter.Optional,
  9.                                     day = UrlParameter.Optional,
  10.                                     newsSlug = ""
  11.                                 },
  12.                                   new[] { "SampleProject.Web.Mvc.UI.Controllers" });
  13.  

You have done, test it!

About Me

Ehsan Ghanbari

Hi! my name is Ehsan. I'm a developer, passionate technologist, and fan of clean code. I'm interested in enterprise and large-scale applications architecture and design patterns. I spend a lot of time on software architecture. Since 2008, I've been as a developer for different companies and organizations and I've been focusing on Microsoft ecosystem all the time. During the past years, Read More

Post Tags
Pending Blog Posts
using Elmah in asp.net MVC4
Using FluentSecurity in MVC
Strategic design
Factory Pattern
time out pattern in ajax
Redis as a cache server
How to use PagedList In asp.net MVC
Multiple submit buttons in asp.net MVC
Domain driven design VS model driven architecture
What's the DDD-lite?
comments powered by Disqus