마스터 페이지

 

이 단원에서는 공통 페이지 레이아웃을 만드는 방법에 대해 배울 것이다.

마스터 페이지의 강점을 배우고 사이트에 로고나 메뉴 링크 그리고 배너 광고를 마스터 페이지 내에 배치하는 것을 배울 것이다.

 

마스터 페이지 만들기

 

 

하나의 어플리케이션 안에 하나 이상의 마스터 페이지를 만들 수 있으며 각각의 마스터 페이지는 각각 다른 레이아웃을 정의 할 수 있다.

 

컨텐츠 페이지 만들기

마스터 페이지를 만든 이후 마스터 페이지를 기본으로 하나 이상의 컨텐츠 페이지를 만들 수 있다.

 

 

  

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

    브라우저 타이틀 변경

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

 

    <h2>Contents Page</h2>

 

 

</asp:Content>

 

 

추가한 index 페이지에서 타이틀을 변경한 내용이다. 마스터 페이지의 타이틀 부분에 컨텐츠를 만들어 놓으므로써

각 컨텐츠 페이지의 타이틀을 넣을 수 있다.

 

 

마스터 페이지로 데이터 전달

 

이 단원의 목표는 마스터 페이지에 데이터 전달할 수 있는가를 설명하고 있다.

영화 데이터베이스를 구축하고 영화 카테고리 테이블과 영화 목록 테이블 2개를 만들 것이다.

카테고리를 뿌려주고 그 뿌려준 카테고리에 속한 영화 리스트를 보여줄 것이다.

 

 

데이터베이스 Movies를 만들자. 만들어진 데이터베이스를 더블 클릭하면 서버 탐색기로 이동하여 해당 데이터베이스의 정보를 볼 수 있다.

 

 

 

모델 폴더에 해당 데이터베이스 관련된 LINQ to SQL을 생성한다

 

 컨트롤러 페이지

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication1.Models;

 

namespace MvcApplication1.Controllers

{

    [HandleError]

    public class HomeController : Controller

    {

        private MoviesDataContext _dataContext = new MoviesDataContext();

 

        public ActionResult Index()

        {

            ViewData["categories"] = from c in _dataContext.MovieCategory

                                     select c;

            ViewData["movies"] = from m in _dataContext.Movie

                                 select m;

            return View();

        }

 

        public ActionResult Details(int id)

        {

            ViewData["categories"] = from c in _dataContext.MovieCategory

                                     select c;

            ViewData["movies"] = from m in _dataContext.Movie

                                 where m.CategoryId == id

                                 select m;

            return View();

        }

    }

}

 

 디테일 페이지

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import! Namespace="MvcApplication1.Models" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

        Details

</asp:Content>

 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Details</h2>

    <% foreach (var m in (IEnumerable<Movie>)ViewData["movies"])

         { %>

         <li><%= m.title %></li>

 

    <% } %>

</asp:Content>

 

 마스터 페이지

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<%@ Import! Namespace="MvcApplication1.Models" %>

 

<!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">

    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

</head>

<body>

    <div>

        <h1>My Web Site</h1>

       

          <% foreach (var c in (IEnumerable<MovieCategory>)ViewData["categories"])

             {%>

               <%= Html.ActionLink(c.name, "Details", new {id=c.id} ) %>

 

          <% } %>

   

        <asp:ContentPlaceHolder ID="MainContent" runat="server">

       

        </asp:ContentPlaceHolder>

    </div>

</body>

</html>

 

위의 소스는 마스터 페이지에서 영화 카테고리를 클릭하면 해당 카테고리에 속한 영화 타이틀이 출력되는 예제이다.

 

 위의 소스는 마스터 페이지에서 영화 카테고리를 클릭하면 해당 카테고리에 속한 영화 타이틀이 출력되는 예제이다.

 

 

Good Solution

위의 예제는 심플하게 데이터를 뿌려주고 있다. 하지만 컨트롤러 소스를 보면 영화 카테고리 정보를 중복되게 사용하는 것을 보게 될 것이다.

왜 중복되게 보내는 것일까? 그 이유는 마스터에서 사용하는 카테고리 ViewData 때문이다.

이 단원에서 배울 것은 위의 예제를 좀 더 개선하여 좋을 프로그램으로 만드는 것이 목적이다.

 

우리는 컨트롤러에 추상화로 구현한 클래스를 하나 만들 것이다.

이 클래스의 역할은 Movie데이터를 사용할 수 있게 속성(프로퍼티)을 하나 제공하며 생성자에서 카테고리 정보를 ViewData로 만들어 주는 것을 한다.

그리고 잊으면 안되는 것이 이 클래스는 컨트롤러를 상속 받는 것이다.

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax;

using MvcApplication1.Models;

 

namespace MvcApplication1.Controllers

{

    public abstract class ApplicationController : Controller

    {

        private MoviesDataContext _dataContext = new MoviesDataContext();

 

        public MoviesDataContext DataContext

        {

            get { return _dataContext; }

        }

 

        public ApplicationController()

        {

            ViewData["categories"] = from c in DataContext.MovieCategory

                                     select c;

        }

    }

}

 

해당 추상 클래스를 사용할 Movies컨트롤을 만들겠다.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Mvc.Ajax;

using MvcApplication1.Models;

 

namespace MvcApplication1.Controllers

{

    public class MoviesController : ApplicationController

    {

        /// <summary>

        /// Show list of all movies

        /// </summary>

        public ActionResult Index()

        {

            ViewData["movies"] = from m in DataContext.Movie

                                 select m;

            return View();

        }

 

        /// <summary>

        /// Show list of movies in a category

        /// </summary>

        public ActionResult Details(int id)

        {

            ViewData["movies"] = from m in DataContext.Movie

                                 where m.CategoryId == id

                                 select m;

            return View();

        }

    }

}

 

소스를 보면 알듯이 ApplicationController를 상속 받아 Movie데이터를 사용하는 것을 볼 수 있다.

그리고 달라진 것이 마스터에 보내야 하는 정보를 이미 추상 클래스에서 해결을 했으므로 Movies컨트롤러에서는 할 필요가 없어진 것이다.

 

Controller를 상속 받은 클래스로 인해 추상 클래스를 상속 받은 모든 클래스는 어느 액션이든 호출될 때 마다 자동으로 영화 카테고리 정보를 ViewData에 포함하게 된다.

저작자표시 비영리 변경금지

'Web Platform' 카테고리의 다른 글

에러) System.Web.HttpException: 최대 요청 길이를 초과했습니다.  (0) 2009.06.29
ASP.NET MVC 액션 필터  (0) 2009.06.29
ASP.NET MVC TagBuilder  (0) 2009.06.29
ASP.NET MVC View  (0) 2009.06.29
ASP.NET MVC Routing 기술  (0) 2009.06.29

+ Recent posts

티스토리툴바