I am working on a web page in Asp.net Core MVC (dotnet 2.2) with authentication, and I want to replace Bootstrap with SemanticUI. I managed to do it on everything but Identity.
Or is there a way to build in user management but with custom written sites? (with Identity pages disabled).
I have changed layout for Identity, but there are still some bootstrap things and I dont know where are they from.
Page source:
<div class="row"> <!--Why is this here?-->
<div class="col-md-3"> <!--Why is this here?-->
<div class="ui grid">
<div class="four wide column">
<div class="ui vertical tabular menu">
<a class="item teal active" id="profile" href="/Identity/Account/Manage">Profile</a>
<a class="item" id="change-password" href="/Identity/Account/Manage/ChangePassword">Password</a>
<a class="item" id="two-factor" href="/Identity/Account/Manage/TwoFactorAuthentication">Two-factor authentication</a>
<a class="item" id="personal-data" href="/Identity/Account/Manage/PersonalData">Personal data</a>¨
</div>
</div>
</div>
Layout that is set in Identity:
<html>
<head>
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.7.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.7.6/dist/semantic.min.js"></script>
<title>Title</title>
<link rel="stylesheet" href="~/style.css">
</head>
<body>
<div class="ui inverted header">
<div class="ui inverted stackable menu">
<div class="ui container">
<div class="item">
<img src="~/spacex2.png" style="width: 15em">
</div>
<a class="item" asp-controller="Home" asp-action="Index">Domů</a>
<a class="item">Projekty</a>
<partial name="_LoginPartial" />
</div>
</div>
<div class="ui container">
<partial name="_CookieConsentPartial" />
#RenderBody()
</div>
<div class="ui inverted vertical footer segment" id="footer">
<div class="ui container">
<div class="ui stackable inverted divided equal height stackable grid">
<div class="three wide column">
<h4 class="ui inverted header">About</h4>
<div class="ui inverted link list">
Sitemap
Contact Us
Religious Ceremonies
Gazebo Plans
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header">Services</h4>
<div class="ui inverted link list">
Banana Pre-Order
DNA FAQ
How To Access
Favorite X-Men
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header">Footer Header</h4>
<p>Extra space for a call to action inside the footer that could help re-engage users.</p>
</div>
</div>
</div>
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
Related
Using VS 2017, bootstrap 4.1.1 for an MVC 5 page I am trying to add right side padding to an image as shown below but when I do the circle of the image is warped. If I take the padding off the circle is fine but then the text is too close to the circle on the right side:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<br />
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<img class="img-fluid float-left rounded-circle imgRightPadding20" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>
The image is a normal square image. I'd like to use the rounded-circle bootstrap feature but the circle gets warped when I add padding to the right side of the image. I need padding because text will flow on the right side of the image. How can I add padding to the right side of the image in a circle without getting the circle warped when using Bootstrap 4.1.1. Thanks in advance.
========== UPDATE July 5, 2018
For reference, below is what is in the _Layout.cshtml file of my MVC 5 project. If I adopt the proposed tag changes at the top of the original code then I guess I need to add that to the _Layout.cshtml file? Or are those changes added at the top only for those pages that have the discussed problem? I'm somewhat confused.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - some person Website</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body style="padding-top:unset; padding-bottom:unset">
<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
<div class="container">
Some Person
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="Index">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li>
<!-- <li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li>li>-->
</ul><!-- navbar-nav -->
</div><!-- container -->
</nav>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - ASP.NET MVC 5 web application built by some person</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
========== UPDATE July 7, 2018 11:30pm
Here is a picture of the bootstrap Nuget package I installed on my VS 2017 project:
========= UPDATE July 7, 2018 12:27 a.m.
The only solution I could use was to enclose the img tag with a div tag and apply the float-left and padding to the div tag not the img tag. All the other parts which come with VS 2017 are fine so I do not need the added script statements at the top of the MVC 5 nor the css link line at the top as well.
<div class="row">
<div class="col-sm-12">
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<div class="float-left imgRightPadding20">
<img class="img-fluid rounded-circle" src="~/Content/Images/someperson-200x200.jpg" alt="some person" />
</div>
<p>Some text about the person </p>
</figure>
</div>
</div>
Use d-flex class on figure tag, and add margin using mr-4 class (instead of padding on image).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<br />
<figure class="d-flex">
<img class="img-fluid rounded-circle mr-4" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>
</div>
OR
If you still want to use float , then just change padding-right: 20px to margin-right: 20px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<br />
<figure>
<style>
.imgRightPadding20 {
margin-right: 20px;
}
</style>
<img class="img-fluid float-left rounded-circle imgRightPadding20" src="https://picsum.photos/200" alt="PersonName" />
<p> Some text about this person. </p>
</figure>
</div>
</div>
The only solution I could use was to enclose the img tag with a div tag and apply the float-left and padding to the div tag not the img tag. All the other parts which come with VS 2017 are fine so I do not need the added script statements at the top of the MVC 5 nor the css link line at the top as well. The _Layout.cshtml file also remains unchanged. Below is all that was needed:
<div class="row">
<div class="col-sm-12">
<figure>
<style>
.imgRightPadding20 {
padding-right: 20px;
}
</style>
<div class="float-left imgRightPadding20">
<img class="img-fluid rounded-circle" src="~/Content/Images/someperson-200x200.jpg" alt="some person" />
</div>
<p>Some text about the person </p>
</figure>
</div>
</div>
I created a button on the masterpage to logout when I click it it's supposed to close session and redirect to Login.
Login is the start page and it's not within the mastepage, it's just a sigle aspx page.
I have no idea why it's not working. I put a breakpoint in the button method but when I click the button the event is not fired.
The Button is Salir
Please help me out.
this is the code fo the masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Principal.master.cs" Inherits="Web.Principal" %>
<!DOCTYPE html>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href="img/fav.png">
<!-- Author Meta -->
<meta name="author" content="Colorlib">
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>Destinos Naturales S.A</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!--
</head>
<body>
<form id="form1" runat="server">
<!-- Start Header Area -->
<header class="default-header">
<div class="container">
<div class="header-wrap">
<div class="header-top d-flex justify-content-between align-items-center">
<div class="logo">
<img src="img/logo.png" alt="">
</div>
<div class="main-menubar d-flex align-items-center">
<nav class="hide">
<a href="Principal.aspx">
<asp:Button ID="bntInicio" runat="server" Text="Inicio" BorderWidth="0" BackColor="Transparent"/>
</a>
<a href="Usuario.aspx">
<asp:Button ID="btnUsuarios" runat="server" Text="Usuarios" BorderWidth="0" BackColor="Transparent"/>
</a>
<a href="Articulos.aspx">
<asp:Button ID="btnArticulos" runat="server" Text="Artículos" BorderWidth="0" BackColor="Transparent"/>
</a>
<a>
<asp:Button ID="btnSalir" runat="server" Text="Salir" ForeColor="#800000" BorderWidth="0" BackColor="Transparent" OnClick="btnSalir_Click"/>
</a>
</nav>
<div class="menu-bar"><span class="lnr lnr-menu"></span></div>
</div>
</div>
</div>
</div>
</header>
<!-- End Header Area -->
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6>Destinos Naturales S.A</h6>
<p>
Destinos turísticos nacionales e internacionales.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget mail-chimp">
<h6 class="mb-20">Instragram</h6>
<ul class="instafeed d-flex flex-wrap">
<li><img src="img/i1.jpg" alt=""></li>
<li><img src="img/i2.jpg" alt=""></li>
<li><img src="img/i3.jpg" alt=""></li>
<li><img src="img/i4.jpg" alt=""></li>
<li><img src="img/i5.jpg" alt=""></li>
<li><img src="img/i6.jpg" alt=""></li>
<li><img src="img/i7.jpg" alt=""></li>
<li><img src="img/i8.jpg" alt=""></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="single-footer-widget">
<h6>¡Síguenos!</h6>
<p></p>
<div class="footer-social d-flex align-items-center">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
</div>
</div>
</div>
</div>
<div class="footer-bottom d-flex justify-content-center align-items-center flex-wrap">
<p class="footer-text m-0">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | Hecho por Alejandra Porras Araya</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</footer>
<!-- End footer Area -->
</body>
</html>
and This is button code:
protected void btnSalir_Click(object sender, EventArgs e)
{
Session["UsuarioIngresado"] = null;
Response.Redirect("Login.aspx");
}
You have an invalid html comment in your code. <!-- is the reason not triggering btnSalir_Click event.
Removing <!-- should fix the issue.
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!--
^^^^^
By nature, when using Visual Studio 2017 to create an MVC 4 application, the footer is constrained within a div with a class container body-content in _layout.cshtml. Of course, this makes the footer constrained within the div:
But what we want is for the footer to extend the entire width of the page, just like the header.
When I comment out the div,
the footer gets 100% of the width, but now so does everything else in the body:
Also there's a bunch of blank, white space beneath the footer. Here's the entire code for _layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/Style.css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar-gradient">
<div class="container">
<div class="navbar-header">
<!--<img src="~/images/lion-logo.png" />-->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="~/images/lion-logo.png" id="logo"/>
#Html.ActionLink("LION TECHNOLOGIES", "Index", "Home", new { area = "" }, new { #class = "navbar-brand", #id = "logo-text" })
</div>
<div class="navbar-collapse collapse" id="navbar-gradient">
<!--hide links-->
<ul class="nav navbar-nav" id="hidden">
<li>#Html.ActionLink("Reports", "Index", "Home")</li>
<li>#Html.ActionLink("Accounts", "About", "Home")</li>
<li>#Html.ActionLink("Settings", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<!-- <div class="container body-content">-->
#RenderBody()
<!--<hr />-->
<footer>
<p>© #DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
</footer>
<!--</div>-->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I've also tried wrapping everything just inside the <body> </body> tags with the container body-content div but that didn't have any effect. Any other suggestions?
If you are using bootstrap 3 then try to remove footer from the div which has class container and after that make another div after with class continer-fluid and put your footer code inside. .container is fixed width and .container-fluid is full width. Please see the grid system of bootstrap 3 http://getbootstrap.com/css/#grid
<div class="container body-content">
#RenderBody()
</div>
<div class="container-fluid">
<hr />
<footer>
<p>© #DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
</footer>
</div>
Since I'm still new to C#, I didn't realize that the line #RenderBody() renders the entire body section on its own. All I needed to do was this:
<div class="container body-content">
#RenderBody()
<!--<hr />-->
</div>
<footer>
<p>© #DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Close the div after #RenderBody()
The question is in regard of Bootstrap Image Gallery
blueimp.github.io/Gallery
With the extention
Bootstrap-Image-Gallery
Now to the Question: Why is it that my code doesnt show the Image-Gallery, it does show it as a gallery
The Code
Gallery View
#{
ViewBag.Title = "Gallery";
}
<h2>#ViewBag.Title.</h2>
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links">
<a href="~/Pictures/12.jpg" title="CityPicture" data-gallery>
<img src="~/Pictures/12.jpg" width="100"/>
</a>
<a href="~/Pictures/694x297_uluru_australia.jpg" title="CityStreet" data-gallery>
<img src="~/Pictures/694x297_uluru_australia.jpg" width="100" />
</a>
<a href="~/Pictures/ausmap.jpg" title="WaterSpring" data-gallery>
<img src="~/Pictures/ausmap.jpg" width="100" />
</a>
</div>
The Code _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - Australia</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Australia", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Gallery", "Gallery", "Home")</li>
<li>#Html.ActionLink("MapLocation", "MapLocation", "Home")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
#RenderSection("Scripts", required: false)
<hr />
<footer>
<p>© #DateTime.Now.Year - Jesper Kiel Jensen</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#*#Scripts.Render("~/bundles/bootstrap")*#
#Scripts.Render("~/bundles/googlemaps")
#Scripts.Render("~/bundles/bootstrap")
#*#Scripts.Render("~bundles/boostrapGallery")*#
#RenderSection("scripts", required: false)
</body>
</html>
The Code Bundles
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
/blueimp-gallery.min.js",
/bootstrap-image-gallery.js",
/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(I was unsure of how much code, I was to ctrl+v , so here is all of it.
This is what I get http://imgur.com/jBHHgKc
This is what I want http://blueimp.github.io/Bootstrap-Image-Gallery/
Hope you understand my question :)
/bootstrap.css",
/site.css",
/blueimp-gallery.min.css",
/bootstrap-image-gallery.css"));
I know it is too late to answer, you missed some CSS files, for complete list of css files and JavaScript files see my article
Image gallery in asp.net mvc with multiple file and size
// CSS files
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="~/Content/bootstrap-image-gallery.min.css">
// JavaScript files
#Scripts.Render("~/bundles/jquery")
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="~/Scripts/bootstrap-image-gallery.min.js"></script>
I have the following master page in asp .net:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="KezberProjectManager.master.cs" Inherits="KezberProjectManager.KezberProjectManager" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<style type="text/css">
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Calendar</li>
<li>Boss Stuff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<form id="form1" runat="server">
<div>
<div class="container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div> <!-- /container -->
</div>
</form>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
</body>
</html>
The navigation is made like this for every page:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Test</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Calendar</li>
<li>Boss Stuff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
What I cannot figure out is how could I make it so that, if admin is requesting the page, add the Boss Stuff link?
In terms of session management and all that it's all good, I'm able to determine in my code behind if the user is admin, what I do not know is how to add the boss link only if he is admin on page load.
What might be a 'best' or standard practice way to do this?
Thanks
I mean, literally, how do I, from my page load event, add links to my navigation. How do I go from the CS to the aspx?
Assuming you are using .Net membership, something as simple as this could be done if you want to do it in the page markup:
<% if (Page.User.IsInRole("Admin"))
{ %>
Boss Stuff
<% } %>