Mvc ile Kayıt Formu Hazırlama ve Veritabanına Kaydetme

Site Haritası

Merhaba arkadaşlar, bu makalede Asp.Net Mvc ile bir kayıt formu oluşturup veritabanına kayıt edeceğiz. Lafı uzatmadan işe koyuyalım 🙂

Öncelikle Visual Studio 2015 de yeni boş bir Mvc projesi açalım. Bunun için New Project – Web – Asp.Net Web Application Seçip Çıkan ekranda Empty seçip aşağıdan Mvc formatını işaretleyip Ok butonuna basıyoruz.

Karşımıza boş bir proje ekranı çıkacak.

İlk olarak kullanıcı adında bir class (sınıf) tanımlaması yapalım ve kayıt edeceğimiz alanları oluşturalım. Bu class ile veri tabanı tablomuzuda oluşturacağız. Bunun için; Models klasörüne sağ tıklayıp Add – Class seçip adını Kullanıcı olarak ayarlayıp ekliyoruz.

Karşımıza gelen ekranda sınıfımız bu şekilde dolduruyoruz.

Daha sonra veritabanı işlemleri için bir class daha oluşturuyoruz ve adını DataBaseConnection olarak ayarlıyoruz.

DateBaseConnection içindeki kodlarımız şu şekilde;

  public class DataBaseConnection: DbContext
    {
     
            public DataBaseConnection() : base("KullaniciKayitDB") // Veritabanı adı 
            {

            }
            public static DataBaseConnection Create()
            {
                return new DataBaseConnection();
            }
            public System.Data.Entity.DbSet<KayitIslemleri.Models.Kullanici> Kullanicis { get; set; } // Kullanici tablosu için dbset.
       
    }

Burada veritabanı ismini oluşturduk ve kullanıcı tablosu için db set yazdık. Bunları yapabilmek için projeye entity framework’ünü yüklememiz gerekiyor. Bunun için Solution Explorer da projeyi sağ tıklayıp Manage NuGet Packages açarak buradan entity framework’ü yüklüyoruz.

Daha sonra içerisinde Kullanicis adında bir tablo olacak şekilde KullaniciKayitDb  adında bir veritabanı oluşturması için Tools – NuGet Package Manager – Package Manager Console kısmına sırasıyla şu satırları yazıyoruz.  Enable-Migrations – Add-Migration VeritabaniOlustur- Update-database burada VeritabaniOlustur kısmı tamamen bize kalmış bir isim. Migration adımlarına bu şekilde isim vermek zorundayız. Bu işlemleri yaparken Solution Explorer kısmında Migrations adında bir klasör oluşmuş ve içerisinde Migration adımlarının olduğu sınıflar bulunur.

Bu işlemlerden sonra veritabanımız oluşmuş oldu.

Şimdi bir adet Controller oluşturalım. Bunun için Controller klasörüne sağ tıklayıp add – controler diyoruz. Çıkan ekranda MVC 5 Controller – Empty seçiyoruz ve adını HomeController yapıyoruz.

Gelen erkanda Index ActionResult’a sağ tıklayıp Add View diyoruz. Çıkan pencerede View adı Index olarak kalsın. Template kısmını Create olarak seçiyoruz. Model kısmına Kullanici Class’ını seçiyoruz. Data context class kısmına da DataBaseConnection olarak seçip Add butonuna basıyoruz. Bu şekilde Kullanici Clasını örnek alarak oluşturulmuş hazır bir Ekleme sayfası oluşturulmuş oldu. Oluşturulan sayfanın kodları şu şekilde;

@model KayitIslemleri.Models.Kullanici

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Kullanici</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Adi, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Adi, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Adi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Soyadi, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Soyadi, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Soyadi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.EmailAdresi, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmailAdresi, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EmailAdresi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.KullaniciAdi, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.KullaniciAdi, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.KullaniciAdi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Sifre, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Sifre, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Sifre, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Projeyi çalıştırdığımızda şu şekilde bir sayfa ile karşılaşmış oluruz.

Bu ekrana bazı düzenlemeler yapalım.  Bunlar için yukarıdaki kodların yenilenmiş hali aşağıdadır.

@model KayitIslemleri.Models.Kullanici

@{
    ViewBag.Title = "Index";
}


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>KULLANICI KAYIT SAYFASI</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
           <label class="col-md-2 control-label">ADI:</label>
            <div class="col-md-10">
                @Html.EditorFor(model => model.Adi, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Adi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">SOYADI:</label>
            <div class="col-md-10">
                @Html.EditorFor(model => model.Soyadi, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Soyadi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">EMAİL ADRESİ:</label>
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmailAdresi, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EmailAdresi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">KULLANICI ADI:</label>
            <div class="col-md-10">
                @Html.EditorFor(model => model.KullaniciAdi, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.KullaniciAdi, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">ŞİFRE:</label>
            <div class="col-md-10">
                @Html.EditorFor(model => model.Sifre, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Sifre, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="EKLE" class="btn btn-success" />
            </div>
        </div>
    </div>
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Bu değişiklikler ile sayfanın son hali şöyle oldu.

Evet, şimdi ekle butonuna basıldığı zaman verileri veritabanına kaydetmek için HomeController’e Index ActionResult’un Post metodlu halini yazmamız gerekiyor.

HomeController’e şu kodları yazıyoruz.

 DataBaseConnection Db = new DataBaseConnection();
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(Kullanici kullanici)
        {
            Db.Kullanicis.Add(kullanici);
            Db.SaveChanges();
            return View();
        }

Bu işlemlerden sonra formu doldurup ekle dediğimizde veritabanına kullanıcı kaydı yapılmış oluyor.

Tabi bu işlemlerin daha farklı bir çok yolu var. Bu kayıt işlemlerinin sadece bir tanesi. Başka makalelerde farklı yollar ile kayıt işlemleri yaparak onlardan da bahsetmiş olacağız. Takıldığınız yerleri yoruma yazınız. Hepinize iyi çalışmalar 🙂

Kodların Tamamı

HomeController ;

using KayitIslemleri.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace KayitIslemleri.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        DataBaseConnection Db = new DataBaseConnection();
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(Kullanici kullanici)
        {
            Db.Kullanicis.Add(kullanici);
            Db.SaveChanges();
            return View();
        }
    }
}

 

0 0 vote
Article Rating
Subscribe
Bildir
guest
0 Yorum
Inline Feedbacks
View all comments
0
Düşüncelerinize bayılırım, lütfen yorum yapın.x
()
x