Button & Link Helper Methods In MVC

-Button & Link Helper Methods In MVC

Gerekli açıklamalar kod içerisine yapılmıştır.

1. Nugets

// 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)

2. RazorEnums.cs

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
    }
}

3. HtmlButton.cshtml

@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>
}

4. HtmlHint.cshtml

@* 
  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)
}

5. HtmlLink.cshtml

@* 
  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
@using Cumulus.Web.Infrastructure.Extensions

@functions
{
    static MvcHtmlString Raw(string text)
    {
        return MvcHtmlString.Create(text);
    }
}

@helper  Link(string url, Colors color = Colors.@default, string additionalClass = "", string icon = "plus", string text = "", object htmlAttributes = null)
{

        string attributes = string.Empty;

        if (htmlAttributes != null)
        {
            RouteValueDictionary attrs = null;

            if (htmlAttributes.GetType().IsAnonymousType())
            {
                attrs = System.Web.Mvc.HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
            }
            else if (htmlAttributes is IDictionary<string, object>)
            {
                attrs = new RouteValueDictionary((IDictionary<string, object>)htmlAttributes);
            }

            attributes = string.Join(" ", attrs.Select(x => x.Key.Replace("_", "-") + "=\"" + x.Value + "\""));
        }

        string _text = !string.IsNullOrEmpty(text) ? "&nbsp;" + text : "";

        <a href="@url" class="btn btn-@color @additionalClass" @Raw(attributes)>
            <span class="glyphicon glyphicon-@icon"></span>@Raw(_text)
        </a>
}

@helper Link(UrlHelper url, string action, string controller, Colors color = Colors.@default, string additionalClass = "", string icon = "plus", string text = "", object htmlAttributes = null)
{
        @HtmlLink.Link(url.Action(action, controller), color, additionalClass, icon, text, htmlAttributes)
}

@helper Link(UrlHelper url, string action, Colors color = Colors.@default, string additionalClass = "", string icon = "plus", string text = "", object htmlAttributes = null)
{
        @HtmlLink.Link(url.Action(action), color, additionalClass, icon, text, htmlAttributes)
}

@helper Link(string url, Colors color = Colors.@default, string additionalClass = "", string icon = "plus", string text = "", string hint = "", HintPosition hintPosition = HintPosition.top, HintColor hintColor = HintColor.none, HintSize hintSize = HintSize.none, HintBehaivour hintBehaivour = HintBehaivour.bounce, HintStyle hintStyle = HintStyle.rounded, object htmlAttributes = null)
{
        additionalClass = HtmlHint.GetHintCssClasses(hintPosition, hintColor, hintSize, hintBehaivour, hintStyle, additionalClass);

        var htmlAttributesDic = System.Web.Mvc.HtmlHelper.ObjectToDictionary(htmlAttributes);
        htmlAttributesDic.Add("data_hint", hint);

        @HtmlLink.Link(url, color, additionalClass, icon, text, htmlAttributesDic)
}

@helper Link(UrlHelper url, string action, Colors color = Colors.@default, string additionalClass = "", string icon = "plus", string text = "", string hint = "", HintPosition hintPosition = HintPosition.top, HintColor hintColor = HintColor.none, HintSize hintSize = HintSize.none, HintBehaivour hintBehaivour = HintBehaivour.bounce, HintStyle hintStyle = HintStyle.rounded, object htmlAttributes = null)
{
        @HtmlLink.Link(url.Action(action), color, additionalClass, icon, text, hint, hintPosition, hintColor, hintSize, hintBehaivour, hintStyle, htmlAttributes)
}

@helper Link(UrlHelper url, string action, string controller, Colors color = Colors.@default, string additionalClass = "", string icon = "plus", string text = "", string hint = "", HintPosition hintPosition = HintPosition.top, HintColor hintColor = HintColor.none, HintSize hintSize = HintSize.none, HintBehaivour hintBehaivour = HintBehaivour.bounce, HintStyle hintStyle = HintStyle.rounded, object htmlAttributes = null)
{
        @HtmlLink.Link(url.Action(action, controller), color, additionalClass, icon, text, hint, hintPosition, hintColor, hintSize, hintBehaivour, hintStyle, htmlAttributes)
}

6. MyHtml.cshtml

@* 
  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)
}

7. Index.cshtml

@*
  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>

7.1. IndexListCommandsPartial.cshtml

@* 
  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 + "]]]');")

7.2. Edit.cshtml

@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>

7.3. Create.cshtml

@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>

7.4. Details.cshtml

@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>

7.5. Delete.cshtml

@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>