Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button & Link Helper Methods In MVC
// 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)
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
}
}
@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>
}
@*
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)
}
@*
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)
}
@*
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>
@*
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>
@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>
@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>
@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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.