Blog

Filter posts by Category Or Tag of the Blog section!

How to create UrlSlug in Asp.Net MVC

Saturday, 18 May 2013

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 this Url:

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

create the model class :

 

    public class Blog
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Body { get; set; }
        public string PostSlug { get; set; }
        public DateTime CreationTime { get; set; }
     }

 

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

 

     public static class SlugGeneratorHelper
     {
        public static string GenerateSlug(this string phrase, int maxLength = 100)
         {
            string str = phrase.ToLower();
            str = Regex.Replace(str, @"[^a-z0-9\s-]", "");
            str = Regex.Replace(str, @"[\s-]+", " ").Trim();
            str = str.Substring(0, str.Length <= maxLength ? str.Length : maxLength).Trim();
            str = Regex.Replace(str, @"\s", "-");
            return str;
         }
     }

 

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

 

        public ActionResult CreatePost()
        {
                return View("CreatePost");
        }

        [HttpPost]
        public ActionResult CreatePost(Blog blog)
        {
            if (ModelState.IsValid)
            {
                _blogService.CreateBlogPost(blog);
                 blog.PostSlug = blog.Title.GenerateSlug();
            }
            return View("CreatePost");
        }

 

You created the post slug, now about how to use and show it in URL look at the action below

 

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

 

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

 

 public Blog GetBlogPostByDate (int year, int month, int day,string postSlug)
        {
            var query =
                _dbContextConfiguration.Blog.Where(
                    p => p.CreationTime.Year == year && p.CreationTime.Month == month && p.CreationTime.Day == day&&p.PostSlug==postSlug);

            return query.Single();
        }

 

Finally, register this route in your global.asax

 

 routes.MapRoute("BlogRoute",
                            "Post/{year}/{month}/{day}/{postSlug}",
                            new
                                {
                                    controller = "Blog",
                                    action = "Post",
                                    year = UrlParameter.Optional,
                                    month = UrlParameter.Optional,
                                    day = UrlParameter.Optional,
                                    newsSlug = ""
                                },
                                  new[] { "SampleProject.Web.Mvc.UI.Controllers" });

 

You have done, test it!

comments powered by Disqus