Takip Edin

ASP.NET MVC

Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı – Proje Şablonu

asp.net mvc teknoloji bloğu proje şablonu - öne çıkan görsel
Asp.Net MVC İle Temel Düzeyde Teknoloji Blog Sitesi Yapımı
Proje Şablonu
Entity Sınıfları
Context Sınıfı
Database Initialization
Connection String
Controller
Blog ve Kategori Tabloları
Anasayfa Blog Listesi
Blog ve Kategori Ekleme Formu
Blog ve Kategori Güncelleme Formu
Kayıt Detay Sayfası
Layout
Kategori Menüsü
Blog Filtreleme
Blog Arama Kutusu

İlk olarak yeni bir proje oluşturalım:

asp.net mvc teknoloji bloğu - create a new project ekranı

Projemize bir isim verelim:

asp.net mvc teknoloji bloğu - projeye isim verme ekranı

Template olarak empty’yi seçelim ve projemize MVC referanslarını ve gerekli klasörleri ekleyelim:

asp.net mvc teknoloji bloğu - empty template ekranı

Solution Explorer penceresinde bulunan Controller klasörüne sağ tıklayıp add controller diyelim:

asp.net mvc teknoloji bloğu - controller klasörü sağ tıkla add controller ekranı

Controller’ımızı empty olarak ekleyelim.

asp.net mvc teknoloji bloğu - empty controller ekranı

DefaultController’ı HomeController olarak değiştirerek controller ekleme işlemini tamamlayalım:

asp.net mvc teknoloji bloğu - homecontroller ekleme

Index action metoduna sağ tıklayalım ve add view diyelim:

asp.net mvc teknoloji bloğu - index action add view ekranı

Use a layout page kısmı seçili olarak index view oluşturma işlemini gerçekleştirelim:

asp.net mvc teknoloji bloğu - use layout page seçili olarak index viewi oluşturma

Solution Explorer penceresinde bulunan TeknolojiBlogu adlı projemize sağ tıklayıp Manage NuGet Packages bölümüne tıklayalım:

asp.net mvc teknoloji bloğu - manage NuGet packages bölümü

Bootstrap versiyonunu yükseltmek için Browse bölümünde, arama kutusuna Bootstrap yazalım ve güncelleme işlemini(Bootstrap3 => Bootstrap4) gerçekleştirelim:

asp.net mvc teknoloji bloğu - browse update ekranı

Update butonuna tıkladıktan sonra karşımıza gelen Preview Changes penceresine OK diyelim:

asp.net mvc teknoloji bloğu - preview changes

Solution Explorer penceresinde, Views klasörüne bağlı Home klasöründe bulunan index.cshtml dosyasına gelerek IIS Express(Google Chrome) butonuna tıklayalım:

asp.net mvc teknoloji bloğu - index view sayfası ilk hali

Tarayıcı ekranında karşımıza bozulmuş bir görüntü gelecektir. Bunun sebebi, projenin Bootstrap versiyonunu yükseltmiş olmamızdan kaynaklanmaktadır.

asp.net mvc teknoloji bloğu - index tarayıcı ekranı unedited bs4

Bu sorunu düzeltmek için Solution Explorer penceresinde, Views klasörüne bağlı Shared klasöründe bulunan _Layout.cshtml dosyasındaki kodların tamamını silelim ve bu sayfaya aşağıdaki kodları yapıştıralım:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Teknoloji Bloğu</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.8.3.js"></script>
</head>
<body class="pb-0">
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            @Html.ActionLink("Teknoloji Bloğu", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            <div class="navbar-collapse collapse" id="navbarSupportedContent">

                <ul class="nav navbar-nav ml-auto">
                </ul>

            </div>
        </div>
    </nav>

    <div class="container body-content">
        <br />
        <div class="row">
            <div class="col-md-12">
                @RenderBody()
            </div>
        </div>        
    </div>

    <div class="bg-dark p-3 mt-3">
        <footer class="text-center text-light">
            <span>© @DateTime.Now.Year - vihekasade.net Tüm Hakları Saklıdır.</span>
        </footer>
    </div>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

Bu kodları _Layout.cshtml dosyasına yapıştırdıktan sonra index.cshtml dosyasına tekrar gelerek IIS Express(Google Chrome) butonuna tıkladığımızda tarayıcı ekranı, aşağıdaki gibi görünecektir:

asp.net mvc teknoloji bloğu - index tarayıcı ekranı edited bs4
Devamını oku

Popüler

error: Content is protected !!