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!