Adding MVC Meta Tags to razor pages

In every View we can assign different meta tags (title, description, keywords, etc) however it is not very clear to every one how this is achieved. In reality this is quite easy.

So here it goes:

In your “_Layout.cshtml” paste the following in your head section:

@if(ViewBag.Description!=null)
{
<meta name=”description” content=”@ViewBag.Description” />
}
@if(ViewBag.Keywords!=null)
{
<meta name=”keywords” content=”@ViewBag.Keywords” />
}

 

Now, in your other pages which will inherit from the layout, at the very top where you usually have Viewbag.Title defined, add the following Viewbags:

@{

ViewBag.Title = “Home Page”;
ViewBag.Description = “Welcome to Rochcass Blog”;
ViewBag.Keywords = “C# posts, errors and solutions, problem solving, css3, html5, ASP.NET, Linq, MVC, Nhibernate”;
}

 

You can do the same for other meta tags such as author, etc.

 

 

 

 

Simple jQuery Pagination – Pager

pager

I was looking for a simple javascript/jquery pagination plugin but all seemed so complex with functionalities I did not need that I decided to create a really simple one. All that this pagination does is: give items to be paginated the same class name and give it a maximum number of items to be displayed per pagination page while also a maximum number of pagination icons. Here I placed a pagination at the top and at the bottom of my items so no IDs where used but instead class names have been used everywhere.

View Live Demo Here

Step 1:-

In your head section add the following references (jquery and pagination js/css) or download directly on your local:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://twiggle-web-design.com/tutorials/pagination/style.css" rel="stylesheet" type="text/css" />
<script src="http://twiggle-web-design.com/tutorials/pagination/pagination.min.js" type="text/javascript"></script>

Step 2:-

Add the following divider wherever you would like the pagination to appear, its important to use the class name “pagination”:


<div class="pagination"></div>

Step 3:-

Either in your head section of at the bottom of your body section, add the following javascript code:


<script>
$(document).ready( function () {

//initPagination(element, maxItems, maxPages);
//element: the class name given to the elements which will need to be paginated
//maxItems: the maximum number of items to display per page
//element: the maximum number of navigation numbers in the pagination nav bar
initPagination("item", 10, 5);

});
</script>

Goodluck 🙂

PS: drop me a comment if you have any questions