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

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 and I'm spending a lot of my time on architecture subject. Since 2008, I've been as a developer for companies and organizations and I've been focusing on Microsoft ecosystem all the time. During the&nb Read More

Post Tags
Pending Blog Posts
Strategic design
Factory Pattern
time out pattern in ajax
Selectors in Jquery
Peridic pattern
How to use PagedList In asp.net MVC
Redis as a cache server
Domain driven design VS model driven architecture
How to query over Icollection<> of a type with linq
What's the DDD-lite?
comments powered by Disqus