A Layered ASP.NET MVC Application – Part IV

Building the ASP.NET MVC Application

In the last 2 posts we have seen how to develop the Repository and WCF Services for our sample ASP.NET MVC application.This application contains the following Views:

• Home/Index (Index.aspx) – Displaying the list of Bookmarks with options to Add New,Edit and Delete.
• Add New (Create.aspx) – Displaying a blank form to enter the URL and Description.
• Edit (Edit.aspx) – Displaying URL and Description of the selected bookmark.Only Description is editable.

There is a controller BookmarkController for all the above mentioned views.

Step1 – Add the Service proxy

• Add the Service Reference from VS 2008 IDE to WCF Service
• Instantiate and Close the proxy from BookmarkController as shown below:

     public class BookmarkController : Controller, IDisposable {
     private BookmarkServiceClient proxy = null;
     public BookmarkController()
     {
        proxy = new BookmarkServiceClient();
     }

    new public void Dispose() {
      if (proxy != null) {
            if (proxy.State != System.ServiceModel.CommunicationState.Closed) {
                proxy.Close();
            }
       }
    }

Step2 – Create Index Page

• Create a View named Index.aspx and this should be a strongly typed view bound to IEnumerable<Bookmarks> as shown below:

          public partial class Index : ViewPage<IEnumerable<Bookmarks>> {
          }

• The markup of this page contains a tabular view of bookmarks as shown below:

<asp:Content ID=”Content1″ ContentPlaceHolderID=”MainContent” runat=”server”>
  Bookmark List | <%= Html.ActionLink(“Add new”,”Create”,”Bookmark”) %> | <a href=”#”>Import</a>
  <br />
  <br />
  <table width=”100%”>
    <tr>

      <td width=”30%”>URL</td>
      <td width=”60%”>Description</td>
      <td>&nbsp</td>
      <td>&nbsp;</td>
    </tr>
    <% foreach (var item in ViewData.Model) {  %>
       <tr>
      <td width=”40%”><%=item.Url %></td>
      <td><%= item.Description%></td>
      <td><%= Html.ActionLink(“Edit”,”Edit”,new {id=item.BookmarkId}) %></td>
      <td><%= Html.ActionLink(“Delete”,”Delete”,new {id=item.BookmarkId}) %></td>
    </tr>
    <%} %>
  </table>
</asp:Content>

• Add code in Controller to handle Index and Delete actions as shown below:

          public ActionResult Index() {
               ViewData[“Title”] = “Home Page”;
               ViewData[“Message”] = “Welcome to ASP.NET MVC!”;
               return View(proxy.GetBookmarkList()); //WCF Service will return a IEnumerable<Bookmarks> collection.
           }

           public ActionResult Delete(int id) {

                Bookmarks bookmark = new Bookmarks();
                bookmark.BookmarkId = id;
                bookmark.Description = string.Empty; //only id is needed to delete
                bookmark.Url = string.Empty; //only id is needed to delete
                proxy.DeleteBookmark(bookmark); //call service to delete the bookmark
                return RedirectToAction(“Index”); //Redirect To Index Page after successful deletion

          }

• Add code in Controller to navigate to Create and Edit views as well

          public ActionResult Create() {
                 ViewData[“Title”] = “Add Bookmark”;
                  return View();
            }

         public ActionResult Edit(int id) {

              return View(proxy.GetBookmark(id));

         }

  Step2 – Create Add New Page

• Create a strongly typed view named Create.aspx and bound to Bookmarks as shown below:

          public partial class Create : ViewPage<Bookmarks> {
          }

• The markup contains a blank textbox and textarea for URL and Description as shown below:

<asp:Content ID=”Content1″ ContentPlaceHolderID=”MainContent” runat=”server”>
  <%= Html.ActionLink(“Home”, “Index”, “Bookmark”)%> | Add New | <a href=”#”>Import</a>
  <br />
  <h2> Add Bookmark</h2>  <%using (Html.BeginForm()) { %>
  <fieldset>
    <label>
      URL</label><br />
      <% IDictionary<string, object> attr = new Dictionary<string, object>();
         attr.Add(“style”, “width:400px”);
      %>
    <%=Html.TextBox(“Url”,””,attr) %>
    <br />
    <label>
      Description</label><br />
    <%=Html.TextArea(“Description”,””,5,50,null) %>
    <br />
    <input type=”submit” value=”Save” />
  </fieldset>
  <%} %>
</asp:Content>

 

 

 

• Add code in Controller to save the changes when form is posted.

           [AcceptVerbs(HttpVerbs.Post)] //This attribute indicates this action method will be called only on form POST
           public ActionResult Create(string Url,string Description) {

 

 

    Step2 – Create Edit Page

• Create a strongly typed view named Edit.aspx and bound to Bookmarks as shown below:

           public partial class Edit : ViewPage<Bookmarks> {
            }

• The markup contains a textbox and textarea for URL and Description displaying data for selected bookmark as shown below.The Url textbox will remain disabled.

<asp:Content ID=”Content1″ ContentPlaceHolderID=”MainContent” runat=”server”>
  <%= Html.ActionLink(“Home”, “Index”, “Bookmark”)%>   |  <%= Html.ActionLink(“Add new”,”Create”,”Bookmark”) %>
  | <a href=”#”>Import</a>
  <br />
  <h2> Edit Bookmark</h2>
  <%using (Html.BeginForm()) { %>
  <fieldset>
    <label>
      URL</label><br />
    <% IDictionary<string, object> attr = new Dictionary<string, object>();
       attr.Add(“style”, “width:400px”);
       attr.Add(“disabled”, null);
    %>
    <%=Html.TextBox(“Url”,ViewData.Model.Url,attr) %>
    <br />
    <label>
      Description</label><br />
    <%=Html.TextArea(“Description”,ViewData.Model.Description,5,50,null) %>
    <br />
    <input type=”submit” value=”Save” />
  </fieldset>
  <%} %>
</asp:Content>

• Add code in BookmarkController to save the edited changes when form is posted.

           [AcceptVerbs(HttpVerbs.Post)] //This action method will be invoked only for form POST
           public ActionResult Edit(int id,string Description) {

               Bookmarks bookmark = new Bookmarks();
               bookmark.BookmarkId = id;
               bookmark.Description = Description;
               bookmark.Url = string.Empty; //Url is not required as it is not updated
               proxy.UpdateBookmark(bookmark); //Call Service

               return RedirectToAction(“Index”); //Return to Index Page

           }

So with this our ASP.NET MVC application with a Business Entity layer exposed via WCF Service is complete.Need to check this more thoroughly and I’ll keep on posting updates and refinements on this.