ASPNET MVC ile Bootstrap ve HintCSS Kullanarak Button & Link Helper Metotlar


ASPNET MVC projelerinizde sürekli olarak kullandığımız hyperlink ve button elementleri için kullanabileceğiniz helper metotları sizlerle paylaşmak istiyorum. Bootstrap ve HintCSSHintCSS kullanan overload versiyonları ile az kodla sayfalarınız da güzel link’ler ve button’lar oluşturabilirsiniz. Kodları paylaşmadan önce açıklamakta fayda var.

Proje içerisinde 4 adet dosyadan helper metotlar gelmektedir.

helper-methods-cshtml

  • HtmlButton.cshtml : Button elementi eklemede kullanılan helper metotları içerir.
  • HtmlLink.cshtml : HyperLink elementi eklemede kullanılan helper metotları içerir.
  • HtmlHint.cshtml : HintCSS kullanan element eklemede kullanılan helper metotları içerir.
  • MyHtml.cshtml : Yukarıdaki dosyalarda yer alan button, link, hint helper metotları projenizde kullanarak düğmeler oluşturacaksınız. Dolayısı ile bu kodlarda zamanla sayfalarınız da tekrar etmeye başlayacaktır. İşte o kodları da tek bir helper metot haline getirecek şekilde kendi projem için oluşturduğum helper metotları içerir. Yani kısaca helper metodun, helper metodu diyebiliriz. Hepsi kod tekrarını azaltmak içindir.

 

button-link-helper-methods-in-mvc

Yukarıdaki görsel de gördüğünüz gibi küçük link/button, büyük link/button oluşturmada kullanabileceğiniz helper metotlar, zaten bunları 2-3 html satırı ile oluşturabiliyoruz. Burada ki amaç, proje genelinde bu kodların merkezi helper metotlarda toplanmasının sağlanması ve buradan yönetilmesi ile bir değişiklikte hepsinin etkilenmesinin sağlanması, kod tekrarlarının azaltılmasıdır. Aynı zaman da başta da dediğim gibi kodların tek bir metot seviyesine kadar azaltılmasıdır.

kmb-udemy-reklam

Örneğin;

Normalde aşağıdaki şekilde yazdığımız bootstrap sınıfları içeren link kodlarının..

bootstrap-mvc-link

Aşağıdaki şekilde tek bir helper metot ile kullanımının sağlanması ki HintCSS ‘in css class ları ile daha da uzun kodlar yazmamız gerekiyor. Amaç bunları kısaltmak ve css class isimlerinin de sürekli hatırlanması gerekliliğini ortadan kaldırmak.

bootstrap-mvc-helper-method-link

Peki gelelim kodlara, kodları hem incelemeniz hem de yazmanız gereken sırada oluşturdum. Daha kolay anlaşılacağını düşünüyorum. Kodların içine önemli notları açıklama satırı olarak ekledim mutlaka onlara dikkat ediniz.

7.Index.cshtml ‘den itibaren örnek kullanım olması açısından Index, Create, Edit, Details, Delete sayfalarında örnek kullanım şeklini göstermek istedim. Ayrıca Index sayfasında Grid.MVC kullanarak tablo içinde mini link’lerin yapımını göstermek istedim.

Helper metotları istediğiniz gibi arttırabilir ve düzenleyebilirsiniz ki zaten amaç zamanla bu dosyaların içeriğinin sizin ihtiyaçlarınız doğrultusunda büyümesi/genişlemesi ‘dir. Helper metotlarda MVC standardında olan parametreleri de(htmlAttributes gibi) ekledim. Böylece gerekli custom element yapılarını da oluşturabilirsiniz.

 

// Nuget üzerinden projenize Bootstrap ve HintCSS 'i kurmalısınız.
// Package Manager Console ekranını açarak aşağıdaki komutları çağırabilirsiniz.
Install-Package jQuery
Install-Package Bootstrap
Install-Package HintCSS
Install-Package Grid.Mvc (opsiyonel)
Install-Package Grid.Mvc.DatePicker (opsiyonel)

view raw
1. Nugets
hosted with ❤ by GitHub

namespace Cumulus.Web.Infrastructure.Enumerations
{
public enum Colors
{
@default = 0,
primary = 1,
info = 2,
warning = 3,
success = 4,
danger = 5
}
public enum ButtonTypes
{
submit = 0,
button = 1,
reset = 2
}
public enum HintColor
{
none = 0,
info = 1,
warning = 2,
success = 3,
error = 4
}
public enum HintPosition
{
bottomright = 0,
bottom = 1,
bottom_left = 2,
right = 3,
left = 4,
top_right = 5,
top = 6,
top_left = 7
}
public enum HintSize
{
none = 0,
small = 1,
medium = 2,
large = 3
}
public enum HintBehaivour
{
none = 0,
always = 1,
bounce = 2
}
public enum HintStyle
{
none = 0,
rounded = 1
}
}

view raw
2. RazorEnums.cs
hosted with ❤ by GitHub

@using Marm.Cumulus.Web.Infrastructure.Enumerations
@helper Button(ButtonTypes type = ButtonTypes.submit, Colors color = Colors.@default, string icon = "plus", string additionalClass = "", string value = "", object htmlAttributes = null)
{
var attributes = System.Web.Mvc.HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
var attrs = string.Join(" ", attributes.Select(x => x.Key.Replace("_", "") + "=" + x.Value));
string cssClass = $"btn btn-{@color} {@additionalClass}".Trim();
string text = string.IsNullOrEmpty(value) ? "" : " " + value;
<button type="@type" class="@cssClass" @attrs>
<span class="glyphicon glyphicon-@icon"></span>@text
</button>
}

view raw
3. HtmlButton.cshtml
hosted with ❤ by GitHub

@*
Projenize sağ tıklayarak ASP.NET Folder ile App_Code klasörü oluşturulur.
App_Code klasörü altına bu dosyayı oluşturunuz.
*@
@using System.Web.Mvc
@using System.Web.Routing
@using Cumulus.Web.Infrastructure.Enumerations
@functions {
public static string GetHintCssClasses(HintPosition position = HintPosition.top, HintColor color = HintColor.none, HintSize size = HintSize.none, HintBehaivour behaivour = HintBehaivour.bounce, HintStyle style = HintStyle.rounded, string additionalClass = "")
{
string _position = "hint–" + position;
string _color = (color == HintColor.none) ? "" : "hint–" + color;
string _size = (size == HintSize.none) ? "" : "hint–" + size;
string _behaivour = (behaivour == HintBehaivour.none) ? "" : "hint–" + behaivour;
string _style = (style == HintStyle.none) ? "" : "hint–" + style;
return $"{_position} {_color} {_size} {_behaivour} {_style} {additionalClass}";
}
public static MvcHtmlString GetHintElement(string element, string text, string cssClasses, RouteValueDictionary htmlAttributes)
{
TagBuilder tb = new TagBuilder(element);
tb.AddCssClass(cssClasses);
tb.MergeAttributes(htmlAttributes);
tb.SetInnerText(text);
return MvcHtmlString.Create(tb.ToString());
}
}
@helper HintElement(string elementName, string text, string hint, HintPosition position = HintPosition.top, HintColor color = HintColor.none, HintSize size = HintSize.none, HintBehaivour behaivour = HintBehaivour.bounce, HintStyle style = HintStyle.rounded, string additionalClass = "", object htmlAttributes = null)
{
var attributes = System.Web.Mvc.HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
attributes.Add("data-hint", hint);
@GetHintElement(elementName, text, GetHintCssClasses(position, color, size, behaivour, style, additionalClass), attributes)
}
@helper HintSpan(string text, string hint, HintPosition position = HintPosition.top, HintColor color = HintColor.none, HintSize size = HintSize.none, HintBehaivour behaivour = HintBehaivour.bounce, HintStyle style = HintStyle.rounded, string additionalClass = "", object htmlAttributes = null)
{
@HintElement("span", text, hint, position, color, size, behaivour, style, additionalClass, htmlAttributes)
}
@helper HintLabel(string text, string hint, HintPosition position = HintPosition.top, HintColor color = HintColor.none, HintSize size = HintSize.none, HintBehaivour behaivour = HintBehaivour.bounce, HintStyle style = HintStyle.rounded, string additionalClass = "", object htmlAttributes = null)
{
@HintElement("label", text, hint, position, color, size, behaivour, style, additionalClass, htmlAttributes)
}
@helper HintDiv(string text, string hint, HintPosition position = HintPosition.top, HintColor color = HintColor.none, HintSize size = HintSize.none, HintBehaivour behaivour = HintBehaivour.bounce, HintStyle style = HintStyle.rounded, string additionalClass = "", object htmlAttributes = null)
{
@HintElement("div", text, hint, position, color, size, behaivour, style, additionalClass, htmlAttributes)
}
@helper HintButton(string text, string hint, HintPosition position = HintPosition.top, HintColor color = HintColor.none, HintSize size = HintSize.none, HintBehaivour behaivour = HintBehaivour.bounce, HintStyle style = HintStyle.rounded, string additionalClass = "", object htmlAttributes = null)
{
@HintElement("button", text, hint, position, color, size, behaivour, style, additionalClass, htmlAttributes)
}

view raw
4. HtmlHint.cshtml
hosted with ❤ by GitHub

view raw
5. HtmlLink.cshtml
hosted with ❤ by GitHub

@*
Projenize sağ tıklayarak ASP.NET Folder ile App_Code klasörü oluşturulur.
App_Code klasörü altına bu dosyayı oluşturunuz.
Bu dosya projenize özel sadece daha kısa olarak sayfa içindeki buton ve link kodlarını yazmak içindir.
*@
@using System.Web.Mvc
@using Cumulus.Web.Infrastructure.Enumerations
@helper BackToListLink(string url, string text = "[[[Back to List]]]")
{
@HtmlLink.Link(url: url, color: Colors.@default, additionalClass: "", icon: "arrow-left", text: text, htmlAttributes: null)
}
@helper BackToListLink(UrlHelper url, string action = "Index", string text = "[[[Back to List]]]")
{
@HtmlLink.Link(url: url, action: action, color: Colors.@default, additionalClass: "", icon: "arrow-left", text: text, htmlAttributes: null)
}
@helper MiniNewLink(string url, string hint = "[[[New Item]]]")
{
@HtmlLink.Link(url: url, icon: "plus", color: Colors.primary, additionalClass: "btn-xs", hint: hint, hintColor: HintColor.info, hintPosition: HintPosition.top)
}
@helper MiniEditLink(string url, string hint = "[[[Edit]]]")
{
@HtmlLink.Link(url: url, icon: "edit", color: Colors.warning, additionalClass: "btn-xs", hint: hint, hintColor: HintColor.warning, hintPosition: HintPosition.top)
}
@helper MiniDeleteLink(string url, string hint = "[[[Delete]]]", string onclick = "return confirm('[[[Do you want to delete this item?]]]');")
{
@HtmlLink.Link(url: url, icon: "trash", color: Colors.danger, additionalClass: "btn-xs", hint: hint, hintColor: HintColor.error, hintPosition: HintPosition.right, htmlAttributes: new { onclick = onclick })
}
@helper MiniDetailsLink(string url, string hint = "[[[Details]]]")
{
@HtmlLink.Link(url: url, icon: "pencil", color: Colors.info, additionalClass: "btn-xs", hint: hint, hintColor: HintColor.info, hintPosition: HintPosition.left)
}
@helper CreateNewLink(string url, string text = "[[[Create New]]]")
{
@HtmlLink.Link(url: url, color: Colors.primary, additionalClass: "", icon: "plus", text: text, htmlAttributes: null)
}
@helper CreateNewLink(UrlHelper url, string action = "Create", string text = "[[[Create New]]]")
{
@HtmlLink.Link(url: url, action: action, color: Colors.primary, additionalClass: "", icon: "plus", text: text, htmlAttributes: null)
}
@helper EditLink(string url, string text = "[[[Edit]]]")
{
@HtmlLink.Link(url: url, color: Colors.warning, additionalClass: "", icon: "edit", text: text, htmlAttributes: null)
}
@helper DeleteLink(string url, string text = "[[[Delete]]]")
{
@HtmlLink.Link(url: url, color: Colors.danger, additionalClass: "", icon: "trash", text: text, htmlAttributes: null)
}
@helper DetailsLink(string url, string text = "[[[Delete]]]")
{
@HtmlLink.Link(url: url, color: Colors.info, additionalClass: "", icon: "search", text: text, htmlAttributes: null)
}
@helper CreateButton(string value = "[[[Create]]]")
{
@HtmlButton.Button(color: Colors.success, icon: "plus", value: value)
}
@helper SaveButton(string value = "[[[Save]]]")
{
@HtmlButton.Button(color: Colors.warning, icon: "floppy-disk", value: value)
}
@helper DeleteButton(string value = "[[[Delete]]]")
{
@HtmlButton.Button(color: Colors.danger, icon: "trash", value: value)
}

view raw
6. MyHtml.cshtml
hosted with ❤ by GitHub

@*
Sayfaya uygun modelinizi göndermeniz gerekecektir.
Kodlarda örnek bir model kullanılmıştır.
Gerekli model class'ının projenizde oluşturuluyor ve
Controller'dan gönderiliyor olması gerekiyor.
*@
@using GridMvc.Html
@using Cumulus.Web.Infrastructure.Enumerations
@model List<ModelItem>
<link href="~/Content/Gridmvc.css" rel="stylesheet" />
<link href="~/Content/gridmvc.datepicker.min.css" rel="stylesheet" />
<link href="~/Content/hint.min.css" rel="stylesheet" />
<script src="~/Scripts/gridmvc.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="col-md-6">
<h2>Index</h2>
</div>
<div class="col-md-6 text-right vertical-center">
@MyHtml.CreateNewLink(Url)
</div>
<div class="col-md-12">
<hr />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-10 col-md-offset-1">
@Html.Grid(Model).Columns(cols =>
{
cols.Add(col => col.Id, true);
cols.Add(col => col.Name).Encoded(false).Sanitized(false).RenderValueAs(x => HtmlHint.HintSpan(text: x.Name, hint: x.Description, size: HintSize.medium)).Titled("[[[Name]]]");
cols.Add(col => col.ReportTemplateTypeName).Titled("[[[Report Type]]]");
cols.Add(col => col.CreatedOn).Titled("[[[Created On]]]");
cols.Add(col => col.ModifiedOn).Titled("[[[Modified On]]]");
cols.Add(col => col.ComparativeReportName).Titled("[[[Comparative Report]]]");
cols.Add().Sanitized(false).Encoded(false).RenderValueAs(col => Html.Partial("IndexListCommandsPartial", col));
}).Filterable(true).Sortable(true).WithPaging(10).SetLanguage("tr").EmptyText("[[[Not found any report..]]]").Selectable(false)
</div>
</div>

view raw
7. Index.cshtml
hosted with ❤ by GitHub

@*
Index sayfasında tablodaki her satırda gösterilen küçük düğmeler için
kullanılan partial.
*@
@model ModelItem
@MyHtml.MiniDetailsLink(Url.Action("Details", new { id = Model.Id }))
@MyHtml.MiniEditLink(Url.Action("Edit", new { id = Model.Id }))
@MyHtml.MiniDeleteLink(Url.Action("Delete", new { id = Model.Id }), "[[[Delete]]]", "return confirm('[[[Do you want to delete %0 report?|||" + @Model.Name + "]]]');")

@model ModelItem
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="col-md-12">
<h2>[[[Report Name :]]] @Model.Name</h2>
<p class="text-justify">@Model.Description</p>
<hr />
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="col-md-8">
@Html.ValidationSummary(false, "", new { @class = "text-danger" })
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", placeholder = "[[[report name]]]" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger hidden-xs" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control", placeholder = "[[[report description]]]" } })
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger hidden-xs" })
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-push-2 text-right">
@MyHtml.BackToListLink(Url)
@MyHtml.SaveButton()
</div>
</div>
</div>
}
</div>
</div>
</div>

view raw
7.2. Edit.cshtml
hosted with ❤ by GitHub

@model ModelItem
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h2>Create</h2>
<hr />
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="col-md-8">
@Html.ValidationSummary(false, "", new { @class = "text-danger" })
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", placeholder = "[[[report name]]]" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger hidden-xs" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control", placeholder = "[[[report description]]]" } })
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger hidden-xs" })
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-push-2 text-right">
@MyHtml.BackToListLink(Url)
@MyHtml.CreateButton()
</div>
</div>
</div>
}
</div>
</div>
</div>

view raw
7.3. Create.cshtml
hosted with ❤ by GitHub

@model ModelItem
<h2>[[[Details]]]</h2>
<div>
<h4>[[[Report Details]]]</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Name)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Description)
</dt>
<dd>
@Html.DisplayFor(model => model.Description)
</dd>
</dl>
</div>
<p>
@MyHtml.BackToListLink(Url)
@MyHtml.EditLink(Url.Action("Edit", new { id = Model.Id }))
</p>

view raw
7.4. Details.cshtml
hosted with ❤ by GitHub

@model ModelItem
<h3>[[[Are you sure you want to delete this?]]]</h3>
<div>
<h4>[[[Cumulus Report]]]</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd>
@Html.DisplayFor(model => model.Name)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Description)
</dt>
<dd>
@Html.DisplayFor(model => model.Description)
</dd>
</dl>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-actions no-color">
@MyHtml.BackToListLink(Url)
@MyHtml.DeleteButton()
</div>
}
</div>

view raw
7.5. Delete.cshtml
hosted with ❤ by GitHub

kmb-udemy-reklam

 

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s