Html | Alper Konuralp'in Blog Sitesi

Archive for the ‘Html’ Category

Asp.Net MVC Veri Aktarım Elemanı

Şubat 26th, 2012 |

Author: alper

Merhaba, MVC ile site geliştiriyorsanız benim karşılaştığım durum ile sizde karşılaşabilirsiniz. Burada olay şöyle gelişiyor:

1. Kişi yeni veri giriş ekranında bir veri giriyor.
2. sistem verinin doğruluğundan emin olduktan sonra veriyi veri tabanına kaydediyor.
3. sonrada işlem listeleme sayfasına devrediliyor.

bu işleme kod olarak baktığımızda :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

public class Ornek : Controller
{
public ActionResult Index()
{
var veriler = VeriKaynagi.VerileriAl();
return View(veriler);
}
public ActionResult Yeni()
{
return View(new Veri());
}

[HttpPost]
public ActionResult Ekle(Veri veri)
{
if (!ModelState.IsValid)
{
return View("Yeni", veri);
}
// veriyi veri tabanına kaydeden kodlar

return RedirectToAction("Index");
}
}

Şimdi yapmamız gereken veri doğru olarak kaydedildiğine dair bir bilgiyi sayfaya göndermek istiyorum. Ama bunuda yapıyı bozmadan yapmam lazım. O zaman ilk aklıma ViewBag kullanmak geldi ve kodu şöyle düzelttim :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

public class Ornek : Controller
{
public ActionResult Index()
{
var veriler = VeriKaynagi.VerileriAl();
return View(veriler);
}
public ActionResult Yeni()
{
return View(new Veri());
}

[HttpPost]
public ActionResult Ekle(Veri veri)
{
if (!ModelState.IsValid)
{
return View("Yeni", veri);
}
// veriyi veri tabanına kaydeden kodlar
ViewBag.EkMesaj = "Veriler Başarıyla Kaydedilmiştir.";
return RedirectToAction("Index");
}
}

Çok zekice gelmişti bana ama maalesef kod çalışmadı. Daha doğrusu çalıştı ama ViewBag.EkMesaj her durumda boş geldi. Böyle olunca da Böyle Gitmez Söz Google’da dedim ve bir arama yaptım. Bu tür konularda çoğunlukla karşıma çıkan Stack Overflow‘da aradığım cevabı buldum.
Burada ViewBag’in doğru nokta olmadığı ve bunun yerine TempData elemanının kullanılması gerektiği yazıyordu. Böylece özellikle Redirect işlemlerinde ilk sayfa ikinci sayfaya bir data aktarabiliyordu. İlgili link bu.

O zaman çözüm şöyle olacak:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

public class Ornek : Controller
{
public ActionResult Index()
{
var veriler = VeriKaynagi.VerileriAl();
return View(veriler);
}
public ActionResult Yeni()
{
return View(new Veri());
}

[[HttpPost]]
public ActionResult Ekle(Veri veri)
{
if (!ModelState.IsValid)
{
return View("Yeni", veri);
}
// veriyi veri tabanına kaydeden kodlar
TempData.Add("EkMesaj", "Veriler Başarıyla Kaydedilmiştir.");
return RedirectToAction("Index");
}
}

İyide ön tarafı nasıl yazarız derseniz… ben biraz atraksiyonlu yazdım. Adım adım bakalım. Önce mesajın gözükeceği yeri ayarlamamız lazım. genel geçer bir durum olsun diye ben bu elemanı master layout içine aldım. <body> tagından önceye şöyle bir kod ekledim:

1 2	@if (TempData.ContainsKey("EkMesaj")) {<div id="dEkMesaj">@TempData["EkMesaj"]</div>}

böylece mesaj geldiğinde böyle gözükecek. Bu elemanın görüntü özellikleri için css’e aşağıdakini ekledim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#dEkMesaj
{
display: none;
position: fixed;
top: 0;
left: 50%;
margin: 0 0 0 -100px;
width: 200px;
background: yellow;
color: black;
border: 1px solid darkorange;
border-top: 0;
text-align: center;
}

iyi gidiyoruz ama daha bitmedi. Birde olayın atraksiyon tarafını halleden sevgili javascript kodumuz var. Doğal olarak jquery kullanıyoruz:

1
2
3
4
5
6
7
8
9

$(function () {
if ($('#dEkMesaj').length > 0) {
$('#dEkMesaj')
.css({"opacity": 0, "display":"block"}) // görünmez elemanı önce görünür ama görünmez yapıyoruz :D
.animate({ opacity: 1 }, 500) // sonrada yarım saniyede görünür hale geliyor.
.delay(3000) // 3 saniye görüntüde kalıyor
.animate({ opacity: 0 }, 1000, function () { $('#dEkMesaj').hide(); }); // sonrada görüntüden 1 saniyede çıkıyor.
}
});

bu mudur? bence budur.
Kolay gele…

Posted in Asp.Net, Css, Html, JavaScript, JQuery, Microsoft MVC, Microsoft.Net |

No Comments »

Special Characters in HTML

Mayıs 17th, 2011 |

Author: alper

Html’de özel karakter listesine ihtiyacım oldu. Bende bir araştırma yapınca aşağıdaki tabloya ulaştım.

left single quote		‘	‘
right single quote		’	’
single low-9 quote		&sbquo;	‚
left double quote		“	“
right double quote		”	”
double low-9 quote		&bdquo;	„
dagger		&dagger;	†
double dagger		&Dagger;	‡
per mill sign		&permil;	‰
single left-pointing angle quote		&lsaquo;	‹
single right-pointing angle quote		&rsaquo;	›
black spade suit		&spades;	¦
black club suit		&clubs;	¦
black heart suit		&hearts;	¦
black diamond suit		&diams;	¦
overline, = spacing overscore		&oline;	?
leftward arrow		←	‹
upward arrow		↑	^
rightward arrow		→	›
downward arrow		↓	v
trademark sign	™	™	™
unused	-
horizontal tab
line feed
unused
space
exclamation mark	!		!
double quotation mark	"	"	"
number sign	#		#
dollar sign	$		$
percent sign	%		%
ampersand	&	&	&
apostrophe	'		‘
left parenthesis	(		(
right parenthesis	)		)
asterisk	*		*
plus sign	+		+
comma	,		,
hyphen	-		-
period	.		.
slash	/	&frasl;	/
digits 0-9	0- 9
colon	:		:
semicolon	;		;
less-than sign	<	<	<
equals sign	=		=
greater-than sign	>	>	>
question mark	?		?
at sign	@		@
uppercase letters A-Z	A- Z
left square bracket	[		[
backslash	\		\
right square bracket	]		]
caret	^		^
horizontal bar (underscore)	_		_
grave accent	`		`
lowercase letters a-z	a- z
left curly brace	{		{
vertical bar	\|		\|
right curly brace	}		}
tilde	~		~
unused	-
en dash		–	–
em dash		—	—
unused	-
nonbreaking space
inverted exclamation	¡	¡	¡
cent sign	¢	¢	¢
pound sterling	£	£	£
general currency sign	¤	¤	¤
yen sign	¥	¥	¥
broken vertical bar	¦	¦ or &brkbar;	¦
section sign	§	§	§
umlaut	¨	¨ or &die;	¨
copyright	©	©	©
feminine ordinal	ª	ª	ª
left angle quote	«	«	«
not sign	¬	¬	¬
soft hyphen
registered trademark	®	®	®
macron accent	¯	¯ or &hibar;	¯
degree sign	°	°	°
plus or minus	±	±	±
superscript two	²	²	²
superscript three	³	³	³
acute accent	´	´	´
micro sign	µ	µ	µ
paragraph sign	¶	¶	¶
middle dot	·	·	·
cedilla	¸	¸	¸
superscript one	¹	¹	¹
masculine ordinal	º	º	º
right angle quote	»	»	»
one-fourth	¼	¼	¼
one-half	½	½	½
three-fourths	¾	¾	¾
inverted question mark	¿	¿	¿
uppercase A, grave accent	À	À	À
uppercase A, acute accent	Á	Á	Á
uppercase A, circumflex accent	Â	Â	Â
uppercase A, tilde	Ã	Ã	Ã
uppercase A, umlaut	Ä	Ä	Ä
uppercase A, ring	Å	Å	Å
uppercase AE	Æ	Æ	Æ
uppercase C, cedilla	Ç	Ç	Ç
uppercase E, grave accent	È	È	È
uppercase E, acute accent	É	É	É
uppercase E, circumflex accent	Ê	Ê	Ê
uppercase E, umlaut	Ë	Ë	Ë
uppercase I, grave accent	Ì	Ì	Ì
uppercase I, acute accent	Í	Í	Í
uppercase I, circumflex accent	Î	Î	Î
uppercase I, umlaut	Ï	Ï	Ï
uppercase Eth, Icelandic	Ð	Ð	?
uppercase N, tilde	Ñ	Ñ	Ñ
uppercase O, grave accent	Ò	Ò	Ò
uppercase O, acute accent	Ó	Ó	Ó
uppercase O, circumflex accent	Ô	Ô	Ô
uppercase O, tilde	Õ	Õ	Õ
uppercase O, umlaut	Ö	Ö	Ö
multiplication sign	×	×	×
uppercase O, slash	Ø	Ø	Ø
uppercase U, grave accent	Ù	Ù	Ù
uppercase U, acute accent	Ú	Ú	Ú
uppercase U, circumflex accent	Û	Û	Û
uppercase U, umlaut	Ü	Ü	Ü
uppercase Y, acute accent	Ý	Ý	Y
uppercase THORN, Icelandic	Þ	Þ	?
lowercase sharps, German	ß	ß	ß
lowercase a, grave accent	à	à	à
lowercase a, acute accent	á	á	á
lowercase a, circumflex accent	â	â	â
lowercase a, tilde	ã	ã	ã
lowercase a, umlaut	ä	ä	ä
lowercase a, ring	å	å	å
lowercase ae	æ	æ	æ
lowercase c, cedilla	ç	ç	ç
lowercase e, grave accent	è	è	è
lowercase e, acute accent	é	é	é
lowercase e, circumflex accent	ê	ê	ê
lowercase e, umlaut	ë	ë	ë
lowercase i, grave accent	ì	ì	ì
lowercase i, acute accent	í	í	í
lowercase i, circumflex accent	î	î	î
lowercase i, umlaut	ï	ï	ï
lowercase eth, Icelandic	ð	ð	?
lowercase n, tilde	ñ	ñ	ñ
lowercase o, grave accent	ò	ò	ò
lowercase o, acute accent	ó	ó	ó
lowercase o, circumflex accent	ô	ô	ô
lowercase o, tilde	õ	õ	õ
lowercase o, umlaut	ö	ö	ö
division sign	÷	÷	÷
lowercase o, slash	ø	ø	ø
lowercase u, grave accent	ù	ù	ù
lowercase u, acute accent	ú	ú	ú
lowercase u, circumflex accent	û	û	û
lowercase u, umlaut	ü	ü	ü
lowercase y, acute accent	ý	ý	y
lowercase thorn, Icelandic	þ	þ	?
lowercase y, umlaut	ÿ	ÿ	ÿ
Alpha	Α		?
alpha	α		?
Beta	Β		?
beta	β		ß
Gamma	Γ		?
gamma	γ		?
Delta	Δ		?
delta	δ		?
Epsilon	Ε		?
epsilon	ε		?
Zeta	Ζ		?
zeta	ζ		?
Eta	Η		?
eta	η		?
Theta	Θ		?
theta	θ		?
Iota	Ι		?
iota	ι		?
Kappa	Κ		?
kappa	κ		?
Lambda	Λ		?
lambda	λ		?
Mu	Μ		?
mu	μ		µ
Nu	Ν		?
nu	ν		?
Xi	Ξ		?
xi	ξ		?
Omicron	Ο		?
omicron	ο		?
Pi	Π		?
pi	π		?
Rho	Ρ		?
rho	ρ		?
Sigma	Σ		?
sigma	σ		?
Tau	Τ		?
tau	τ		?
Upsilon	Υ		?
upsilon	υ		?
Phi	Φ		?
phi	φ		?
Chi	Χ		?
chi	χ		?
Psi	Ψ		?
psi	ψ		?
Omega	Ω		?
omega	ω		?
password dot	●		?
bullet	•		•

Posted in Html |

Tags: Html |

No Comments »

Css ile neler yapılabilir

Mart 26th, 2011 |

Author: alper

Css ile ne yapılabilir, insanın kafasında hemen canlanmayan bir konu. Cevap olarakta çoğunlukla herşey şeklinde cevap vermek mümkündür. Ama bunun görsel halini karşıya anlatmak zordur. Bir web sitesi bunu yapmış. http://www.csszengarden.com/ adresinin html tarafına baktığınızda sabit bir sayfa görürsünüz. Inline css kullanılmamış temiz bir html dosyasıdır bu. Sonrada elinize css fırçasını alıp, sayfayı renklendirirsiniz. Yapılmış çalışmalar sayfada görüntülenmektedir. http://www.mezzoblue.com/zengarden/alldesigns/ adresinde bütün dizaynlar listelenmiş. Tekrar hatırlatmak isterim ki bu dizaynlar hep aynı html dosyasını kullanmaktadırlar.

Posted in Css, Html |

Tags: Css, Html |

No Comments »

Ağ tarayıcılarının pazar payları

Mayıs 11th, 2010 |

Author: alper

Wikipedia üzerinde güncel kullanım bilgileri yer almakta.
adresinden bakabilirsiniz.

Posted in Genel, Html, JavaScript, Programlama |

Tags: Browsers |

No Comments »

Css ile resim çizilir mi?

Ocak 10th, 2010 |

Author: alper

Elin oğlu css’e takla attırmış. Aşağıdaki linkte sadece harfler yapılmış bir resim var.

http://www.romancortes.com/blog/homer-css/

Posted in Genel, Html |

Tags: Css |

No Comments »

Pts	Sal	Çar	Per	Cum	Cts	Paz
« Şub
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31