Step 6. Views Implementation

Step 6. Views Implementation

Skip and go to the next step

Now we will finish defining our views we started on the step 3.3.

Employee.aspx:
We will inherit the scheduler.Master and InitScheduler.ascx views (details on the step 3.3). Also here we will add an onclick Event Handler that will load the TaskDetails.aspx page containing task details.

Manager.aspx:
We'll just inherit the scheduler.Master and InitScheduler.ascx views.

TaskDetails.aspx:
We will inherit task details view from the site.Master view. It will have a simple definition: 2 buttons (back and update) and 1 input for changing the task status.

Your actions:

  1. Move to Solution Explorer and right click on Views;
  2. Move to System and one after another open 3 main views. Fill them with code as follows below:

    • Employee.aspx

      employee agenda view

      <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/scheduler.Master" 
      Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
       
      <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
          <title>View tasks</title>
      </asp:Content>
      <asp:Content ID="Content1" ContentPlaceHolderID="content" runat="server">  
          <% Html.RenderPartial("InitScheduler"); %>
          <script>
              scheduler.attachEvent("onClick", function (id) {
                  window.location = "/System/TaskDetails?id=" + id;           
              });
       
          </script>
      </asp:Content>
    • Manager.aspx

      employee units view

      <%@ Page Language="C#" MasterPageFile="~/Views/Shared/scheduler.Master" 
      Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
       
      <asp:Content ID="aboutTitle" ContentPlaceHolderID="head" runat="server">
          <title> Manage Tasks </title>
      </asp:Content>
       
      <asp:Content ID="aboutContent" ContentPlaceHolderID="content" runat="server">
           <% Html.RenderPartial("InitScheduler"); %>
      </asp:Content>
    • TaskDetails.aspx

      task status meeting

      <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
      Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
       
      <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
      	<%= ViewData["user"]%>, TaskDetails
      </asp:Content>
       
      <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
       
         <style>    
             .page
             {
                 text-align:center;
                 color:black;
             }
             #main
             {
                 display:inline-block;
                 *zoom:1;
                 *display:inline;
             }
       
             .details, .list, h1
             {
                 margin:5px 0;
                 padding:15px; 
             } 
             .list, .datetime
             {
                 font-weight:bold;
             }
       
              .details
              {
                  font-size:16px;           
                  text-align:left;
                  white-space:pre;        
                  border-top:1px solid #eeeeee;   
                  border-bottom:1px solid #eeeeee;       
              }
              form input
              {
                  margin:10px 20px 0;
                  width: 100px;    
              }
              .datetime
              {
                  text-align:right;   
                  font-style:italic;      
              }
         </style>
         <% if (Model.Task != null)
            { %>
              <% Html.BeginForm("Index", "System/UpdateStatus", FormMethod.Post, null); %>
              <div style="display:inline-block; border:1px solid #eeeeee;">
                  <div class="datetime">
                    <span class="date">
                      <%=String.Format("{0:MM/dd/yyyy}",Model.Task.start_date)%>
                    </span>
                    <span>, </span>
                    <span class="date"><%=  String.Format("{0:HH:mm}",Model.Task.start_date)%></span>
                    <span>-</span>
                    <span class="date"><%= String.Format("{0:HH:mm}",Model.Task.end_date)%></span>
                    <span></span>
                  </div>
                  <h1><%= Model.Task.text %></h1>
                  <div class="details" 
                  <%= string.IsNullOrEmpty(Model.Task.details) ? "style=\"color:#bbb\"" : ""%> >
                    <%= string.IsNullOrEmpty(Model.Task.details) ? "Task has no description" : Model.Task.details %>
                  </div>
                  <div class ="list">
                    <span>Status: </span>
                    <%= Html.DropDownList("status_id", new SelectList(Model.Statuses, 
                    "key", "label", ViewData["status"]))%>
                  </div>
                  <input type="hidden" name="id" value="<%= Model.Task.id%>" />
              </div>
              <div>
                  <input type="submit" name="result" value="Back" />
                  <input type="submit" name="result" value="Update" />
              </div>
       
              <% Html.EndForm(); %>
              <% }
            else
            { %>
            <div class="error">Failed to load task</div>
       
      <%} %>
      </asp:Content>



 previous button  step six next button


comments powered by Disqus