Asp.net MVC Partial View Kullanımı

Partial(parçalı) View bir çok web yazılımcısının kullandığı ve oldukça iş bitirici bir yöntemdir.

Bir defa yaz bin(bir sınır yok tabi ,lafın gelişi) defa kullan mantığını barındıran Partial View , istendiği zaman tek bir yerden güncelleme yapıldığında , otomatik olarak kullanılan yerlere de bu güncellemenin yansımasıdır.

Şimdi bir WebSiteNamePartial adında bir Partial View oluşturalım ve 2 yerde kullanalım ,daha sonra ise Partial View de bu 2 yere gitmeden güncelleme yapalım.

1)WebSiteNamePartial adında bir Partial View oluşturalım.

Partial View Oluşturma

2)İçeriğini aşağıdaki gibi yazalım.

<style>
    #gncSiteName  {
        float:left;
        width: 160px;
        border: 25px solid orange;
        padding: 25px;
        margin: 25px;
    }
</style>
 
<div id="gncSiteName">www.gencklavyeler.com</div>

 

3)Sıra geldi Partial View’imizi sayfalarımızda kullanmaya , önce 2 adet action ekleyip , viewlerini oluşturuyoruz ve içlerini dolduruyoruz.Oluşturduğumuz Partial View’i buralarda kullanıyoruz artık.

Partial Viewi İçerecek View Oluşturma
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GncHome</title>
</head>
<body>
    <div style="float:left;">Ana Sayfa</div>
    @Html.Partial("WebSiteNamePartial")
 
</body>
</html>
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GncContact</title>
</head>
<body>
    <div> 
        <div style="float:left;">İletişim</div>
        @Html.Partial("WebSiteNamePartial")
    </div>
</body>
</html>

 

4)Artık test edebiliriz.

Partial View Page 1
Partial View Page 2

 

5)Şimdi Partial View’imizde bir güncelleme yapalım.

<style>
    #gncSiteName  {
        float:left;
        width: 160px;
        border: 25px solid black;
        padding: 25px;
        margin: 25px;
    }
</style>
 
<div id="gncSiteName">www.gencklavyeler.com</div>
Partial View Page Güncelleme

 

Tekrar görüşmek dileğiyle…

Bir Cevap Yazın