Create an Header logo with MVC(4)

Gents as soon I am checking some good time with asp.net MVC4, I am trying to explain some of the issue I face and fixed, in this post I am going to describe how we can change header logo of default asp.net MVC 4 applications.

Start here Create a new project in Visual Studio 2012 or 2013, you can download visual studio 2012 express and visual studio 2013 express free from Microsoft.

Create a new project select web and select asp.net MVC4 applications

Now in the new project dialog Select internet applications and you can use Razor as default view engine.

Once you done all this here is the format of your applications, OrderTrackerMVC is name of my applications.

When I will run this application it will load the default pages and setting done by Microsoft in asp.net MVC4 applications take a look below diagram, now you can see there is text “your logo here”, we want to change the application logo.

For changing a logo you can generate logo from any free logo generator website or you can also Use http://www.flamingtext.in that is what I used to generate a logo, once you have your logo please save it in image folder from the solutions explorer.  For changing logo you need to make changes in the _Layout.cshtml file, this file represent layout of each page in the applications you can access this file in shared folder inside view folder.

If you notice action link its using



</code>
@Html.ActionLink("your logo here", "Index", "Home" )<code>

I am going to update action link with LinkExtensions.ActionLink Method (HtmlHelper, String, String, String, Object, Object)
if you want to read more about it you can follow MSDN article.
Let’s Update action link as mention above

</code>

</pre>
<pre>@Html.ActionLink("HeaderLogo", "Index", "Home", null, new { @class = "Header-logo"})<code>

Before running your application please paste below CSS  in Site.CSS file exist in content folder.



</code>
a.Header-logo  {
background: url("../Images/logo.png") no-repeat top left !important;
display: block;
width: 700px;
height: 100px;
text-indent: -9999px;  /*hides the link text*/
}
<code>



One the changes is done you can run your applications and here is the image after making changes for header logo.

Conclusion: As we notice LinkExtensions.ActionLink having different type of method you can review all those method at MSDN

Developers are a crazy bunch. We have a bad day because of programming so we go home and do some programming to unwind. Keep Learning and sharing knowledge : @ssdulawat