Last active
March 22, 2018 01:28
-
-
Save luylucas10/2970d92f0677374f56cf6825d375040a to your computer and use it in GitHub Desktop.
Menu Dinâmico
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@{ | |
Layout = null; | |
} | |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>@ViewBag.Title - Meu .NET</title> | |
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> | |
<!-- Bootstrap --> | |
<link href="~/Content/bootstrap.min.css" rel="stylesheet" /> | |
<!-- Font Awesome --> | |
<link href="~/Content/font-awesome.min.css" rel="stylesheet" /> | |
<!-- AdminLTE --> | |
<link href="~/Content/adminlte/css/AdminLTE.min.css" rel="stylesheet" /> | |
<link href="~/Content/adminlte/css/skins/skin-blue.min.css" rel="stylesheet" /> | |
@RenderSection("styles", false) | |
</head> | |
<body class="skin-blue sidebar-mini sidebar-collapse" style="height: auto; min-height: 100%;"> | |
<div class="wrapper" style="height: auto; min-height: 100%;"> | |
<!-- Topbar--> | |
@Html.Partial("_Topbar") | |
<!-- Sidebar--> | |
<div id="sidebar" data-url="@Url.Action("Sidebar", "Menu")"></div> | |
<!-- Content --> | |
<div class="content-wrapper" style="min-height: 536px;"> | |
<section class="content container-fluid"> | |
@RenderBody() | |
</section> | |
</div> | |
<!-- Footer--> | |
@Html.Partial("_Footer") | |
</div> | |
<!-- jQuery--> | |
<script src="~/Scripts/jquery-3.3.1.min.js"></script> | |
<!-- Boostrap --> | |
<script src="~/Scripts/bootstrap.min.js"></script> | |
<!-- AdminLTE --> | |
<script src="~/Content/adminlte/js/adminlte.min.js"></script> | |
<!-- Último passo para carregar o menu de forma dinâmica --> | |
<script> | |
$("#sidebar").load($("#sidebar").data("url"), | |
function () { | |
$("ul[data-widget='tree']").tree(); | |
}); | |
</script> | |
@RenderSection("scripts", false) | |
</body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header class="main-header"> | |
<a class="logo"> | |
<span class="logo-mini"> | |
<img src="/Content/img/logo-25x25.png" alt="" /> | |
</span> | |
<span class="logo-lg"> | |
<img src="/Content/img/logo-25x25.png" alt="" /> | |
@{ | |
string title = "Meu .NET MVC"; | |
} | |
@title | |
</span> | |
</a> | |
<nav class="navbar navbar-static-top" role="navigation"> | |
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> | |
<span class="sr-only">Toggle navigation</span> | |
</a> | |
<div class="navbar-custom-menu"> | |
<ul class="nav navbar-nav"> | |
<li class="dropdown user user-menu"> | |
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> | |
<span class="hidden-xs">Usuário</span> | |
</a> | |
<ul class="dropdown-menu" style="width: 100px !important;"> | |
@*<li class="user-footer"> | |
<div class="pull-left"> | |
<a href="@Url.Action("Index", "Manage")" class="btn btn-default btn-flat">Conta</a> | |
</div> | |
<div class="pull-right"> | |
@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" })) | |
{ | |
@Html.AntiForgeryToken() | |
<a href="javascript:document.getElementById('logoutForm').submit()" class="btn btn-default btn-flat">Sair</a> | |
} | |
</div> | |
</li>*@ | |
</ul> | |
</li> | |
</ul> | |
</div> | |
</nav> | |
</header> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@model Meudotnet.MenuDinamico.Mvc.ViewModels.MenuViewModel | |
@{ | |
ViewBag.Title = "Cadastrar Menu"; | |
} | |
@section styles | |
{ | |
<link href="~/Content/select2-4.0.5/dist/css/select2.css" rel="stylesheet" /> | |
<link href="~/Content/adminlte/css/alt/AdminLTE-select2.css" rel="stylesheet" /> | |
} | |
@using (Html.BeginForm("Create", "Menu", FormMethod.Post)) | |
{ | |
<div class="box box-info"> | |
<div class="box-header with-border"> | |
<h3 class="box-title">Novo Menu</h3> | |
</div> | |
<!-- /.box-header --> | |
<!-- form start --> | |
<form class="form-horizontal"> | |
<div class="box-body"> | |
<div class="form-group"> | |
@Html.LabelFor(x => x.RootId) | |
@Html.DropDownListFor(x => x.RootId, new List<SelectListItem>(), new { @class = "form-control" }) | |
</div> | |
<div class="form-group"> | |
@Html.LabelFor(x => x.Name) | |
@Html.TextBoxFor(x => x.Name, new { @class = "form-control" }) | |
</div> | |
<div class="form-group"> | |
@Html.LabelFor(x => x.Order) | |
@Html.TextBoxFor(x => x.Order, new { @class = "form-control", type = "number" }) | |
</div> | |
<div class="form-group"> | |
@Html.LabelFor(x => x.Level) | |
@Html.TextBoxFor(x => x.Level, new { @class = "form-control", type = "number" }) | |
</div> | |
</div> | |
<!-- /.box-body --> | |
<div class="box-footer"> | |
<button type="submit" class="btn btn-info pull-right"> | |
<span class="fa fa-save"></span> | |
</button> | |
</div> | |
<!-- /.box-footer --> | |
</form> | |
</div> | |
} | |
@section scripts | |
{ | |
<script src="~/Content/select2-4.0.5/dist/js/select2.js"></script> | |
<script src="~/Content/select2-4.0.5/dist/js/i18n/pt-BR.js"></script> | |
<script> | |
$(function () { | |
$("select").select2({ | |
placeholder: "Selecione menu pai", | |
language: "pt-BR", | |
width: "100%", | |
allowClear: true, | |
ajax: { | |
url: "/Menu/Search", | |
type: "GET", | |
delay: 400, | |
data: function (params) { | |
var query = { | |
name: params.term, | |
page: params.page || 1 | |
} | |
return query; | |
}, | |
processResults: function (data, params) { | |
params.page = params.page || 1; | |
return { | |
results: $.map(data.Result, | |
function (item, index) { | |
var k = { id: item.Id, text: item.Name }; | |
return k; | |
}), | |
pagination: { | |
more: (params.page * 15) < data.Total | |
} | |
}; | |
} | |
} | |
}); | |
}); | |
</script> | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@model Meudotnet.MenuDinamico.Mvc.ViewModels.MenuViewModel | |
@{ | |
ViewBag.Title = "Delete"; | |
} | |
@using (Html.BeginForm("ConfirmDelete", "Menu", FormMethod.Post)) | |
{ | |
<div class="box box-danger"> | |
<div class="box-header"> | |
<h5 class="box-title">Delete Menu</h5> | |
</div> | |
<div class="box-body"> | |
@Html.HiddenFor(x => x.Id) | |
<div class="form-group"> | |
@Html.LabelFor(x => x.Name)<br/> | |
@Html.DisplayTextFor(x => x.Name) | |
</div> | |
<button class="btn btn-danger"> | |
<span class="fa fa-trash"></span> | |
</button> | |
</div> | |
</div> | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@model Meudotnet.MenuDinamico.Mvc.ViewModels.MenuViewModel | |
@{ | |
ViewBag.Title = "Cadastrar Menu"; | |
} | |
@section styles | |
{ | |
<link href="~/Content/select2-4.0.5/dist/css/select2.css" rel="stylesheet" /> | |
<link href="~/Content/adminlte/css/alt/AdminLTE-select2.css" rel="stylesheet" /> | |
} | |
@using (Html.BeginForm("Edit", "Menu", FormMethod.Post)) | |
{ | |
<div class="box box-info"> | |
<div class="box-header with-border"> | |
<h3 class="box-title">Editar Menu</h3> | |
</div> | |
<!-- /.box-header --> | |
<!-- form start --> | |
<form class="form-horizontal"> | |
<div class="box-body"> | |
@Html.HiddenFor(x => x.Id) | |
<div class="form-group"> | |
@Html.LabelFor(x => x.RootId) | |
@Html.DropDownListFor(x => x.RootId, new List<SelectListItem>(), new {@class = "form-control", data_value=Model.RootId}) | |
</div> | |
<div class="form-group"> | |
@Html.LabelFor(x => x.Name) | |
@Html.TextBoxFor(x => x.Name, new {@class = "form-control"}) | |
</div> | |
<div class="form-group"> | |
@Html.LabelFor(x => x.Order) | |
@Html.TextBoxFor(x => x.Order, new {@class = "form-control", type = "number"}) | |
</div> | |
<div class="form-group"> | |
@Html.LabelFor(x => x.Level) | |
@Html.TextBoxFor(x => x.Level, new {@class = "form-control", type = "number"}) | |
</div> | |
</div> | |
<!-- /.box-body --> | |
<div class="box-footer"> | |
<button type="submit" class="btn btn-info pull-right"> | |
<span class="fa fa-save"></span> | |
</button> | |
</div> | |
<!-- /.box-footer --> | |
</form> | |
</div> | |
} | |
@section scripts | |
{ | |
<script src="~/Content/select2-4.0.5/dist/js/select2.js"></script> | |
<script src="~/Content/select2-4.0.5/dist/js/i18n/pt-BR.js"></script> | |
<script> | |
$(function () { | |
var select = $("#RootId"); | |
select.select2({ | |
placeholder: "Selecione menu pai", | |
language: "pt-BR", | |
width: "100%", | |
allowClear: true, | |
ajax: { | |
url: "/Menu/Search", | |
type: "GET", | |
delay: 400, | |
data: function (params) { | |
var query = { | |
name: params.term, | |
page: params.page || 1 | |
} | |
return query; | |
}, | |
processResults: function (data, params) { | |
params.page = params.page || 1; | |
return { | |
results: $.map(data.Result, | |
function (item, index) { | |
var k = { id: item.Id, text: item.Name }; | |
return k; | |
}), | |
pagination: { | |
more: (params.page * 15) < data.Total | |
} | |
}; | |
} | |
} | |
}); | |
var paiId = select.data("value"); | |
if (paiId) { | |
var paiOpt = $("<option selected>Carregando...</option>").val(paiId); | |
select.append(paiOpt).trigger("change"); | |
$.ajax({ | |
type: "GET", | |
url: "/Menu/Search", | |
data: { id: paiId }, | |
dataType: "json" | |
}).then(function (data) { | |
paiOpt.text(data.Result[0].Name).val(data.Result[0].Id); | |
paiOpt.removeData(); | |
select.trigger("change"); | |
}); | |
} | |
}); | |
</script> | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System.Collections.Generic; | |
using System.Linq; | |
using System.Text; | |
using System.Web; | |
using System.Web.Mvc; | |
using Meudotnet.MenuDinamico.Mvc.ViewModels; | |
namespace Meudotnet.MenuDinamico.Mvc.Helpers | |
{ | |
public static class HtmlExtensions | |
{ | |
public static IHtmlString Sidebar(this HtmlHelper helper, IList<MenuViewModel> menus, UrlHelper url) | |
{ | |
var html = new StringBuilder(); | |
BuildTags(menus, ref html, 0, url); | |
var ht = html.ToString(); | |
return new MvcHtmlString(ht); | |
} | |
private static void BuildTags(IList<MenuViewModel> list, ref StringBuilder html, int index, UrlHelper helper) | |
{ | |
while (true) | |
{ | |
if (index < list.Count) | |
{ | |
if (list[index].Menus != null && list[index].Menus.Any()) | |
{ | |
html.AppendLine($@" <li class='treeview'>"); | |
html.AppendLine($@" <a href='#'>"); | |
html.AppendLine($@" <i class='{list[index].Icon}'></i>"); | |
html.AppendLine($@" <span>{list[index].Name}</span>"); | |
html.AppendLine($@" <span class='pull-right-container'>"); | |
html.AppendLine($@" <i class='fa fa-angle-left pull-right'></i>"); | |
html.AppendLine($@" </span>"); | |
html.AppendLine($@" </a>"); | |
html.AppendLine($@" <ul class='treeview-menu'>"); | |
BuildTags((List<MenuViewModel>) list[index].Menus, ref html, 0, helper); | |
html.AppendLine($@" </ul>"); | |
html.AppendLine($@" </li>"); | |
} | |
else | |
{ | |
html.AppendLine($@" <li>"); | |
html.AppendLine($@" <a href='{helper.Action(list[index].Action, list[index].Controller)}'>"); | |
html.AppendLine($@" <i class='{list[index].Icon}'></i>"); | |
html.AppendLine($@" <span>{list[index].Name}</span>"); | |
html.AppendLine($@" </a>"); | |
html.AppendLine($@" </li>"); | |
} | |
index = index + 1; | |
continue; | |
} | |
break; | |
} | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@{ | |
ViewBag.Title = "Menus"; | |
var url = (string)ViewBag.Url; | |
} | |
@section styles | |
{ | |
<link href="~/Content/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet" /> | |
} | |
<div class="panel panel-info"> | |
<div class="panel-heading clearfix"> | |
<div class="pull-right"> | |
<a class="btn btn-primary" href="#"> | |
<span class="fa fa-plus"></span> | |
</a> | |
</div> | |
<h4 class="panel-title">Menus Cadastrados</h4> | |
</div> | |
<div class="panel-body"> | |
@Html.Hidden("Url", url) | |
<table></table> | |
</div> | |
</div> | |
@section scripts | |
{ | |
<script src="~/Content/bootstrap-table/dist/bootstrap-table.js"></script> | |
<script src="~/Content/bootstrap-table/dist/locale/bootstrap-table-pt-BR.js"></script> | |
<script src="~/Scripts/menu/index.js"></script> | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function rowActions(value, row, index) { | |
return [ | |
"<div class='pull-right'>", | |
"<a href='/Menu/Edit/"+row.Id+"' class='btn btn-sm btn-primary' title='Atualizar Registro'><span class='fa fa-pencil'></span></a>", | |
"<a href='/Menu/Delete/"+row.Id+"' class='btn btn-sm btn-danger' title='Excluir Registro'><span class='fa fa-trash'></span></a>", | |
"</div>"].join("\n"); | |
}; | |
$(function () { | |
$("table").bootstrapTable({ | |
url: $("#Url").val(), | |
queryParamsType: "", | |
queryParams: function (params) { | |
var query = { | |
page: params.pageNumber, | |
pageSize: params.pageSize, | |
orderby: params.sortName, | |
sort: params.sortOrder, | |
name: params.searchText | |
}; | |
return query; | |
}, | |
columns: [ | |
{ field: "Id", visible: false }, | |
{ field: "Name", title: "Menu", sortable: true, halign: "center" }, | |
{ field: "Level", title: "Nível", halign: "center" }, | |
{ title: "", formatter: rowActions, width: "100px" } | |
], | |
search: true, | |
searchText: "", | |
searchOnEnterKey: true, | |
classes: "table table-responsive table-hover", | |
idField: "Id", | |
locale: "pt-BR", | |
method: "GET", | |
cache: false, | |
dataField: "Result", | |
totalField: "Total", | |
pagination: true, | |
paginationLoop: false, | |
sidePagination: "server", | |
pageNumber: 1, | |
pageSize: 15, | |
pageList: [15, 30, 45, 60], | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment