ASP.NET MVC 4 ÇIKTI
ASP.NET MVC 4 hakkında kısaca yeni çıkan başlıklardan bahsedeceğim.
Bundling and Minification ; asp.net 4.5 ve asp.net mvc 4 ile birliktede gelen bu özellikler, HTTP requests azaltarak kolayca CSS dosyalarımızı ve JS dosyalarının caahe tutumu ve tutum sayesinde herhangi bir değişiklik yapılmasındada yenisinin yüklenme süresini azaltmaktadır. “cache busting” helper methods sayesinde bu işlemleri kolaylıkla asp.net mvc 4 projelerimizde uygulayabiliriz.
Database Migrations ; asp.net mvc 4 ile birlikte Entity Framework 4.3 de desteklemektedir.
Web API ;ASP.NET MVC 4 ile birlikte fantastik sayılabilecek kadar iyi olan Web APIs, kolaylıkla projelerimizde HTTP services ve APIs uygulamalarını programlama olarak daha kolay uygulamız içindir. Unutmadan, RESTful services yazılımlarımız için ideal çözümdür.
Mobile Web ; asp.net mvc 4 ile birlikte daha kolaylaşan arayüzlerle birlikte mobil web uygulamaları and mobil web siteleri hazırlanabilecek. Tabi unutmadan akıllı telefonlar ve tablet pc ler için özel çözümlerde bulunmaktadır.
Razor Enhancements ; asp.net mvc 4 ile birlikte Razor V2 de daha kullanışlı bir hale gelmiştir.
Async Support and WebSockets ; ASP.NET MVC 4 runtime ( çalışma zamanında ) ile birlikte bir çok yeni özelliğe sahip async programcılığıda desteklemektedir.
asp.net mvc kod örnekleri
asp.net mvc kod örnekleri hakkında aradığınız herşeyi bu sitede bulabilirsiniz. Sitemizde yayınladığımız kodlar sadece eğitmen gözüyle değil uygulamacı mantığıyla, projelerimizde uygulayıp, çalışan kod örnekleridir. asp.net mvc ile yapılmış projeler için eticaret buradan ulaşabilirsiniz.
Yeni Bir ASP.NET MVC Projesi Oluşturma
İlk MVC Uygulamasına Giriş
Visual Studio 2010 ile yeni bir MVC proje oluşturarak başlıyoruz
Şekil – 1
Şekil-1‘ de görüldüğü üzere, Yeni Proje açmak için File menüsünden New Project seçin .Web şablonları seçip, MVC 3 yüklediyseniz. Şekil-2 da gösterildiği gibi, ASP.NET MVC 3 Web Uygulama adında yeni bir öğe oluşturacağız.
Şekil – 2 – Visual Studio MVC 3 Proje Şablonu
Dikkat: Yeni bir proje oluştururken, doğru olanı seçmek için dikkatli olun.
Yeni proje adını verin ve devam etmek için Tamam düğmesine tıklayın.Şekil-3 de gösterilen üç farklı tipte MVC proje şablonları arasında seçim yapmak istersek açılan pencereden seçim yaparız.
Şekil -3 MVC 3 Proje Seçimi
Boş seçenek sadece MVC 3 uygulama için gerekli minimum dosya ve klasörleri bir proje oluşturur. İnternet Uygulaması (internet application) seçeneği aracılıyla küçük bir örnek uygulama oluşturur. Kullanıcı kaydı ve kimlik doğrulama, başlık gezinti butonları ve hazır bir görseli ile birlikte css ve jquery dosyalarını içerir. Intranet Uygulama seçeneği İnternet Uygulamaları benzer, ancak bir etki alanı / Active Directory altyapısı ile kullanıcıların kimliğini doğrulamak ortamlarda kullanılmak üzere tasarlanmıştır. Bu bölümde, biz, razor view engine ile internet uygulaması seçeneğinden giderek örmeklerimize devam edeceğiz.
Visual Studio 2010, bizim için hazır örnek bir asp.net mvc 3 projesi oluşturur. Solution Explorer penceresinde görüntülenir dosyaları ve klasörleri bir dizi göreceksiniz. Bu bir MVC 3 proje için varsayılan bir yapıdır. Uygulamamızı çalıştırmak için Debug menüsünden Start Debugging ( Klavyeden Kısa yol; F5 butonuna basabilirsiniz. ) seçerek derleyebilirsiniz. Derlediğimiz ilk asp.net mvc projemizin ekran çıktısını şekil-4 de görebilirsiniz.
şekil-4
Makalemizle ilgili soru ve önerileriniz için yorum yazmayı unutmayınız.
İyi çalışmalar dileriz.
Google Weather API for ASP.NET MVC
Global.asax.cs dosyasına aşağıdaki kodu ekleyin
routes.MapRoute(
"HavaDurumu",
"havadurumu/{il}",
new { controller = "Web", action = "HavaDurumu", il = (string)null }
);
Controller dosyanıza aşağıdaki kodu yazıyorsunuz.
public ActionResult HavaDurumu(string il)
{
HttpWebRequest GoogleRequest;
HttpWebResponse GoogleResponse = null;
XmlDocument GoogleXMLdoc = null;
try
{
GoogleRequest = (HttpWebRequest)WebRequest.Create("http://www.google.com/ig/api?weather=" + string.Format(il));
GoogleResponse = (HttpWebResponse)GoogleRequest.GetResponse();
GoogleXMLdoc = new XmlDocument();
GoogleXMLdoc.Load(GoogleResponse.GetResponseStream());
XmlNode root = GoogleXMLdoc.DocumentElement;
XmlNodeList nodeList1 = root.SelectNodes("weather/forecast_information");
ViewBag.HavaDurumu = ViewBag.HavaDurumu + "<b>City : " + nodeList1.Item(0).SelectSingleNode("city").Attributes["data"].InnerText + "</b>";
XmlNodeList nodeList = root.SelectNodes("weather/current_conditions");
ViewBag.HavaDurumu = ViewBag.HavaDurumu + "<table class=\"bordered\" cellpadding=\"5\"><tbody><tr><td><b><big><nobr>" + nodeList.Item(0).SelectSingleNode("temp_c").Attributes["data"].InnerText + " °C | " + nodeList.Item(0).SelectSingleNode("temp_f").Attributes["data"].InnerText + " °F</nobr></big></b>";
ViewBag.HavaDurumu = ViewBag.HavaDurumu + "<b>Current:</b> " + nodeList.Item(0).SelectSingleNode("condition").Attributes["data"].InnerText + "";
ViewBag.HavaDurumu = ViewBag.HavaDurumu + " " + nodeList.Item(0).SelectSingleNode("wind_condition").Attributes["data"].InnerText + "";
ViewBag.HavaDurumu = ViewBag.HavaDurumu + " " + nodeList.Item(0).SelectSingleNode("humidity").Attributes["data"].InnerText;
nodeList = root.SelectNodes("descendant::weather/forecast_conditions");
foreach (XmlNode nod in nodeList)
{
ViewBag.HavaDurumu = ViewBag.HavaDurumu + "</td><td align=\"center\">" + nod.SelectSingleNode("day_of_week").Attributes["data"].InnerText + "";
ViewBag.HavaDurumu = ViewBag.HavaDurumu + "<img src=\"http://www.google.com" + nod.SelectSingleNode("icon").Attributes["data"].InnerText + "\" alt=\"" + nod.SelectSingleNode("condition").Attributes["data"].InnerText + "\">";
ViewBag.HavaDurumu = ViewBag.HavaDurumu + nod.SelectSingleNode("low").Attributes["data"].InnerText + "°F | ";
ViewBag.HavaDurumu = ViewBag.HavaDurumu + nod.SelectSingleNode("high").Attributes["data"].InnerText + "°F";
}
ViewBag.HavaDurumu = ViewBag.HavaDurumu + "</td></tr></tbody></table>";
}
catch (System.Exception ex)
{
ViewBag.HavaDurumu = ex.Message;
}
finally
{
GoogleResponse.Close();
}
return View();
}
HavaDurumu Views dosyanıza ViewBag.HavaDurumu nu yazdırdığınızda aşağıdaki sonuca erişmiş olacaksınız. Kodu istediğiniz gibi düzenleyebilirsiniz iyi çalışmalar.
Asp.Net MVC çoklu dil desteği
protected override void OnActionExecuting(ActionExecutingContext filterContext)
{
base.OnActionExecuting(filterContext);
if (RouteData.Values.First().Value != null)
{
try
{
if (RouteData.Values.First().Value.ToString() == "tr")
{
Thread.CurrentThread.CurrentCulture = new CultureInfo("tr-TR");
Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
}
if (RouteData.Values.First().Value.ToString() == "en")
{
Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");
Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
}
if (RouteData.Values.First().Value.ToString() == "de")
{
Thread.CurrentThread.CurrentCulture = new CultureInfo("de-DE");
Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
}
}
catch (Exception ex)
{
Thread.CurrentThread.CurrentCulture = new CultureInfo("tr-TR");
Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
}
}
}
ilgili yada etkilenmesini istediğimiz controller içerisine yukarıdaki kod parçası yapıştırılır.
App_GlobalResources Klasösürünün içersinde ilgili eklenecek dosyaların çevirileri bulunması gereklidir.
Örnek: Strings.resx (Default) , Strings.en-US.resx …. şeklinde çoğaltılabilir.
Ve son olarak ilgili action içerisinde parametre ile dil seçeneğine veriler getirilir.
public ActionResult Anasayfa(string dil)
{
if (dil == "de")
{
//..........
}
else if (dil == "en")
{
//.................
}
else
{
//.........(default dil)
}
ViewBag.Dil = dil;
return View();
}
Yıkarıda asp.net mvc ile çoklu dil desteği için yapılması düşünülen projenize yardımcı olması açısından küçük bir örnek paylaştım. Makalemizle ilgili soru ve önerileriniz için yorum yazmayı unutmayınız.
İyi çalışmalar dileriz.
MVC String.Format
| String yenistring= String.Format(“Birim Fiyatı : {0}”,fiyat); |
Burada {0} ifadesiyle, ifadenin yerine fiyat isimli değişkenin geleceğini belirtiyoruz. Bu şekilde birden fazla da değişken tanımlaması yapabiliriz, ancak burada değişkene hiçbir format uygulamadık. Sadece indeks {0} da yazılabildiği gibi, aşağıdaki gibi köşeli parantezlerin içersindeki opsiyonel olan parametrelerde alabilir.
{ index[,alignment][:formatString]}
alignment : hizalama + veya – tamsayı değerlerini alabilir, + sağa dayalı, – ise sola dayalı sıralanmasını sağlar. Örneğin;
| String.Format(“> {1,10}< ”, “Sağa”); Çıktısı: > Hello< String.Format(“>{1,-10} <”, “Sola”); Çıktısı: >Hello < |
:formatstring : format katarı
Dikkat ederseniz alignment virgül(,) ile ayrılırken, formatstring’i üst-üste iki nokta(:) ile ayırıyoruz. Formatstring parametresi değişkenlerin belirli bir formatta gösterilmesini sağlamaktadır. Örneklere bakacak olursak kullanım biçimi kolayca anlaşılabilir.
Basit Format:
| Belirteç | İsmi | Format | Örnek 1(double 2.25 için) | Örnek 2 (int 22500 için) |
| C veya c | Currency | {0:c} | 2,25 YTL | 22.500,00 YTL |
| D veya d | Decimal | {0:d} | Hata | 22500 |
| E veya e | Exponential | {0:e} | 2,250000e+000 | 2.250000e+004 |
| F veya f | Fixed-point | {0:f} | 2,25 | 22500,00 |
| G veya g | General | {0:g} | 2,25 | 22500 |
| N veya n | Number | {0:n} | 2,25 | 22.500,00 |
| P veya p | Percent | {0:p} | %225,00 | %2.250.000,00 |
| R veya r | Round-Trip | {0:r} | 2,25 | Hata |
| X veya x | Hexadecimal | {0:x} | Hata | 57e4 |
Örnek
| VB | C# |
| Dim girdi as Double Dim cikti as String girdi=2.25 cikti=String.Format(“{0:c}”,girdi)Sonuç ——————————Cikti=2,25 YTL |
double girdi; string cikti; girdi=2.25; cikti=String.Format(“{0:c}”,girdi);Sonuç ——————————Cikti=2,25 YTL |
Özel Format:
| Belirteç | İsmi | Format | Örnek1(1200.35 için) |
| 0 | Zero placeholder | {0:00.0000} | 1200,3500 |
| # | Digit placeholder | {0:(#).##} | (1200),35 |
| . | Decimal point | {0:0.0} | 1200,4 |
| , | Thousand separator | {0:0,0} | 1.200 |
| ,. | Number scaling | {0:0,.} | 1 |
| % | Percent | {0:0%} | 120035% |
| e | Exponent placeholder | {0:00e+0} | 12e+2 |
Örnek
| VB | C# |
| Dim girdi as Double Dim cikti as String girdi=1200.35 cikti=String.Format(“{0:(#).##}”,girdi)Sonuç ——————————Cikti=(1200),35 |
double girdi; string cikti; girdi=1200.35; cikti=String.Format(“{0:(#).##}”,girdi);Sonuç ——————————Cikti=(1200),35 |
Tarih Formatlama
| Belirteç | isim | Örnek(DateTime.Now() için) |
| d | Short date | 01.04.2005 |
| D | Long date | 01 nisan 2005 Cuma |
| t | Short time | 20:24 |
| T | Long time | 20:24:27 |
| f | Full date & time | 01 Nisan 2005 Cuma 20:24 |
| F | Full date & time (long) | 01 Nisan 2005 Cuma 20:24:27 |
| g | Default date & time | 01.04.2005 20:24 |
| G | Default date & time (long) | 01.04.2005 20:24:27 |
| M | Month day pattern | 01 Nisan |
| r | RFC1123 date string | Fri, 01 Apr 2005 20:24:27 GMT |
| s | Sortable date string | 2005-04-01 20:24:27 |
| u | Universal sortable, local time | 2005-04-01 T20:24:27Z |
| U | Universal sortable, GMT | 01 Nisan 2005 Cuma 17:24:27 |
| Y | Year month pattern | Nisan 2005 |
Örnek
| VB | C# |
| Dim girdi as DateTime Dim cikti as String girdi = DateTime.Now() cikti=String.Format(“{0:M}”,girdi)Sonuç ——————————Cikti=01 Nisan |
DateTime girdi; string cikti; girdi = DateTime.Now; cikti=String.Format(“{0:M}”,girdi);Sonuç ——————————Cikti=01 Nisan |
Özel Tarih Formatlama
| Belirteç | İsmi | Örnek | Örnek Çıktısı |
| dd | Day | {0:dd} | 01 |
| ddd | Day Name | {0:ddd} | Cum |
| dddd | Full Day Name | {0:dddd} | Cuma |
| f, ff, … | Second fractions | {0:fff} | 531 |
| gg, … | Era | {0:gg} | A.D. |
| hh | 2 dgit hour | {0:hh} | 08 |
| HH | 2 digit hour(24 Hour) | {0:HH} | 20 |
| mm | Minute 00-59 | {0:mm} | 53 |
| MM | Minute 01-12 | {0:MM} | 04 |
| MMM | Month abbreviation | {0:MMM} | Nis |
| MMMM | Full month name | {0:MMMM} | Nisan |
| ss | Seconds 00-59 | {0:ss} | 56 |
| tt | AM or PM | {0:tt} | * |
| yy | Year, 2 digits | {0:yy} | 05 |
| yyyy | Year | {0:yyyy} | 2005 |
| zz | Timezone offset, 2 digits | {0:zz} | +03 |
| zzz | Full timezone offset | {0:zzz} | +03:00 |
| : | Separator | {0:hh:mm:ss} | 08:53:56 |
| / | Separator | {0:dd/MM/yyyy} | 01/04/2005 |
Örnek
| VB | C# |
| Dim girdi as DateTime Dim cikti as String girdi = DateTime.Now() cikti=String.Format(“{0:ddd}”,girdi)Sonuç —————————Cikti=Cum |
DateTime girdi; string cikti; girdi = DateTime.Now; cikti=String.Format(“{0:ddd}”,girdi);Sonuç —————————Cikti=Cum |
* Dil olarak İngilizce ayarlanmışsa PM/AM değerlerini göstermektedir, Türkçe ise boş dönmektedir.
Ekstra Örnek1:
| String.Format(“{0:#,###.00;-#,###.00;0}”, değer); |
Burada ilk format pozitif sayılar için, ikinci format negatif sayılar ve son format da 0(sıfır) girildiğinde uygulanır; değerin veri türü double’ dır.
| Girdi: 12050.230 Çıktı: 12,050.23 Girdi: -12050.230 Çıktı: -12,050.23 Girdi: 0 Çıktı: 0 |
Ekstra Örnek2:
| String.Format(“{0:(###) ###-####}”, 8005551212); Çıktı : (800) 555-1212 |
NOT: Formatlamada formatlama yapacağımız veri türü önemlidir, mesela sayı formatlarında double veya int, tarih için datetime, metin için ise string türünde değişkenlerinin girilmesi gerekir.
Formatlama hakkında daha detaylı bilgi için http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpconFormattingOverview.asp?frame=true
String.Format(“{0:0,0}”, sonuc)
Identity Alanını Sıfırlamak ( 0 ) – identity değerini belirlemek
Genelde tablolarımıza bir adet primary key alanı tanımlayıp bunu identity olarak ayarlarız ve her kayıt girildiğinde 1 artmasını sağlarız. Denemelerimizi tamamladıktan sonra artık projemizi yayınlamaya başlayacağımız ana gelir. Fakat bizim tablolarımızdaki tüm identity alanlarının farklı sayılardan başladığını fark ederiz. Üye tablosunun ilk Id si 542 olurken ürün tablosunun ilk idsi 2354 dir. Bu alanları 1 den başlatmak için yani “0″ sıfırlamak için
TRUNCATE TABLE
komutunu kullanırız. Eğer tablomuzu başka tablolara bağladı isek foreing key ler ile bu kod hata verecektir ve çalışmayacaktır. Eğer bu kodu çalıştıramazsak
DBCC CHECKIDENT (tabloadi, RESEED, 0)
kodu identity alanının 0 dan başlamasını sağlayacaktır. “0″ sıfır değerinin yerine başka bir değer yazdığınızda ilk verilecek değer “0″ sıfırın yerine yazdığınız değerdir.
Yeri geldiğinde 7 basamaklı sayılar kullanmaya başlayacaksınız. Artık bunu başındaki “0″ sıfırlar görünmez diyemi yaparsınız onu bilmiyorum ama bazı sistemlerde
DBCC CHECKIDENT (tabloadi, RESEED, 1000000)
kodunu kullanmanız gerekebilir. Bu şekilde de id değerleriniz 1.000.001 den başlayacaktır ve 9.999.999 kayıta kadar sıralama sorun olmayacaktır.
Bazı sistemlerden kaynaklanan aşağıdaki hatalar oluşmasın diye identity 1.000.000 dan başlata bilirsiniz.
1 10 11 12 13 14 2 21 22 3 35 gibi 1000000 dan başlarsak. Sorgu sonucu aşağıdaki gibi dönecektir. 1000001 1000002 1000003 1000010 1000011 1000012 1000013 1000014 1000021 1000022 1000035
The INSERT statement conflicted with the FOREIGN KEY constraint “FK_Table_Colum”. The conflict occurred in database “DB”, table “dbo.Table2″, column ‘Table2ID’. The statement has been terminated.
2 tabloyu FOREIGN KEY ile ilişkilendirdiğimizde kayıt girişi sırasında ilişkilendirdiğimiz alanlardaki veriler bir biri ile aynı olmalıdır. Tablo 2 de ekli olan seçeneklerin ID’leri dışında bir veri tablo birin referans alanına girilemez.
Örneğin : Tablo 2
ID İL
1 Adana
6 Ankara
7 Antalya
ise
Tablo 1 in ReferansILID alanına 1-6 ve 7 rakamları haricindeki sayılar girilemez. Eğer NULL veri girişine izin verdi iseniz bu rakamların dışında NULL olarakta alanımızı belirtebiliriz.
LinQ ile veri girişi esnasında kullandığım basit bir çözüm yöntemini aşağıda inceleyebilirsiniz.
public ActionResult VeriEkle(int? ReferansILID )
{
int kontrol = 0;
Model bilgiler = new Model();
{
kontrol = ReferansILID ?? 0;
if(kontrol>0)
bilgiler.ReferansILID = ReferansILID ;
}
return View();
}
A dependent property in a ReferentialConstraint is mapped to a store-generated column. Column: ‘ID’.
Kayıt girdiğimiz tablonun identity olarak tanımlı ID sütunu foreign key ile başka bir tablonun her hangi bir alanına bağlandığı zaman bu hatayı alırız. Foreign Key işlemi ile yanlışlıkla ID alanını bağladığımızda ID miz kendisi artarak geldiği için başka bir tablodan alma işlemi sırasında hata verecektir. Foreign Key i düzelttiğiniz de yada sildiğiniz de işleminiz hata vermeden tamamlanacaktır.
ASP.NET MVC Site Tasarımı
Bir site tasarlamak, geliştirmek, genellikle herhangi bir belirli bir düzen önce son bir site ne gibi görünebilir size göstermek için (ücretsiz bir alternatif istiyorsanız),Adobe Photoshop veya Paint.NET gibi bir grafik uygulaması ile bir mock-up oluşturmak veya HTML kodlama.
Mock-up, sonra kodlama ile devam etmek için bir karar verebilirsin çeşitli modeli, kullanıcıların, test ve yöneticileri, etrafında bu gösterebilir. Gösteren Şekil-1 de gösterildiği gibi, basit bir resim oluşturabilirsiniz
içerik nasıl sayfanın çeşitli alanlarda ortaya konulan olacaktır.
Bu bir başlık ve altbilgi, tipik bir iki sütun düzeni.Düzeni kabul olur, gerçek grafik ve HTML ile yeniden oluşturmanız gerekir. Ortalama olarak, gerçek HTML yerine bu mock-up, görüntü olarak üretmek için bir grafik tasarımcı için daha az zaman alır, çünkü grafik programı bunu yapın sayfaları. Sonra, istemci mock-up Nihai olarak onaylanmış, grafik tasarımcı, mock-up görüntü bir HTML sayfası kullanabileceğiniz küçük parçalar halinde kesebilirsiniz.
Mock-up oluşturma, doğası gereği çok sanatsal olmayanlar bizler için her zaman kolay değildir.Başkasının, profesyonel bir grafik tasarımcı, grafik tasarım oluşturmak için, geliştiriciler (bizim gibi) ve daha sonra uygulama etrafında inşa edecek olması nedeniyle genellikle orta veya büyük ölçekli bir şirket için bu bir sorun değildir. Bu ara yüz tasarımı konusunda uzmanlaşmış bir kişi bulmak önerilir; genellikle yerel bir üniversitede veya yazılım geliştiricileri ile grafik tasarımcıları bir araya getiren uzman pek çok web sitesi biri üzerinde bir grafik tasarımcı bulabilirsiniz. Bir ön uç düzeni gelişmekte olan veritabanı oluşturma ve iş katmanı çengel başlatmak için çekinmeyin, çünkü görsel olarak çekici bir web sitesi düzeni oluşturmak için bir grafik tasarımcı aslında bize daha üretken yapar. Genellikle, tasarımı ile bitmiş ve biz görünümüne denetleyicisi çengel, iş mantığı,ya da MVC durumda web sitesinin düzeni uygulamaya başlamak için hazır zaman yönetim tarafından onaylanmış oldu.
Ancak, bazen kendiniz grafik tasarım oluşturma ile karşı karşıya iseniz ve bir grafik tasarımcı kiralamak için kaynakları yoksa bir şablon mağaza yardımı yararlı ve ucuz olabilir. Bu kitapta ele alınan web sitesi oluşturmak amacı için, biz, bir başlangıç noktası olarak kullanabilirsiniz, iyi görünümlü bir site tasarım oluşturmak için Free CSS Templates (www.freecsstemplates.org) kullanılır. Başlamak için gerekli tüm HTML ve PNG dosyaları ile CSS tabanlı bir düzen sağladı.Daha sofistike bir tasarım tercih ederseniz Template Monster (www.templatemonster.com) denemek isteyebilirsiniz. PSD dosyaları (Photoshop ile açılacak), gerekli görüntü dosyaları ve görüntüleri zaten kesilmiş ve CSS kullanarak yerleştirilmiş bazı HTML sayfaları olarak tasarım içerir. Biz kendi stilleri oluşturmak ve HTML biçimlendirme özelleştirmek için istedim, ama görsel bir şablon ile başlamak çok yararlı oldu çünkü önceden oluşturulmuş HTML sayfalarını birebir kullanmak mümkün olmadığını bulundu. Bu site tasarım uygun kişilere satmak yardımcı olabilir erken oyunda profesyonel hissediyorum.
Tasarım Uygulamak İçin Kullanılan Teknolojiler
Ancak, ASP.NET, kullanıcının bilgisayarında çalıştırmak değildir, bunun yerine,dinamik bir tarayıcı sayfasını oluşturmak için kullandığı unsurlarını oluşturur. Tarayıcıya indirdik Bu unsurlar, HTML, resimleri, JavaScript ve HTML Document Object Model (DOM) çeşitli öğeleri, renkler, boyut, ve ittifaklarının sağlayan Cascading Style Sheets (CSS) oluşur. HTML, çeşitli şekillerde tanımlanmıştır.Visual Studio kontrolleri form üzerine düşmesi görsel form tasarımcısı kullanabilirsiniz ve bu HTML kodunu otomatik olarak oluşturur; Ancak, bu yöntem ASP.NET MVC HTML biçimlendirme üzerinde kontrol odağı ve vurgu, çünkü daha az yararlıdır. Ya da, el-editörü yazar kendi HTML kodunu daha sıkı, daha profesyonel hissediyordur; HTML bakmak bakımı, bu kodlama stilleri ve alışkanlıkları içine dış kullanıcılar iç görü biraz verecektir.
ASP.NET 1.x modeli ”arkasında kod” kullandı: HTML (ve bazı sunum odaklı C # kodu) bir aspx dosyası koymak ve uygulama C # kodu tarafından miras olacaktır ayrı bir dosya içine gideceğini aspx dosya.Görsel web sayfası tanımlanır çünkü. Aspx dosyası ”sayfa” diyoruz. Bu sunum kodu ve ilgili uygulama kodu arasında bir ayrım sağladı. Bir sorun bu model ile, form tasarımcısı tarafından oluşturulan otomatik olarak oluşturulan kod geliştirici kendi kodu için kullandığı aynı dosyaları yerleştirilmiş olacağını. Bu. NET Framework kısmı sınıfları olarak adlandırılan yeni bir özellik kullanılan ASP.NET 2.0 code-behind modeli, biraz düzeldi. Fikir basittir: bir sınıfın birden fazla dosya span izin. Visual Studio kontrolleri ilan ve olayları kayıt zamanı kodu otomatik üretecek vedaha sonra bu kullanıcı tarafından yazılmış bir kod ile bir araya getirecektir; Sonuç, tek bir sınıf. aspx sayfası tarafından miras. @ Page direktifi ilan etti. Aspx sayfası kullanıcı tarafından yazılmış bir kod. Cs kod arkasında dosya referans CodeFile niteliğini kullanır.
ASP.NET MVC kod ayrılığı kavramı, arkasında kullanıcı arabirimi veya görmek için dosyaları kodu kullanmak gereksiz yaparak bir adım daha ileri götürüldü. İle etkileşim görünümü denetleyicileri taşındı kod; bu şimdi görüşlerini sürmek için kullanılan temel kodu, kopyalama veya değiştirme gerek kalmadan kolayca takas ve yerine farklı bir tür olması sağlar harika bir ayrılık görünümü.
CSS Kullanarak Stil Sayfaları Tanımlayın
Cascading Style Sheets (CSS) bu kitapta ayrıntılı bir açıklama yapmak mümkün değildir, ancak bazı genel kavramları ele alacağız. CSS ile ilgili tüm ayrıntılar için başka kaynaklardan danışmalısınız.
Amacı, CSS, HTML etiketleri, yazı tipi boyutu, renk, hizalama, vb gibi çeşitli üslup unsurları belirterek CSS tarafından görsel belirtmek için kullanılır. Bu stilleri HTML etiketleri nitelikler olarak dahil olabilir, ya da ayrı ayrı saklanır ve sınıf veya ID tarafından sevk edilebilirler. Bazen, HTML dosyaları, aşağıdaki örnek olarak HTML etiketleri, kendileri kodlanmış stilleri:
<div style=”align: justify; color: red; background-color: yellow; font-size: 12px;”>some text</div>
Tüm HTML dosyalarını ve CSS öznitelikleri için avcılık içine gitmeden bu üslupöğeleri değiştirmek için zordur, çünkü bu çok kötü. Bunun yerine, her zaman ayrı bir stil tanımları koymak gerekir
sayfalık bir uzantısı css dosyası tarzı veya bir HTML dosyası içinde stilleri de dahil olmak üzere ısrar ederseniz, en azından bir <style> bölümünde HTML dosyasının üstündeki bunları tanımlamak gerekir.
Birlikte ne zaman grup CSS stilleri, sözdizimsel sınıflar ve işlevler C # benzeyen küçük sınıflar oluşturabilirsiniz.Onları sınıfta= özniteliğini başvurulan izin vermek, HTML etiketleri onlara bir sınıf adı ya da kimlik atayabilirsiniz.
Stil sınıfları kullanmak ve bu sınıfın kullanan tüm HTML etiketleri yazı tipi boyutunu değiştirmek isterseniz, sadece bu tip birçok görsel HTML öğeleri değiştirmek için bu sınıfı bulmak ve bu tek olay değiştirmek gerekir.
Aslında, tüm sayfa boyunca bu basamaklı stilleri CSS ilk iki harfi nereden geldiğini. Stil sayfası ayrı bir dosya olarak tanımlanmış olması durumunda tek bir dosya değişecek ve sayısınız bilmediğimiz sayfaları buna göre kendi görünümünü değiştirmek için, bu yaklaşım daha fazla yararlanacaktır.
CSS kullanarak birincil faydaları stilleri korumak ve ortak bir görünüm uygulamakve birçok sayfa arasında hissetmek için gerekli olan geliştirme çabası en aza indirmek için. Ancak bunun ötesinde, CSS, HTML kodu ve genel site için güvenlik sağlar. İstemci zaten üretimin içinde bir site bazı stilleri değiştirmek istediğini varsayalım. Sayfanın HTML öğeleri kodlanmış stilleri ettiyseniz, değiştirmek için stilleri bulmak için çok sayıda dosya bakmak olurdu ve tüm bunları bulmak olmayabilir, ya da yanlışlıkla başka bir şey değişebilir - bu bir şey kırılmasına neden olabilir! Ancak, CSS dosyaları ayrı bir yerde saklanan stil sınıfları olsanız bile,değiştirilmesi gereken sınıfları bulmak için kolay ve HTML kodu bakir ve güvenli olacak.
Ayrıca, CSS dosyaları ayıran bir site daha verimli hale getirmek ve bant genişliği maliyetlerini azaltmaya yardımcı olabilir. Tarayıcı bu kez indirmek ve sonra onu yakalamaya (sunucu CSS dosyası önbelleğe tarayıcı söylemek doğru ayarlanmış olduğundan emin varsayarak). Önbelleğe alınmış css dosyası için bir başvuru sayfaları, CSS dosyasını yeniden indirmek zorunda değil, isteği çok daha küçük olacak ve bu nedenle daha hızlı indirmek için. Bazı durumlarda bu, bir kullanıcının tarayıcısı web sayfalarını yükleme ve oluşturma önemli ölçüde hızlandırabilir.
İşte size stil.css adlı ayrı bir dosyada saklayarak daha önce gösterilen DIV nesne stili yeniden nasıl bir örnek:
.benimstilim {
align: justify;
color: red;
background-color: yellow;
font-size: 12px;
}
Sonra aspx veya html sayfası olarak, aşağıdaki gibi HTML, CSS dosyası bağlantısı:
<head> <link href="/Content/stil.css" text="text/css" rel="style sheet" /> <!-- other metatags… --> </head>
Son olarak, HTML bölümü etiketi yazmak ve bunu kullanmak istediğiniz CSS sınıf belirtin:
<div class="benimstilim">some text</div>
Tarzı ne zaman ilan edildi, biz sınıf adı (.) Önek nokta kullanılan unutmayın.Bu, bu tarzı bir sınıf ve bu sınıfın içeren herhangi bir öğe uygulanabilir stilleri vermektedir tarayıcı gösterir. Tüm özel stil sınıfları için bunu yapmak zorunda.
Eğer belirli bir tür (örneğin, tüm <p> paragrafları, hatta sayfa <body> etiketi) tüm HTML nesnelere uygulanacak bir stil tanımlamak istiyorsanız, stil dosyasında aşağıdaki özellikleri yazabilirsiniz:
body {
margin: 0px;
font-family: Verdana;
font-size: 12px;
}
p {
align: justify;
text-size: 10px;
}
Bu, tüm vücut etiketlerinin varsayılan stil ve tek bir yerde (paragraf) etiketleri <p>ayarlar.Ayrıca bu etiketleri açık bir sınıf adı belirten bazı paragraflar için farklı bir stil belirtebilirsiniz.
Kimliği göre bir stil sınıfı bir HTML nesnesi ilişkilendirmek için başka bir yol.Aşağıdaki gibi, # öneki ile sınıf ismini belirtiyoruz:
#ustKisim {
padding: 0px;
margin: 0px;
width: 100%;
height: 184px;
background-image: url(resim/ustKısım.gif);
}
Sonra HTML, CSS, HTML etiketinin id özniteliği kullanabilirsiniz.Örneğin, bu bir HTML bölümü etiketi nasıl tanımlamak ve bunu # başlık stili kullanmak istediğinizi belirtin:
<div id="ustKisim">some text</div>
Genellikle tek nesneler için bu yaklaşım, üstbilgi, altbilgi, kısım sol, sağ ve merkezi sütun gibi kullanımı, ve vb. Bu demektir ki, sen, bir sayfada aynı adı sadece bir kimlik tag var, aynı sayfada tarzı birden fazla etiket izin verilir, daha önce tartışılan sınıf ve eleman stilleri farklı. Yani sadece bir üstbilgi, altbilgi ve kimliği kullanarak diğer adlı elemanları HTML sözdizimi altında izin ve birden fazla varsa, bir hatadır; referans bu kimliği, CSS ve JavaScript ile sorunlara neden olabilir.
Ayrıca çeşitli yaklaşımlar karıştırın. Bölümde vücut sınıfı ile bir kap içine bağlantılar bölüm başlığı sınıfı ile bir kısım, ve diğer bazı stilleri içine tüm bağlantılar için belirli bir stil vermek istediğiniz varsayalım. Bunu bu şekilde yapabilirsiniz:
Css dosyası
.KisimBasligi a {
color: yellow;
}
.Kisimicergi a {
color: red;
}
.cshtml / .html Dosyası
<div class="KisimBasligi"> some text <a href="http://www.karayeltasarim.com">Karayel Tasarım</a> some text </div> <div class="KisimIcerigi"> some other text <a href="http://www.karayeltasarim.com">Karayel Tasarım</a> some other text </div>
Son olarak, belli sınıflar tarzı bazı unsurları istediğiniz özel durumlarda hedef için çeşitli yaklaşımların bir arada, hatta iki sınıf bir arada kombinasyonu. Yukarıdaki kod, gibi birçok unsuru olarak yakalamak için büyük bir net döküm gibi, aşağıdaki kodu, bazı köşe durumlarda hedef izin veren tersidir. Sadece sınıf bölüm başlığı ve bölüm başlığı ve ilk derece sınıfları içeren bağlantılar için farklı bir tarza sahip bağlantılar için belirli bir stil vermek istediğiniz varsayalım:
Css dosyası
a.kisimbasligi {
color: yellow;
}
a. kisimbasligi.first-instance {
color: red;
}
.aspx / .html Dosyası
<a class==" kisimbasligi first-instance"
href="http://www.karayeltasarim.com"> Karayel Tasarım </a>
some other text
<a class==" kisimbasligi" href="http://www.karayeltasarim.com"> Karayel Tasarım </a>
some other text
<a href="http://www.karayeltasarim.com"> Karayel Tasarım </a>
some other text
İlk bağlantı kırmızı renk olarak işlemek, ikinci bağlantı rengi sarı olarak işlemek ve üçüncü sayfa üzerindeki bağlantı normal hale getirecektir.
HTML Tabloları Kullanımlarından Kaçınmak
Bazen geliştiricileri, bir web sayfasındaki diğer öğeler konumlandırma kontrol HTML tabloları kullanabilirsiniz. Bu CSS geliştirilen önce standart bir uygulama olarak, ama pek çok geliştirici bugün hala bu yöntem kullanıyor. Bu çok yaygın bir uygulama olmasına rağmen, W3C resmi söyleyerek,(www.w3c.org/tr/wai-webcontent) etmemektedir:
” Tablolar gerçekten tablo bilgileri (“veri tabloları”) işaretlemek için kullanılmalıdır.İçerik geliştiriciler (“düzen tabloları”) sayfaları düzenlemek için bunları kullanmaktan kaçınmak gerekir.Herhangi bir kullanım için masalar ekran okuyucuları kullanıcıları için özel sorunlar da mevcut. ”
Diğer bir deyişle, HTML tabloları sayfanın tüm düzen inşa etmek için değil, bir tablo gibi, sayfadaki tablo verileri görüntülemek için kullanılmalıdır. Bunun için, muhtemelen, ayrı bir <style> bölüm veya ayrı bir CSS dosyası kullanmak suretiyle, kısım elemanları (örneğin DIV’leri gibi) ve kendi stili özniteliği kullanmalıdır. Bu nedenlerle bir dizi için idealdir:
- Görünüm ve konumunu tanımlamak için DIV’leri ve ayrı bir stil sayfası dosyası kullanıyorsanız, sitenizin her sayfası için, tekrar tekrar bu tanımı tekrar etmek gerekmez.Bu her iki geliştirmek için daha hızlı ve bakımı daha kolay olan bir site yol açar.
- Bu site, son kullanıcılar için, çok daha hızlı yüklenmesini olacak! Stil dosyası sunucu üzerinde değişene kadar sadece bir kez müşteri tarafından indirilen ve daha sonra sonraki sayfa istekleri için önbellek yüklenen olacağını unutmayın.Eğer tabloları kullanarak HTML dosyası içinde düzenini tanımlamak. Eğer istemci yerine tüm sayfayı indirerek daha uzun bir zaman gerektirir ve size bant genişliği daha fazla mal olacak bu sonuç, her sayfa için tablonun düzeni indirmek, ve böylece daha fazla bayt indirmek olacaktır.Tipik olarak, bir CSS odaklı düzeni% 50 kadar indirilen bayt kırpabilir ve bu yaklaşımın avantajı hemen belirginleşir.Ayrıca, bu tasarruf, ağır yüklü bir web sunucusu üzerinde büyük bir etkiye sahip her kullanıcı için daha az bayt göndererek iletişim web sunucu tarafında eşzamanlı kullanıcı sayısı ile çarpılarak toplam tasarruf belirlemek için olabilir.
- Ekran okuyucular, kör ve görme engelli kullanıcılar için sayfa metin ve diğeri içeriğin okuyabilirsiniz yazılım, tablolar, sayfa düzeni için kullanıldığında çok daha zor bir iş var. Bu nedenle, boş bir masa düzeni kullanarak, sitenin erişilebilirlik artırabilir.Bu, kamu yönetiminin ve devlet kurumları için bu gibi sitelerin belirli kategoriler için çok önemli bir koşuldur.Birkaç şirket, bu gibi basit konular üzerinde tüm kullanıcı gruplarının yazmak için istekli.Körler için ekran okuyucu sitenizi nasıl okuyacaktır görebilmek için kolay bir şekilde web sitenizin tüm stil sayfaları kaldırmak için.Traight aşağı akamaz ve içerik bölüme kadar kırık varsa, onlar, içeriği önemli ve nasıl okunacağı olduğu bulmaktan zor bir zaman olacak.
- CSS stilleri ve DIV’leri tabloları daha fazla esneklik sağlar.Örneğin, sayfa üzerinde çeşitli nesneler için farklı görünümlere ve konumlarını tanımlamak farklı stil sayfasını dosyaları olabilir.Bağlantılı stil sayfasını değiştirerek, tamamen içerik sayfaları kendi başlarına hiçbir şeyi değiştirmeden, sayfa görünümünü değiştirebilirsiniz.Ve bu sadece renk ve yazı tipi bir konu değil - CSS dosyaları,nesneler için pozisyonlar da belirtmek ve böylece sayfanın sol üst köşesinde menü kutusu yerleştiren bir dosya üzerine koyar başka bir sağ alt köşede.Kullanıcılar mevcut temalardan bir listeden en sevdikleri stilleri almak içinizin istiyorum, çünkü, bu özellikle önemli bir nokta.
- CSS hatta yazıcı için belirli bir düzen oluşturmak için olanak sağlar.Bu, çok önemli bir noktadır, çünkü kullanıcı sadece sayfa içerik ve tarayıcı sunulan kenar çubuğunu ve giriş bilgilerinizi baskı genellikle ilgi.Yazdırılan sayfanın bu elementleri kolaylıkla CSS ile görüntülenir ayarlanabilir.Ayrıca, sadece mürekkep kullanmak istiyorsunuz koyu arka plan renkleri çok beyaz mürekkep maliyeti son kullanıcı biraz para kazanmak için, koyu arka plan değiştirebilir ve hala kontrol eden bir şekilde web sitenizin baskı var.
- CSS, HTML, PDA’lar ve akıllı telefonlar gibi mobil cihazlar gibi gerektirmeden bazı durumlarda cihazların farklı sınıflar hedef sağlar.Kendi kısıtlı ekran boyutu nedeniyle, bu içeriği de küçük ekran uygun ve kolay okunabilir, böylece onlar için çıkış uyum için gerekli.Bazı kapların boyutu ve konumu değişir (diğer altına yerleştirerek, yerine dikey sütun) belirli bir stil sayfası ile bunu, ya da onları tamamen gizlemek.Örneğin, afiş için kısım, anketler, büyük bir logo ile başlık gizlemek olabilir. Deneyin tabloları kullanıyorsanız, bunu yapmak için çok daha zor olacaktır.Özel bir ara yüz mekanizması hakkında düşünmek gerekir, ve farklı düzenler tanımlamak ayrı bir sayfa yazmak gerekir, bu, sadece yeni bir CSS dosyası yazmak çok daha eseridir.