Temel Script ifadelerini kapsayan bir uygulama ile başlayalım.
1) Yeni bir MVC projesini ders5 adı ile oluşturalım.
2) Controller klasörüne yeni bir kontrolü HomeController adı ile ekleyelim.
3) Controller içindeki Index Action’ı üzerinde sağ tuşa basarak Add/View seçeneği ile bir Html bağlayalım.
Kutuyu boşaltarak Add butonuna basıyoruz.
4)Kod kısmında <div> taglarının arasına HTML Toolbox’ından Input(Button) sürükleyelim.
5) References üzerinde sağ tuşa basarak Manage NuGet Packages seçeneğine tıklayalım.
6) Search kısmına Jquery yazarak bulduralım ve (nuget.org) install edelim. Eğer yüklüyse sağ üst köşesinde yeşil check işareti görünür.
7) Update kısına geçip Update All ile güncellemeleri ara sıra yapmanızda fayda vardır.
8) 6.Adım sonucuna Scripts isimli bir klasör oluşur ve içine Jquery dosyaları gelir. Bunlardan Jquery-2.1.4.js dosyasını head tagının içine sürüklüyoruz.
9) HomeController dosyasını açarak aşağıdaki kodları ekleyelim. Bu biz javascript formatında bir mesaj döndürecektir. String Formatında bir javascript döndürüyoruz. Bu uzun bir script te olabilir.
public JavaScriptResult GelenMesaj()
{
return JavaScript("alert(‘Merhaba Paralel Evrenli’)");
}
Not: Yukardaki ifadeyi kopyalayarak yapıştırıyorsanız. Tek tırnakları yeniden koyunuz.
10) index.cshtml dosyasına giderek aşağıdaki script ifadelerini <html> kapanış tagından sonra ekleyelim.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-2.1.4.js"></script>
</head>
<body>
<div>
<input id="Button1" type="button" value="Java Mesajı Getir" />
@*<button id="btnjs">Java Script Mesajı Gelsin</button>*@
</div>
</body>
</html>
<script>
$("#Button1").click(function () {
$.getScript("Home/GelenMesaj")
})
</script>
@*<script>
$("#btnjs").click(function () {
$.getScript("Home/GelenMesaj")
})
</script>*@
Uygulamamızı çalıştırıp Button1’e tıkladığımızda şekildeki gibi değer dönecektir.
11 ) Şimdi içerik getirelim. Bunun için HomeController.cs dosyasının altına aşağıdaki ifadeyi ekleyelim. Bu bir Content istiyor.XML de yollayabiliriz.
public ContentResult icerikAl()
{
return Content("Yüksel İnan");
}
12) 2.Butonu getirelim.
13) Hemen altına aşağıdaki satırı ekleyelim.
<div id="icerik"></div>
14) Aşağıdaki script kodunu diğer script kodumuzun bitiş tagından sonra yazalım.
<script>
$("#Button2").click(function () {
$("#icerik").load("Home/icerikAl")
})
</script>
15) Çalıştırarak Buton 2’ye tıkladığımızda yazdığımız ifade gelecektir.
16) Şimdi akvaryum isimli bir Class’ı Model klasörüne ekleyerek içine aşağıdaki kodları yazalım.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ders5.Models
{
public class akvaryum
{
public string ad { get; set; }
public int fiyat { get; set; }
}
}
17) HomeController kısmına geçerek üst kısımda aşağıdaki gibi model tanımlaması yapalım.
using ders5.Models;
18) Kodların altına aşağıdaki ifadeyi ekleyelim.
public JsonResult JSonVeriAl()
{
akvaryum akv = new akvaryum();
akv.ad = "Koi";
akv.fiyat = 200;
return Json(akv,JsonRequestBehavior.AllowGet);
}
Varsayılan olarak, ASP.NET MVC çerçevesinde bir JSON yükü ile bir HTTP GET isteğine yanıt vermek için vermez. JSON yanıt belgesi olarak göndermeniz gerekiyorsa, Json yöntem için ikinci parametre olarak JsonRequestBehavior.AllowGet kullanarak izin vermek gerekir. Parametreli yapılarda kullanılması gerekir.
19) Aşağıdaki Butonu ekleyelim
<input id="Button3" type="button" value="Json Veri Getir" />
20) Bu butona ait scripti aşağıdaki gibi yazalım. ikinci fonksiyon data alacak.
<script>
$("#Button3").click(function () {
$.getJSON("Home/JSonVeriAl", function (data) {
alert(data.ad)
})
})
</script>
Çalıştıralım;
21) Eğer iki veriyi birden çekmek istersek kodumuzu aşağıdaki gibi değiştirmemiz gerekir.
<script>
$("#Button3").click(function () {
$.getJSON("Home/JSonVeriAl", function (data) {
alert(data.ad + "-->" + data.fiyat)
})
})
</script>
Çalıştırdığımızda görüntü şekildeki gibi olacaktır.
22) Şimdi de partial döndürelim. Bunun için ilk olarak Home klasörü içinde Partial isimli yeni bir klasör oluşturalım.
23) Bu klasörün üzerinde sağ tuş Add View seçeneği ile şekildeki BenimPartial View’ını oluşturalım. Partial kutusunu doldurmayı unutmayınız.
24) İçine aşağıdaki ifadeleri yazalım.
<ul>
<li>İstanbul</li>
<li>Ankara</li>
<li>İzmir</li>
</ul>
25) Home Controller içine geçerek aşağıdaki kodları ilave edelim.
public PartialViewResult BenParGetir()
{
return PartialView("Partial/BenimPartial");
}
26) Şimdi bunu çağıracak Butonu ve scripti oluşturmak için index.cshtml dosyamıza geçerek yeni bir Button koyalım.
<br />
<input id="Button4" type="button" value="Partial Getir" />
<div id="partal"></div>
27) Aynı dosya içinde diğer scriptlerin altına yeni scriptimizi yazalım. Burayı açacak olursak; Button4’e tıkladığımız zaman partal isimli div içine HomeController da tanımladığım BenPartGetir içindeki bilgileri al.
$("#Button4").click(function () {
$("#partal").load("Home/BenParGetir")
})
28) Yüklediğimizde görüntü şekildeki gibi olacaktır.
29) Home Controller içinde kullandığımız yapılardan herhangi birinin adını seçerek, F12 tuşuna basarsanız içeriğine ulaşırsınız ve hepsinin ActionResult kütüphanesinden miras aldığını görebilirsiniz.
1) ders6 isimli Boş bir MVC uygulaması açalım.
2)
2) View klasörü altında Shared isimli bir klasör oluşturalım.
3) Bu Shared klasörü üzerinde sağ tuşa basarak _Layout isimli bir View’ı şekildeki gibi oluşturalım.
Birçok yeni klasörün yukarılara eklendiğini gözlemleyin.
4) İçine aşağıdaki kodlar otomatik gelecektir. Gelmediyse sorun var yeniden deneyin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</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.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Render Section: Layout yapısı üzerinde görüntüleme yapmamıza yarar. Layout yapısını kullanan sayfalarda üst ve alt bilgi seçenekleri aynıdır. Ancak ben belli sayfalarda değişik görünümler elde etmek istersem bunu Render Section ile sağlayabiliriz. Örneğin tüm sayfaların alt kısmında Telefon numarası yazarken Index sayfasında buna ilaveten adres yazmasını istersek bunu Render Section ile yapabiliriz.
Örneğin @RenderSection(“adres”) şeklinde bir ifadeyi Layout sayfasında Footer kısmına koyduk. Bu durumda çalıştırdığımızda hata verir. Çünkü adres diye bir tamamlama yapılmamıştır. Bu tanımlama yapılmayan sayfaların da çalışmasını istersek o zaman @RenderSection(“adres”,false) yazmamız gerekir. Bunun anlamı adres tanımlı olmasa da çalı demektir. Bir render ifadesi genellikle aşağıdaki ifadeden sonra eklenir.
@{
ViewBag.Title = "xxxxxxxxx";
}
Aşağıda bir örnek verilmiştir. Bu örneğin Index.aspx sayfasına yazıldığı zaman sadece o sayfada Adres bilgisi görünürken diğer layout kullanan sayfalarda adres bilgisi görünmeyecektir.
@section adres{
<span>
Kadıköy-İstanbul
</span>
}
Bu kısa açıklamadan sonra uygulamamıza devam edebiliriz.
5) body kapanış tagının hemen üstüne yani script ifadelerinin altına aşağıdaki ifadeyi yazalım.
@RenderSection("scripts",false)
6) Yeni bir SQL veri tabanını App_Data klasörü içinde oluşturalım.
7) SQL Server Database seçimi yaptıktan sonra yüksel6.mdf adı ile oluşturalım.
Server Explorer kısmından veri tabanımızı açarak Add New Table seçeneğine tıklayalım.
8) Şekildeki gibi tasarlayarak Manav adı ile kaydedelim. Burada Id satırının Identity özelliği (1,1) yapılarak otomatik olarak artması sağlanmıştır.
9) İçine aşağıdaki kayıtları girelim.
10) Model klasörü üzerinde sağ tuşa basarak Add/New Item seçeneğine tıklayalım.
11) Data kısmından ADO.NET Entity Data Wizard seçimi yaparak ismine manav1 yazalım.
12) Empty EF Designer model seçimi yaparak Finish butonuna basalım.
13) Sağ tuşa basarak Update Model from Database seçimi yapalım.
14) Veri tabanını seçelim.
15) Tablomuzu seçerek Finish butonuna basalım.
16) Şekildeki görüntü olacaktır. Kaydederek kapatalım.
17) Models altında şekildeki gibi dosyamız oluşacaktır.
18) Controllers üzerinde sağ tuşa basarak Add/Controller seçimi yapalım.
19) Şekildeki seçimi yaparak Add butonuna basalım.
20) Projemizi derleyelim. Ardından şekildeki bilgileri girerek onaylayalım.
21) Şekildeki View’lar otomatik olarak oluşacaktır.
22) Test etmek için RouteConfig dosyasındaki Home ifadesini Manavs olarak değiştirelim.
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Manavs", action = "Index", id = UrlParameter.Optional }
);
23) Projemizi yüklediğimizde tüm işlemleri yapabildiğimizi gözlemleyelim.
24) _Layout.cshtml sayfasının footer kısmına aşağıdaki ifadeyi ekleyelim.
25) Index.cshtml dosyasına aşağıdaki ifadeleri ekleyelim.
26) Projemizi yüklediğimizde Index sayfasına bu adres bilgisi şekildeki gibi eklenecektir.
27) Ancak Create sayfasına geçtiğimizde şekildeki gibi hata mesajı ile karşılaşacağız.
28) Bunu önlemek için _Layout sayfasında eklemiş olduğumuz ifadenin sonuna false ekliyoruz.
Projeyi yüklediğinizde artık hata ile karşılaşmayacaksınız ve adres bilgisi sadece Index sayfasında görüntülenecektir.
29) Controllers üzerinden sağ tuşa basarak HomeController isimli yeni bir kontroller’ı boş olarak ekleyelim
30) Kodlar üzerinde sağ tuşa basarak Add View seçeneğine tıklayalım.
31) Şekildeki gibi yapılandıralım.
32) Bu yeni View(Index) içine aşağıdaki kodları ekleyelim.
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<br />
<br />
<a href="#" class="btn btn-success" id="btnListele">Listeler</a>
<br />
<br />
<ul id="ulList"></ul>
33) HomeController.cs dosyasına geçerek aşağıdaki action’ı ekleyelim.
public JsonResult Listeler()
{
ders6.Models. manav1Containerdb = new ders6.Models. manav1Container ();
return Json(db.Manav.ToList(), JsonRequestBehavior.AllowGet);
}
34)RouteConfig dosyamızda kontroller bilgisini Home olarak değiştirip çalıştırdığımızda görüntü şekildeki gibi olacaktır.
35) Home klasörü içindeki Index sayfamızdaki tüm kodlar aşağıdaki gibi olsun
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts{
<script type="text/javascript">
$(function () {
$('#btnListele').on("click", function (e) {
e.preventDefault();
$.ajax({
url: '/Home/Listeler/',
type: 'GET',
dataType: 'json',
success: function (data) {
$(data).each(function (index, item) {
$('#ulList').append("<li>" + item.ad + "</li>");
});
}
});
});
});
</script>
}
36) Çalıştırıp Listeler butonuna tıkladığımız zaman görüntü şekildeki gibi olacaktır. Buradan Copy-Paste yapıyorsanız tek tırnaklara dikkat edin.
37) Kodumuzu aşağıdaki gibi değiştirelim.
@section scripts{
<script type="text/javascript">
var i = 0; var t = 0;
$(function () {
$('#btnListele').on("click", function (e) {
e.preventDefault();
$.ajax({
url: '/Home/Listeler/',
type: 'GET',
dataType: 'json',
success: function (data) {
$(data).each(function (index, item) {
i++;
$('#ulList').append("<li>" + i.toString() + "</li>");
t = t + i;
$('#ulList').append("<li>" + item.ad + "==>" + item.detay + "</li>" + "<p/>");
});
$('#ulList').append("<hr/>" + "<li>Toplam:" + t.toString() + "</li>");
}
});
});
});
</script>
}
38) Çalıştırdığımızda görüntü şekildeki gibi olacaktır.
Kullanışlı bir Grid yapısı olan WebGrid’i bir önceki uygulamamıza devam ederek gerçekleştireceğiz.
39) HomeController içine aşağıdaki Action’ı ekleyelim.
public ActionResult BenimGrid()
{
ders6.Models.manav1Container db = new ders6.Models.manav1Container();
return View(db.Manav.ToList());
}
40) Bununla ilintili View’ı Home klasörü altında oluşturalım.
41) BenimGrid sayfasına aşağıdaki kodları ilave edelim.
@{
var grid = new WebGrid(Model);
<div>
@grid.GetHtml()
</div>
}
42)Home kontrolü içindeki Index.cshtml dosyasına aşağıdaki kodu üst kısma veya canınız bu linkin nerde görünmesini isterseniz oraya ilave ediniz
<a href="Home\BenimGrid">WebGrid Sayfasına Gidiniz…</a>
Projemizi yükleyerek Index sayfamızdan BenimGrid sayfasına geçiş yapınız.
43) Bu ASP.NET.MVC gridini çağırır. Burada her şey otomatiktir. Başlık çubuğuna tıkladığınızda o alana göre sıralama yapar.
44) Script bölgesinde bu grid’e ait birçok metodun olduğunu görebiliriz.
tableStyle
Tablonun genelinde kullanılacak olan CSS sınıfının tanımlanacağı parametredir.
headerStyle
Tablonun headerında (başlık bölümünde) kullanılacak olan CSS sınıfının tanımlanacağı parametredir.
footerStyle
Tablonun alt footerında (alt bölümünde) kullanılacak olan CSS sınıfının tanımlanacağı parametredir.
rowStyle
Tablonun satırlarında kullanılacak olan CSS sınıfının tanımlanacağı parametredir.
alternatingRowStyle
Tablonun çift numaralı satırlarında kullanılacak olan CSS sınıfının tanımlanacağı parametredir. Örneğin bir satırın beyaz bir satır mavi olmasını istiyorsanız rowStyle’a beyaz arka plan, alternatingRowStyle’a da mavi arka plan tanımlaması yapmanız gerekecektir.
selectedRowStyle
Tablonun seçili satırında kullanılacak olan CSS sınıfının tanımlanacağı parametredir.
caption
Tablonun başlığının tanımlanacağı parametredir.
displayHeader
Tablo sütun başlıklarının (header) görünüp görünmemesinin tanımlanacağı parametredir. Eğer true değeri atanırsa başlıklar görünür, false değeri atanırsa görünmez.
fillEmptyRows
Eğer gridin son sayfasındaki eleman sayısı, sayfadaki eleman sayısından az ise kalan satırların boş satırlarla doldurulup doldurulmamasının tanımlanacağı parametredir. Eğer true değeri atanırsa kalan satırlarda boş satır görünür, false değeri atanırsa görünmez.
emptyRowCellValue
Eğer fillEmptyRows değeri true ise boş satırlara atanacak değerin tanımlanacağı parametredir.
columns
Grid sütunlarında hangi verilerin yer alacağının tanımlanacağı parametredir.
exclusions
Eğer fillEmptyRows değeri true ise boş satırlara değer atanması istenmeyen sütunların tanımlanacağı parametredir.
mode
Gridin sayfalama yönteminin tanımlanacağı parametredir.
firstText
Grid üzerinde sayfalama yapıldığında ilk sayfa linkine tanımlanacak metin ifadesidir.
previousText
Grid üzerinde sayfalama yapıldığında önceki sayfa linkine tanımlanacak metin ifadesidir.
nextText
Grid üzerinde sayfalama yapıldığında sonraki sayfa linkine tanımlanacak metin ifadesidir.
lastText
Grid üzerinde sayfalama yapıldığında son sayfa linkine tanımlanacak metin ifadesidir.
numericLinksCount
Sayfalama yapıldığında kaç adet sayfa numarasının görüntüleneceğinin tanımlanacağı parametredir.
45) Kodumuzu aşağıdaki gibi değiştirerek çalıştırdığımızda başlık bilgilerini değiştirdiğimizi ve bir üst başlık eklediğimizi görebilirsiniz.
@{
var grid = new WebGrid(Model);
<div>
@grid.GetHtml(
caption:"BİZİM MANAV",
columns: grid.Columns(
grid.Column("Ad", "Ürün Adı"),
grid.Column("Detay", "Geldiği Yer"),
grid.Column("ID", "Sıra No")
))
</div>
}
Görüntü şekildeki gibi olacaktır.
46) Üsteki grid tanımlamasını değiştirerek varsayılan olarak AD’a göre sıralayalı ve sayfalama yapalım.
@{
var grid = new WebGrid(Model, defaultSort: "Ad", rowsPerPage: 2);
<div>
@grid.GetHtml(
caption:"BİZİM MANAV",
columns: grid.Columns(
grid.Column("Ad", "Ürün Adı"),
grid.Column("Detay", "Geldiği Yer"),
grid.Column("ID", "Sıra No")
))
</div>
}
Görüntü şekildeki gibi olacaktır.
47) Kodumuzu aşağıdaki hale getirerek sayfayı yükleyelim.
@{
var grid = new WebGrid(Model, defaultSort: "Ad", rowsPerPage: 3);
<div>
@grid.GetHtml(tableStyle: "webGrid",
caption:"BİZİM MANAV",mode: WebGridPagerModes.All,
columns: grid.Columns(
grid.Column("Ad", "Ürün Adı") ,
grid.Column("Detay", "Geldiği Yer"),
grid.Column("ID", "Sıra No")
))
</div>
<style type="text/css">
.webGrid { margin: 4px; border-collapse: collapse; width: 500px; background-color:#B4CFC3;}
.header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
.webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E4E9F5; color: #000; }
.gridHead a:hover {text-decoration:underline;}
.description { width:auto}
.select{background-color: #71857C}
</style>
}
Görüntü şekildeki gibi olacaktır.
48) Son olarak aşağıdaki formatı uygulayarak görüntüleyelim.
@{
ViewBag.Title = "BenimGrid";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>BenimGrid</h2>
<style type="text/css">
.webgrid-table {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.2em;
width: 100%;
display: table;
border-collapse: separate;
border: solid 1px #98BF21;
background-color: white;
}
.webgrid-table td, th {
border: 1px solid #98BF21;
padding: 3px 7px 2px;
}
.webgrid-header {
background-color: #A7C942;
color: #FFFFFF;
padding-bottom: 4px;
padding-top: 5px;
text-align: left;
}
.webgrid-footer {
}
.webgrid-row-style {
padding: 3px 7px 2px;
}
.webgrid-alternating-row {
background-color: #EAF2D3;
padding: 3px 7px 2px;
}
</style>
<h2>Index</h2>
@{
var grid = new WebGrid(Model);
}
<div id="gridContent" style=" padding:20px; ">
@grid.GetHtml(
tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
columns:
grid.Columns(
grid.Column(columnName: "Id", header: "Ürün No", format: @<text>@item.Id</text>),
grid.Column(columnName: "ad", header: "Ürün Ad", format: @<text>@item.ad</text> ),
grid.Column(columnName: "detay", header: "Geldiği Yer", format: @<text>@item.detay</text>)
))
</div>
Not:ColumnName önemlidir. Tablo başlıkları ile aynı olsun yoksa sıralama yapmaz.
Görüntü şekildeki gibi olacaktır.
ÖNEMLİ NOT:Veri tabanının her ortamda kullanılabilmesi için Web.config içindeki yolu aşağıdaki hale getirmeniz gerekir.
attachdbfilename=|DataDirectory|\yuksel.mdf