Step 3.3. Views

Step 3.3. Views

Skip and go to the next step

Based on the assigned tasks, we should have 4 main views:

  1. Login view (LogOn.aspx);
  2. Employee view (Employee.aspx) ;
  3. Manager view (Manager.aspx);
  4. Details form (TaskDetails.aspx). This details form will be used by employees to change the status of a task (managers use built-on details form). The form needs creating cause employees have limited rights but the built-in form gives full access to operations (creating, deleting, editing).

    task manager views

Basically, these views are enough for us. But the Employee and Manager views are very similar and in order to not repeat the same code blocks, we define such a code in separate (auxiliary) files and then inherit our views from them.

The auxiliary views are:

  1. Master page (scheduler.Master);
  2. Partial view (InitScheduler.ascx).

So, on this step you will shown how to create the required files and how to implement the auxiliary views.
Detailed views implementation for Employee and Manager roles and Details form we will discuss later, on the step 6.

Master page (scheduler.Master):
Here we will define a layout for views.

Partial view (InitScheduler.ascx):
Here we will render the scheduler and attach a login control to it.

Login page (LogOn.aspx):
We have this view created. It's the automatically generated LogOn.aspx placed in the folder Account. We need just to remove the registration link from it and the view is ready to use.

And one more thing - the site.Master page generated by default. It also needs correcting - removing some unnecessary elements.

Note, you should create your views in the right location: create a subfolder in the Views folder with the name 'System'. Within the subfolder, create an .aspx files with the appropriate names. The partial view and the master page you should put into the folder Shared.

Your actions:

  1. Open the view LogOn.aspx placed in the folder Account and go to the paragraph tag containing the following code:

    <p>
        Please enter your username and password. 
        <%: Html.ActionLink("Register", "Register") %> if you don't have an account.
    </p>
  2. Remove the part <%: Html.ActionLink(“Register”, “Register”) %> if you don't have an account.

    <p>
        Please enter your username and password.
    </p>
  3. Create a new folder and name it System;
  4. One after another create 3 views with the following names and add them to folder System:
    • Employee.aspx;
    • Manager.aspx;
    • TaskDetails.aspx.
  5. In folder Shared create a file with name InitScheduler.ascx. Modify the class inside so it looks like the class below:

    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <div class="" style="height: 23px;position: absolute;right: 200px;width: 420px;z-index: 5;"> 
        <% Html.RenderPartial("LogOnUserControl"); %>
    </div>
    <%= Model.Render() %>
  6. In folder Shared create a new master page with name scheduler.Master. Modify the class inside, so it looks like the class below:

    <%@ Master Language="C#" AutoEventWireup="true" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">   
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
        <style>
            body, html
        {
            height:100%;
            margin:0;
            padding:0;
        }
        </style>
    </head>
    <body>   
            <asp:ContentPlaceHolder ID="content" runat="server">       
            </asp:ContentPlaceHolder>
     
    </body>
    </html>
  7. Move to Solution Explorer→Views→Shared, open the site.Master file and delete the following code:

    <div id="title">
         <h1>My MVC Application</h1>
    </div>
    //and
    <div id="menucontainer">        
        <ul id="menu">              
            <li><%: Html.ActionLink("Home", "Index", "Home")%></li>
            <li><%: Html.ActionLink("About", "About", "Home")%></li>
        </ul>
    </div>




comments powered by Disqus