Daha önceki makalemizde ASP.NET MVC DisplayTemplates’i görmüştük bunun ondan tek farkı ise Edit yani düzenleme modundaki input nesnelerine özel olarak şablon tanımlamaları yapabilmekteyiz makale devamında örnekler ile daha iyi anlayacaksınızdır.

İçerik göster

ASP.NET MVC ile EditorTemplates nedir ve kullanımı

Örneğimizde Kullanacağımız MSSQL Server kodumuz ise aşağıdaki gibidir.

DROP TABLE [Kullanıcı]
GO
CREATE TABLE [dbo].[Kullanıcı](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [ad] [nvarchar](50) NULL,
    [sifre] [nvarchar](50) NULL,
    [dogum] [datetime] NULL,
    [mail] [nvarchar](50) NULL,
    [site] [nvarchar](50) NULL
)

GO
SET IDENTITY_INSERT [dbo].[Kullanıcı] ON

GO
INSERT [dbo].[Kullanıcı] ([id], [ad], [sifre], [dogum], [mail], [site]) VALUES (1, N'Murat ÖNER', N'1111', CAST(0x000081D500000000 AS DateTime), N'info@muratoner.net', N'http://www.muratoner.net')
GO
INSERT [dbo].[Kullanıcı] ([id], [ad], [sifre], [dogum], [mail], [site]) VALUES (2, N'Muhammed Emin Öztürkler', N'2222', CAST(0x000081D500000000 AS DateTime), N'emin.ozturkler@gmail.com', N'http://www.muhammedeminozturkler.com')
GO
SET IDENTITY_INSERT [dbo].[Kullanıcı] OFF
GO

DROP TABLE [Kullanıcı]

CREATE TABLE [dbo].[Kullanıcı](

[id] [int] IDENTITY(1,1) NOT NULL,

[ad] [nvarchar](50) NULL,

[sifre] [nvarchar](50) NULL,

[dogum] [datetime] NULL,

[mail] [nvarchar](50) NULL,

[site] [nvarchar](50) NULL

)

SET IDENTITY_INSERT [dbo].[Kullanıcı] ON

INSERT [dbo].[Kullanıcı] ([id], [ad], [sifre], [dogum], [mail], [site]) VALUES (1, N'Murat ÖNER', N'1111', CAST(0x000081D500000000 AS DateTime), N'info@muratoner.net', N'http://www.muratoner.net')

INSERT [dbo].[Kullanıcı] ([id], [ad], [sifre], [dogum], [mail], [site]) VALUES (2, N'Muhammed Emin Öztürkler', N'2222', CAST(0x000081D500000000 AS DateTime), N'emin.ozturkler@gmail.com', N'http://www.muhammedeminozturkler.com')

SET IDENTITY_INSERT [dbo].[Kullanıcı] OFF

Entity Design’imizi kolaylık olsun diye Entity Wizard ile oluşturuyoruz ardından kullanıcı tablomuza ait kontrol ve validationlar için Models klasörü altına Kullanici.cs adından bir sınıf oluşturup ardından sınıf içeriğini aşağıdaki gibi düzenleyiniz.

[MetadataType(typeof(KullanıcıValidaiton))]
public partial class Kullanıcı
{

}

public class KullanıcıValidaiton
{
    [ScaffoldColumn(false)]
    public int id { get; set; }

    [Display(Name = "Ad Soyad")]
    public string ad { get; set; }

    [Display(Name = "Şifre"), DataType(DataType.Password)]
    public string sifre { get; set; }

    [Display(Name = "Doğum Tarihi")]
    [DisplayFormat(DataFormatString = "{0:d}")]
    public DateTime dogum { get; set; }

    [Display(Name = "Mail Adresi"), DataType(DataType.EmailAddress)]
    public string mail { get; set; }

    [DataType(DataType.Url), Display(Name = "Site")]
    public string site { get; set; }
}

[MetadataType(typeof(KullanıcıValidaiton))]

public partial class Kullanıcı

{

}

public class KullanıcıValidaiton

{

[ScaffoldColumn(false)]

public int id { get; set; }

[Display(Name = "Ad Soyad")]

public string ad { get; set; }

[Display(Name = "Şifre"), DataType(DataType.Password)]

public string sifre { get; set; }

[Display(Name = "Doğum Tarihi")]

[DisplayFormat(DataFormatString = "{0:d}")]

public DateTime dogum { get; set; }

[Display(Name = "Mail Adresi"), DataType(DataType.EmailAddress)]

public string mail { get; set; }

[DataType(DataType.Url), Display(Name = "Site")]

public string site { get; set; }

}

EditorTemplates’i anlatmak için DateTime DataType elemanını kullanarak örnek vermeye çalışacağım şimdi yapmamız gereken Shared Klasörü Altında EditorTemplates adında yeni bir klasör oluşturmak ardından bu klasör altında DateTime elamanını kullandığımız için aynı isimlendirme ile DateTime.cshtml adında bir view dosyası oluşturuyoruz. DateTime.cshtml adındaki dosyamızın içeriğini aşağıdaki şekilde düzenleyin.

DateTime.cshtml

@model DateTime?
@Html.TextBox("", Model.HasValue ? Model.Value.ToString("dd/MM/yyyy") : "", new { @class = "date" })

1 2	@model DateTime? @Html.TextBox("", Model.HasValue ? Model.Value.ToString("dd/MM/yyyy") : "", new { @class = "date" })

Edit.cshtml sayfasına ait kod ise aşağıdaki şekildedir.

Edit.cshtml

@model MvcApplication1.Models.Kullanıcı
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Edit</title>
</head>
    <body>
        <link href="~/Content/Site.css" rel="stylesheet" />
        <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.6.1.min.js"></ script>
        <script src="~/Scripts/jquery-ui-1.8.11.min.js"></ script>
        <script src="~/Scripts/jquery.validate.min.js"></ script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></ script>
        <script>
            $(function() {
                $("input:text.date").datepicker({ format: "dd/MM/yyyy" });
            })
        </ script>
        @using (Html.BeginForm()) {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
    
            <fieldset>
                <legend>Kullanıcı</legend>
    
                @Html.EditorForModel()
    
                <p>
                    <input type="submit" value="Save" />
                </p>
            </fieldset>
        }
    
        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>
    </body>
</html>

@model MvcApplication1.Models.Kullanıcı

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

</head>

<body>

$(function() {

$("input:text.date").datepicker({ format: "dd/MM/yyyy" });

})

</ script>

@using (Html.BeginForm()) {

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<legend>Kullanıcı</legend>

@Html.EditorForModel()

<p>

</p>

</fieldset>

}

<div>

@Html.ActionLink("Back to List", "Index")

</div>

</body>

</html>

Burada sonuç olarak yapmaya çalıştığımız şey DateTime türündeki dogum alanı için Tarih seçim penceresi çıkarabilmek bunu sağlayabilmek için ise jquery-ui kütüphanesinden faydalanıyoruz üstteki script ve link etiketlerini aşağıdaki görüntüye ulaşabilmek için kullanmalısınız.

Edit.cshtml sayfasında son script etiketinde class değeri date olan ve text türündeki input nesnelerine tarih seçim penceresinin çıkması için gerekli kod yazılmıştır.

3.7/5 - (3 votes)

kardeş içerik yok dedi ki:
1 Şubat 2018, 14:27
Yanıtla
- Murat ÖNER dedi ki:
  1 Şubat 2018, 15:16
  İçerik aslında var fakat ufak bir sözdizimi sorunundan dolayı gösterim sağlanmıyordu sorun giderildi. Geri dönüş içinde teşekkürler.
  Yanıtla

Kategoriler

Bloga e-posta ile abone ol

ASP.NET MVC İle EditorTemplates Nedir Ve Kullanımı

ASP.NET MVC ile EditorTemplates nedir ve kullanımı

DateTime.cshtml

Edit.cshtml

You may also like...

3 Responses

Bir yanıt yazın Yanıtı iptal et

ASP.NET MVC ile EditorTemplates nedir ve kullanımı

DateTime.cshtml

Edit.cshtml

You may also like...

ASP.NET MVC Form etiketi oluşturma

Kullanıcı Tarafında Doğrulamayı Etkinleştirme

ASP.NET MVC Url Helpers

3 Responses

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin