Ana Sayfaları ve Kısmi Bölümleri Kullanarak Kullanıcı Arabirimini Yeniden Kullanma

Microsoft tarafından

PDF’yi İndir

Bu, ASP.NET MVC 1 kullanarak küçük ama eksiksiz bir web uygulaması oluşturmayı gösteren ücretsiz bir "NerdDinner" uygulaması öğreticisinin 7. adımıdır.

7. Adım, kısmi görünüm şablonlarını ve ana sayfaları kullanarak kod yinelemesini ortadan kaldırmak için görünüm şablonlarımız içinde "DRY İlkesi"ni uygulama yollarımızı gözden geçirir.

ASP.NET MVC 3 kullanıyorsanız , MVC 3 veya MVC Music Store ile Çalışmaya Başlama öğreticilerini izlemenizi öneririz.

NerdDinner 7. Adım: Kısmi ve Ana Sayfalar

MVC'nin benimsediği ASP.NET tasarım felsefelerinden biri de "Kendinizi Yinelemeyin" ilkesidir (genellikle "KURU" olarak adlandırılır). DRY tasarımı, kodun ve mantığın yinelenmesini ortadan kaldırmaya yardımcı olur ve bu sayede uygulamalar daha hızlı derlenir ve bakımı daha kolay hale gelir.

DRY ilkesinin nerdDinner senaryolarımızın birkaçında uygulandığını gördük. Birkaç örnek: Doğrulama mantığımız, denetleyicimizde hem düzenleme hem de oluşturma senaryolarında uygulanmasını sağlayan model katmanımızda uygulanır; Düzenle, Ayrıntılar ve Sil eylem yöntemlerinde "NotFound" görünüm şablonunu yeniden kullanıyoruz; View() yardımcı yöntemini çağırdığımızda adı açıkça belirtme gereksinimini ortadan kaldıran görünüm şablonlarımız ile bir kural adlandırma deseni kullanıyoruz; hem Düzenle hem de Oluştur eylem senaryoları için DinnerFormViewModel sınıfını yeniden kullanıyoruz.

Şimdi de burada kod yinelemesini ortadan kaldırmak için görünüm şablonlarımızda "DRY Principle" uygulamasının yollarını inceleyelim.

Görünüm Şablonlarını Düzenleme ve Oluşturma adımlarını yeniden ziyaret etme

Şu anda Akşam Yemeği formu kullanıcı arabirimimizi görüntülemek için "Edit.aspx" ve "Create.aspx" olmak üzere iki farklı görünüm şablonu kullanıyoruz. Bunların hızlı bir görsel karşılaştırması, ne kadar benzer olduklarını vurgular. Oluşturma formunun görünümü aşağıdadır:

"Düzenle" formumuz şu şekilde görünür:

Pek fark yok, değil mi? Başlık ve üst bilgi metni dışında form düzeni ve giriş denetimleri aynıdır.

"Edit.aspx" ve "Create.aspx" görünüm şablonlarını açarsak, bunların aynı form düzeni ve giriş denetim kodu içerdiğini fark ederiz. Bu yineleme, yeni bir Dinner özelliği sunduğumuzda veya değiştirdiğimizde iki kez değişiklik yapmak zorunda olduğumuz anlamına gelir. Bu iyi bir şey değildir.

Kısmi Görünüm Şablonlarını Kullanma

ASP.NET MVC, sayfanın alt bölümü için görünüm işleme mantığını kapsüllemek için kullanılabilecek "kısmi görünüm" şablonları tanımlama özelliğini destekler. "Kısmi" görünüm işleme mantığını bir kez tanımlamak için kullanışlı bir yol sağlar ve ardından uygulama genelinde birden çok yerde yeniden kullanır.

Edit.aspx ve Create.aspx görünüm şablonu yinelememizi "kurumaya" yardımcı olmak için, form düzenini ve her ikisi için ortak olan giriş öğelerini kapsülleyen "DinnerForm.ascx" adlı kısmi bir görünüm şablonu oluşturabiliriz. Bunu yapmak için /Views/Dinners dizinimize sağ tıklayıp "Ekle-Görünüm>" menü komutunu seçeceğiz:

Bu, "Görünüm Ekle" iletişim kutusunu görüntüler. Oluşturmak istediğimiz yeni görünümü "DinnerForm" olarak adlandıracak, iletişim kutusunda "Kısmi görünüm oluştur" onay kutusunu seçecek ve bunu bir DinnerFormViewModel sınıfı geçireceğimizi belirteceğiz:

"Ekle" düğmesine tıkladığımızda Visual Studio, "\Views\Dinners" dizininde bizim için yeni bir "DinnerForm.ascx" görünüm şablonu oluşturur.

Ardından Edit.aspx/ Create.aspx görünüm şablonlarımızdan yinelenen form düzenini / giriş denetim kodunu kopyalayıp yeni "DinnerForm.ascx" kısmi görünüm şablonumuza yapıştırabiliriz:

<%= Html.ValidationSummary("Please correct the errors and try again.") %>

<% using (Html.BeginForm()) { %>

    <fieldset>
        <p>
            <label for="Title">Dinner Title:</label>
            <%= Html.TextBox("Title", Model.Dinner.Title) %>
            <%=Html.ValidationMessage("Title", "*") %>
        </p>
        <p>
            <label for="EventDate">Event Date:</label>
            <%= Html.TextBox("EventDate", Model.Dinner.EventDate) %>
            <%= Html.ValidationMessage("EventDate", "*") %>
        </p>
        <p>
            <label for="Description">Description:</label>
            <%= Html.TextArea("Description", Model.Dinner.Description) %>
            <%= Html.ValidationMessage("Description", "*") %>
        </p>
        <p>
            <label for="Address">Address:</label>
            <%= Html.TextBox("Address", Model.Dinner.Address) %>
            <%= Html.ValidationMessage("Address", "*") %>
        </p>
        <p>
            <label for="Country">Country:</label>
            <%= Html.DropDownList("Country", Model.Countries) %>                
            <%= Html.ValidationMessage("Country", "*") %>
        </p>
        <p>
            <label for="ContactPhone">Contact Phone #:</label>
            <%= Html.TextBox("ContactPhone", Model.Dinner.ContactPhone) %>
            <%= Html.ValidationMessage("ContactPhone", "*") %>
        </p>
            
        <p>
            <input type="submit" value="Save"/>
        </p>
    </fieldset>
    
<% } %>

Ardından Düzenleme ve Oluşturma görünüm şablonlarımızı güncelleştirerek DinnerForm kısmi şablonunu çağırabilir ve form yinelemesini ortadan kaldırabiliriz. Bunu, görünüm şablonlarımız içinde Html.RenderPartial("DinnerForm") çağrısı yaparak yapabiliriz:

Create.aspx

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Host a Dinner
</asp:Content>

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

    <h2>Host a Dinner</h2>

    <% Html.RenderPartial("DinnerForm"); %>
    
</asp:Content>

Edit.aspx

<asp:Content ID="Title" ContentPlaceHolderID="TitleContent" runat="server">
    Edit: <%=Html.Encode(Model.Dinner.Title) %>
</asp:Content>

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

    <h2>Edit Dinner</h2>

    <% Html.RenderPartial("DinnerForm"); %>

</asp:Content>

Html.RenderPartial çağrısı yaparken istediğiniz kısmi şablonun yolunu açıkça niteleyebilirsiniz (örneğin: ~Views/Dinners/DinnerForm.ascx"). Ancak yukarıdaki kodumuzda, ASP.NET MVC içindeki kural tabanlı adlandırma düzeninden yararlanıyor ve yalnızca işlenmek üzere kısmi adı olarak "DinnerForm" belirtiyoruz. Bunu yaptığımızda ASP.NET MVC kural tabanlı görünümler dizininde ilk sırada görünür (DinnersController için bu /Views/Dinners olacaktır). Kısmi şablonu orada bulamazsa /Views/Shared dizininde arar.

Html.RenderPartial() yalnızca kısmi görünümün adıyla çağrıldığında ASP.NET MVC, çağrılı görünüm şablonu tarafından kullanılan Model ve ViewData sözlük nesnelerinin aynısını kısmi görünüme geçirir. Alternatif olarak, kısmi görünümün kullanılabilmesi için alternatif bir Model nesnesi ve/veya ViewData sözlüğü geçirmenizi sağlayan aşırı yüklenmiş Html.RenderPartial() sürümleri vardır. Bu, tam Model/ViewModel'in yalnızca bir alt kümesini geçirmek istediğiniz senaryolar için kullanışlıdır.

Yan Konu: Neden <%=> %> yerine <%?

Yukarıdaki kodda fark etmiş olabileceğiniz inceliklerden biri, Html.RenderPartial() çağrısı yaparken %= %> bloğu yerine <%%> bloğunu kullanmamızdır<. <ASP.NET içindeki %= %> blokları, bir geliştiricinin belirtilen bir değeri işlemek istediğini gösterir (örneğin: <%= "Hello" %> "Hello") işleyebilecek. <% blokları> bunun yerine geliştiricinin kod yürütmek istediğini ve bunların içinde işlenen tüm çıkışların açıkça yapılması gerektiğini gösterir (örneğin: <% Response.Write("Hello") %>. Yukarıdaki Html.RenderPartial kodumuzla %%> bloğunu kullanmamızın <nedeni, Html.RenderPartial() yönteminin bir dize döndürmemesi ve bunun yerine içeriği doğrudan çağıran görünüm şablonunun çıkış akışına göndermesidir. Bunu performans verimliliği nedeniyle yapar ve bunu yaparak geçici bir dize nesnesi (büyük olasılıkla çok büyük) oluşturma gereğini önler. Bu, bellek kullanımını azaltır ve genel uygulama aktarım hızını geliştirir. Html.RenderPartial() kullanırken yapılan yaygın hatalardan biri, %> bloğu içinde <olduğunda çağrının sonuna noktalı virgül eklemeyi unutmaktır. Örneğin, bu kod bir derleyici hatasına neden olur: <% Html.RenderPartial("DinnerForm") %> Bunun yerine şunu yazmanız gerekir: <% Html.RenderPartial("DinnerForm"); %> Bunun nedeni <%> bloklarının bağımsız kod deyimleri olması ve C# kod deyimleri kullanılırken noktalı virgülle sonlandırılması gerekir.

Kodu Netleştirmek için Kısmi Görünüm Şablonları Kullanma

Görünüm işleme mantığını birden çok yerde çoğaltmaktan kaçınmak için "DinnerForm" kısmi görünüm şablonunu oluşturduk. Kısmi görünüm şablonları oluşturmanın en yaygın nedeni budur.

Bazen, yalnızca tek bir yerde çağrılsalar bile kısmi görünümler oluşturmak mantıklıdır. Görünüm işleme mantığı ayıklandığında ve bir veya daha fazla iyi adlandırılmış kısmi şablonda bölümlendiğinde, çok karmaşık görünüm şablonları genellikle daha kolay okunabilir.

Örneğin, projemizdeki Site.master dosyasından aşağıdaki kod parçacığını (kısa süre içinde ele alacaktır) göz önünde bulundurun. Kısmen ekranın sağ üst kısmında oturum açma/oturum kapatma bağlantısı görüntüleme mantığı "LogOnUserControl" kısmi içinde kapsüllendiğinden, kod okunmaya göre daha düzdür:

<div id="header">
    <div id="title">
        <h1>My MVC Application</h1>
    </div>
      
    <div id="logindisplay">
        <% Html.RenderPartial("LogOnUserControl"); %>
    </div> 
    
    <div id="menucontainer">
    
        <ul id="menu">              
            <li><%=Html.ActionLink("Home", "Index", "Home")%></li>
            <li><%=Html.ActionLink("About", "About", "Home")%></li>
        </ul>
    </div>
</div>

Bir görünüm şablonundaki html/kod işaretlemesini anlamaya çalışırken kafanız her karışsa, bazıları ayıklanıp iyi adlandırılmış kısmi görünümler halinde yeniden düzenlenmişse daha net olup olmayacağını göz önünde bulundurun.

Ana Sayfalar

kısmi görünümleri desteklemeye ek olarak, ASP.NET MVC bir sitenin ortak düzenini ve en üst düzey html'sini tanımlamak için kullanılabilecek "ana sayfa" şablonları oluşturma özelliğini de destekler. Ardından, görünümler tarafından geçersiz kılınabilen veya "doldurulabilen" değiştirilebilir bölgeleri belirlemek için içerik yer tutucu denetimleri ana sayfaya eklenebilir. Bu, bir uygulama genelinde ortak bir düzen uygulamak için çok etkili (ve DRY) bir yol sağlar.

Varsayılan olarak, yeni ASP.NET MVC projelerine otomatik olarak bir ana sayfa şablonu eklenir. Bu ana sayfa "Site.master" olarak adlandırılır ve \Views\Shared\ klasöründe bulunur:

Varsayılan Site.master dosyası aşağıdaki gibi görünür. Sitenin dış html'sini ve üst kısımdaki gezinti menüsünü tanımlar. Biri başlık, diğeri sayfanın birincil içeriğinin değiştirilmesi gereken yer olmak üzere iki değiştirilebilir içerik yer tutucu denetimi içerir:

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title>
       <asp:ContentPlaceHolder ID="TitleContent" runat="server" />
    </title>
   <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
              
            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div> 
            
            <div id="menucontainer">

                <ul id="menu">              
                    <li><%=Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%=Html.ActionLink("About", "About", "Home")%></li>
                </ul>
            
            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
    </div>
</body>
</html>

NerdDinner uygulamamız için oluşturduğumuz tüm görünüm şablonları ("List", "Details", "Edit", "Create", "NotFound" vb.) bu Site.master şablonunu temel aldı. Bu, "Görünüm Ekle" iletişim kutusunu kullanarak görünümlerimizi oluştururken varsayılan olarak üst <% @ Sayfa %> yönergesine eklenen "MasterPageFile" özniteliğiyle gösterilir:

<%@ Page Inherits="System.Web.Mvc.ViewPage<NerdDinner.Controllers.DinnerViewModel>" MasterPageFile="~/Views/Shared/Site.Master" %>

Bunun anlamı, Site.master içeriğini değiştirebileceğimiz ve görünüm şablonlarımızdan herhangi birini işlerken değişikliklerin otomatik olarak uygulanmasını ve kullanılmasını sağlayabiliriz.

Uygulamamızın üst bilgisinin "MVC Uygulamam" yerine "NerdDinner" olması için Site.master üst bilgi bölümümüzü güncelleştirelim. Ayrıca ilk sekmenin "Akşam Yemeği Bul" (HomeController'ın Index() eylem yöntemiyle işlenir) olması için gezinti menümüzü güncelleştirelim ve "Akşam Yemeği Barındırma" adlı yeni bir sekme ekleyelim (DinnersController'ın Create() eylem yöntemiyle işlenir):

<div id="header">

    <div id="title">
        <h1>NerdDinner</h1>
    </div>

    <div id="logindisplay">
        <% Html.RenderPartial("LoginStatus"); %>
    </div> 
    
    <div id="menucontainer">
        <ul id="menu">      
           <li><%=Html.ActionLink("Find Dinner", "Index", "Home")%></li>
           <li><%=Html.ActionLink("Host Dinner", "Create", "Dinners")%></li>
           <li><%=Html.ActionLink("About", "About", "Home")%></li>   
        </ul>
    </div>
</div>

Site.master dosyasını kaydedip tarayıcımızı yenilediğimizde üst bilgi değişikliklerimizin uygulamamızdaki tüm görünümlerde gösterilip gösterilmediğini göreceğiz. Örnek:

Ve /Dinners/Edit/[id] URL'si ile:

Sonraki Adım

Kısmi ve ana sayfalar, görünümleri temiz bir şekilde düzenlemenizi sağlayan çok esnek seçenekler sağlar. Bunların, görüntüleme içeriğini/ kodunu yinelemekten kaçınmanıza yardımcı olduğunu ve görünüm şablonlarınızın okunmasını ve bakımını kolaylaştırdığını göreceksiniz.

Şimdi daha önce oluşturduğumuz listeleme senaryoyu yeniden gözden geçirelim ve ölçeklenebilir sayfalama desteğini etkinleştirelim.

ÖncekiSonraki