Hi,
In the first article we saw how we can implement the custom login functionality in our MVC Preview 4 sample application. Now we will try to change the look and feel of this application. Once we change the look and feel we will also modify the registration page and default page for the application. For this demonstration I am going to use my LINQ articles series’ database as it is. Those who haven’t read this you can refer to these articles by following links.
LINQ TO SQL –I
LINQ TO SQL –II
LINQ TO SQL-III
LINQ TO SQL -IV
MVC Preview 4 – Custom Login
I hope you guys have gone through the first article of this series. I have also attached the database script and source code for this article .Now our first target is to change the look and feel of our application. For this we will start modify our shared Master view in the application. For us it will Site.Master page.
Ok now we know which page we have to modify. Next is to add some images and a new css file to our application. For that we will add a new folder called Images under Content folder. This can be done by right clicking on the Content folder and adding new folder.
Now we have added our folder we will add some images inside this folder. I googled some images which can be useful to the design I have in mind and do some cutting pasting work for the images. Those images are attached with the source code of this article. Feel free to add them and modify them. Right click on your images folder and then select the option add existing items. Navigate to your images folder and add the images you want to use for your application.
Once you have added images the final task is to add the CSS file and add some styles to this file to control look and feel of our application. Again we will add this CSS file inside our application‘s Content folder. Right click on the folder and select the option add new item.
As you can see I have added a file named favourite_style.css inside my application. Next is to write some classes inside our newly created CSS file. After modifying this file it should look something like below. I am just attaching few classes from the file related to the master page. You can find rest of the classes with attached source code.
/* Master Page */
.headerwrapper
{ float:left; width:100%;}
.logo
{ background-image:url("~/../Images/logo.gif"); height:60px; width:273px; background-repeat:no-repeat;}
.hdrrepeat
{ background-image:url("~/../Images/header_repeat.gif"); height:60px; background-repeat:repeat-x;}
.logindisplay
{height:20px; width:100%; font-size:x-small; font-weight:normal; font-family:Verdana; text-align:center; vertical-align:middle;}
/* Master Page */
So now we have also created style file as well let’s start modifying our actual pages to incorporate above images and CSS file. Open up your Site.Master page and modified its code to look something like below.
1: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="LinksMVC.Views.Shared.Site" %>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head runat="server">
5: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6: <title>
7: <%= Html.Encode(ViewData["Title"]) %></title>
8: <link href="../../Content/favourite_style.css" rel="stylesheet" type="text/css" />
9: </head>
10: <body>
11: <div class="page">
12: <div id="headerwrapper">
13: <div class="hdrrepeat">
14: <div class="logo">
15: </div>
16: <span>
17: <div id="logindisplay" class="logindisplay">
18: <%
19: if (Request.IsAuthenticated)
20: { 21: %>
22: Welcome <b>
23: <%= Html.Encode(Page.User.Identity.Name) %></b>! [
24: <%=Html.ActionLink("Logout", "Logout", "Account") %> 25: ]
26: <%
27: }
28: else
29: { 30: %>
31: [
32: <%=Html.ActionLink("Login", "Login", "Account") %> 33: ]
34: <%
35: }
36: %>
37: <%= Html.ActionLink("Home", "Index", "Home")%> 38: <%= Html.ActionLink("About Us", "About", "Home")%> 39: </div>
40: </span>
41: <div>
42: </div>
43: <div>
44: </div>
45: </div>
46: </div>
47: </div>
48: <div id="main">
49: <asp:ContentPlaceHolder ID="MainContent" runat="server">
50: </asp:ContentPlaceHolder>
51: <div id="footer" class="footer">
52: Favourite Manager Sample Application © Copyright 2008
53: </div>
54: </div>
55: </body>
56: </html>
As you can see in the code above I have removed the reference to the old CSS file and added a reference to our new CSS file that we created. Inside body tag I have added some div and assigned appropriate classes from our CSS file to these divs. Please refer to the classes and divs for better understanding. Now go ahead and run your application and your page should look something like below if you have used same images. If you have changed images you will your output accordingly.
Now let’s modify our login page. As we know we have already implemented custom login with this page so what we are left with is changing the design of our page. Go ahead and modify the code of your login page. I am not writing code here as its bit long but you can find out in the attached source code folder. Go ahead and run the application and from the home page click on the login link. You should see some page as below.
Ok. So far we changed the application to incorporate the custom login using LINQ. In this article we saw how we can change the look and feel of our ASP .Net MVC application. In the next article we will see how we can modify the registration page look and feel as well as incorporate registration process with our custom database requirements. In the same article we will also modify our Index page to show user’s favorite categories if he is logged in or else show him/her simple welcome message. In further series we will go ahead and complete fully fledged Favorite Manager Application.
Thanks,