Asp.Net MVC 3 User Control İşlemleri

16.06.2012Okunma Sayısı: 7019Kategori: ASP.NET MVC

Bu makalemizde Asp.Net MVC 3 Razor View Engine’de User Control kullanarak MasterPage ile Controller sınıflarının nasıl buluşacağınız inceleyeceğiz.

Bu işlem için yeni bir Asp.NET MVC 3 (Empty) Web Application oluşturalım.

Oluşturduğumuz projeye HomeController isminde bir Controller ekleyelim.

Eklediğimiz Controllerın Index View’ını olşturalım. Oluştururken Layout seçimini yapalım.

Şimdi Views klasörünün altına UserControls klasörü oluşturalım ve “UC_Baslik.ascx” isminde bir Asp.NET MVC 3 View User Control control oluşturalım.

UC_Baslik.ascx isimli user controlümüze bir label ekleyelim ve bu label’ın text’ini Page_Load’da değiştirelim.

UC_Baslik.ascx

 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script runat="server">
 
    protected void Page_Load(object sender, EventArgs e)
    {
        lbBaslik.Text = "Başlık";
    }
</script>
 
<p>
    <asp:Label ID="lbBaslik" runat="server" Text="Label"></asp:Label>
</p>

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script runat="server">
 
    protected void Page_Load(object sender, EventArgs e)
    {
        lbBaslik.Text = "Başlık";
    }
</script>
 
<p>
    <asp:Label ID="lbBaslik" runat="server" Text="Label"></asp:Label>
</p>

Son olarak _Layout.cshtml dosyamıza gidelim ve layoutta aşağıdaki düzenlemeleri yapalım.

_Layout.cshtml

 
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
 
<body>
    <div style="background-color:Red; height:100px;">
       @Html.Partial("~/Views/UserControls/UC_Baslik.ascx")
    </div>
    <div style="background-color:Yellow; height:200px;" >
        @RenderBody()
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
 
<body>
    <div style="background-color:Red; height:100px;">
       @Html.Partial("~/Views/UserControls/UC_Baslik.ascx")
    </div>
    <div style="background-color:Yellow; height:200px;" >
        @RenderBody()
    </div>
</body>
</html>

Html.Partial methodu ile parametrede gönderdiğimiz user controlü sayfamıza ekliyoruz.

Şimdi projemizi çalıştıralım ve kırmızı alanda “Başlık” yazısını görelim.

Veysel Uğur KIZMAZ

Bilgisayar Mühendisi

veysel@ugurkizmaz.com