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!


Tags: C# Asp.Net MVC


comments powered by Disqus