Kullanıcı ile etkileşimi sağlamak için web sayfalarında form etiketinden faydalanılır. Kullanııcdan alınan bilgilerin sunucu tarafında birebir karşılanması, elde edilen veriler üzerinde işlemler yapıldıktan sonra tekrar kullanıcıya gönderilmesi gerekir. Şimdi bununla ilgili uygulamamızı yapalım.
Visual Studio 2022 programını açalım.
Yeni bir boş Core projesi oluşturalım. İsmini Matematik olarak belirleyelim.
Temel ayarların yapıldığı program.cs dosyasını düzenleyelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}"
);
app.Run();
Projeyi çalıştıralım. Controller bulunamadığı için hata verecektir. Öncelikle MVC projesi için gerekli olan klasörleri oluşturalım. Projemizi çalıştıralım. Controllers panelinde dosya olmadığı için hata verecektir.
Şimdi Controllers klasörü içine HomeController dosyasını oluşturalım. Aşağıdaki gibi bir action metodu oluşturulacaktır. Bu metod Index() isimli view dosyasını döndürecektir.
public IActionResult Index()
{
return View();
}
Break point atalım. Projeyi çalıştıralım. Index() isimli metod çalıştırılacak ancak bu dosya Views klasöründe olmadığı için hata verecektir. Şimdi Views klasörü altında Home klasörünü, bunun altında Index dosyasını oluşturalım.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Toplama İşlemi</title>
</head>
<body>
</body>
</html>
Projeyi çalıştıralım. Proje hatasız bir şekilde çalıştırılır. Projede bootstrap ve jquery kütüphanelerini yüklemek için wwwroot klasörünü ekleyelim. Projeye bootstrap eklemek için proje isminin üzerinde farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add diyelim. Burada yer alan komutlardan Client-Side Library komutunu çalıştıralım. Ekrana gelen form sayfasında library kutusuna bootstrap yazalım. Install diyerek kurulum işlemini tamamlayalım. Aynı komutu kullanarak projeye jquery kütüphanesini de ekleyelim. Index view dosyasına bootstrap ve jquery kütüphanelerini dahil edelim.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Toplama İşlemi</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css"
rel="stylesheet" />
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js">
</script>
</head>
<body>
</body>
</html>
Projeyi çalıştıralım. Kütüphanelerin projeye hatasız bir şekilde eklendiğinden emin olalım. Toplama işlemine ait form tasarımını aşağıdaki gibi yapalım.
<div class="container mt-3">
<h2>Toplama İşlemi</h2>
<form asp-action="Index" asp-controller="Home"
method="post">
<div class="mb-3 mt-3">
<label for="a">A Sayısı:</label>
<input type="number"
class="form-control" id="a"
placeholder="a sayısını giriniz..." name="txtA"
autofocus>
</div>
<div class="mb-3">
<label for="b">B Sayısı:</label>
<input type="number"
class="form-control" id="b"
placeholder="b sayısını giriniz" name="txtB">
</div>
<button type="submit"
class="btn btn-primary">Topla</button>
<div class="mb-3">
<label>@ViewBag.txtC</label>
</div>
</form>
</div>
Projeyi çalıştıralım. Form sayfasında a ve b sayılarını girelim. Girilen bu sayıların controller tarafında karşılanması gerekir. Bunun için input nesnelerinin name değerlerine karşılık birebir aynı değişkenleri tanımlamamız gerekir. Bu arada post işleminin gerçekleşmesi için Index metodu parametreli olarak post işlemi için tanımlanmalıdır. Controller kısmında Index metodunu override edelim.
[HttpPost]
public IActionResult Index(int txtA, int txtB)
{
int a, b, c;
a = txtA;
b = txtB;
c = a + b;
ViewBag.txtC = $"{a} + {b} = {c}";
return View();
}
Burada elde edilen sonucun view ekranına taşınması için ViewBag() metodu tanımlanmıştır. Projeyi çalıştırdığımızda toplama işleminin yapıldığını görürsünüz. En basit haliyle form tarafında yer alan bilgilerin alınması ve sonucun görüntülenmesi böyle yapılmaktadır. Biz burada model binding yöntemini kullanacağız. Amacımız oluşturduğumuz modele ait tüm özellikleri hem view hem de controller tarafında kullanabilmek. Şimdi Models klasörü altına Addition isminde bir class oluşturalım. Dosyanın içeriği aşağıdaki gibi olacaktır.
public class Addition
{
public int a { get; set; }
public int b { get; set; }
public int c()
{
return a + b;
}
}
Tanımladığımız bu modele göre web sayfasının tasarımını yeniden yapalım.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model Matematik.Models.Addition
<!DOCTYPE html>
<html lang="tr">
<head>
<meta name="viewport" content="width=device-width" />
<title>Toplama İşlemi</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css"
rel="stylesheet" />
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container mt-3">
<h2>Toplama İşlemi</h2>
<form asp-action="Index"
asp-controller="Home" method="post">
<div class="mb-3 mt-3">
<label for="a">A Sayısı:</label>
<input type="number"
class="form-control" id="a"
placeholder="a sayısını giriniz..." asp-for="a" autofocus>
</div>
<div class="mb-3">
<label for="b">B Sayısı:</label>
<input type="number"
class="form-control" id="b"
placeholder="b sayısını giriniz" asp-for="b">
</div>
<button type="submit"
class="btn btn-primary">Topla</button>
<div class="mb-3">
<label>@ViewData["sonuc"]</label>
</div>
</form>
</div>
</body>
</html>
Burada dikkat ettiyseniz öncelikle modelimizi sayfaya dahil ediyoruz. Input nesneleri için kullanlıan name değerlerini siliyoruz. Bunun yerine asp-for parametresini kullanıyoruz. Bunların değerlerini modelde kullandığımız değerler olarak atıyoruz. Böylece hem değişkenlerin isminde hem de değişkenlerin veri tipinde ortak nokta kullanılmış oldu. Şimdi de controller kısmında yer alan dosyamızı düzenleyelim.
[HttpPost]
public IActionResult Index(Addition topla)
{
ViewData["sonuc"] =
$"{topla.a} + {topla.b} = {topla.c()}";
return View();
}
Artık projemizi çalıştırabiliriz. Model binding özelliğinin avantajlarından birini burada yapalım. Toplama işlemini yaptığımızda a ve b sayıları silinmektedir. Silinmeden bu bilgilerin kalıcı olması için controller kısmında şöyle yapmalıyız.
public IActionResult Index()
{
var islem = new Addition();
if (islem.a != 0 || islem.b != 0)
return View(islem);
else
return View();
}