Adding navigation links based on privillages? - c#

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

Related

Remove Bootstrap from from Identity

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>

Problem with getting layout to next page?

I use a _layout cshtml to get all the same start screen. It works on the index page but when i go to the next the css of bootstrap is missing. I added a bootstrap layout but know it doesnt do the layout on the next screen. I could also send you the zip if you want with all the code. The index false exist out only the layout page without any content when you go to an other page you get the text of the layout but not the bootstrap css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Project</title>
<environment include="Development">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/fancybox/jquery.fancybox.css" rel="stylesheet">
<link href="css/jcarousel.css" rel="stylesheet" />
<link href="css/flexslider.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<!-- Theme skin -->
<link href="skins/default.css" rel="stylesheet" />
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png" />
<link rel="shortcut icon" href="ico/favicon.png" />
</environment>
</head>
<body>
<div id="wrapper">
<header>
<div class="container ">
<!-- end toggle link -->
<div class="row nomargin">
<div class="span12">
<div class="headnav">
<ul>
<li><a asp-area="" asp-controller="Home" asp-action="Registreer"><i class="icon-user"></i>Registreer</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Login" data-toggle="modal">Inloggen</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="span2">
<div class="logo">
<a asp-area="" asp-controller="Home" asp-action="Index"><img src="img/logo_kraan.jpg" alt="" class="logo" /></a>
</div>
</div>
<div class="span10">
<div class="navbar navbar-static-top ">
<div class="navigation">
<nav>
<ul class="nav topnav">
<li class="">
<a asp-area="" asp-controller="Home" asp-action="Index">Home</i></a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Statuten">Statuten</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Bestuur">Raad van bestuur</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Seminaries">Seminaries</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="ESCL">Over ESCL</a>
</li>
<li class="dropdown">
Opdrachten <i class="icon-angle-down"></i>
<ul class="dropdown-menu bold">
<li><a asp-area="" asp-controller="Home" asp-action="OverheidsOpdrachten">OverheidsOpdrachten</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="PrivateOpdrachten">Private Opdrachten</a></li>
</ul>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Forum">forum</a>
</li>
<li>
<a asp-area="" asp-controller="Home" asp-action="Contact">Contact </a>
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</div>
</div>
</header>
</div>
<partial name="_CookieConsentPartial" />
<div class="container body-content">
#RenderBody()
<hr />
</div>
<environment include="Development">
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jcarousel/jquery.jcarousel.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/google-code-prettify/prettify.js"></script>
<script src="js/portfolio/jquery.quicksand.js"></script>
<script src="js/portfolio/setting.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.ba-cond.min.js"></script>
<script src="js/jquery.slitslider.js"></script>
<script src="js/animate.js"></script>
<!-- Template Custom JavaScript File -->
<script src="js/custom.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
<footer>
<div class="container">
<div class="row">
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Browse pages</h5>
<ul class="link-list">
<li>About our company</li>
<li>Our services</li>
<li>Meet our team</li>
<li>Explore our portfolio</li>
<li>Get in touch with us</li>
</ul>
</div>
</div>
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Important stuff</h5>
<ul class="link-list">
<li>Press release</li>
<li>Terms and conditions</li>
<li>Privacy policy</li>
<li>Career center</li>
<li>Flattern forum</li>
</ul>
</div>
</div>
<div class="span4">
<div class="widget">
<h5 class="widgetheading">Get in touch with us</h5>
<address>
<strong>Flattern studio, Pte Ltd</strong><br>
Springville center X264, Park Ave S.01<br>
Semarang 16425 Indonesia
</address>
<p>
<i class="icon-phone"></i> (123) 456-7890 - (123) 555-7891 <br>
<i class="icon-envelope-alt"></i> email#domainname.com
</p>
</div>
</div>
</div>
</div>
<div id="sub-footer">
<div class="container">
<div class="row">
<div class="span6">
<div class="copyright">
<p>
<span>©BVBR-ABDC</span>
</p>
</div>
</div>
<div class="span6">
<ul class="social-network">
<li><i class="icon-facebook icon-square"></i></li>
<li><i class="icon-twitter icon-square"></i></li>
<li><i class="icon-linkedin icon-square"></i></li>
<li><i class="icon-pinterest icon-square"></i></li>
<li><i class="icon-google-plus icon-square"></i></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</html>
Bootstrap template:
https://bootstrapmade.com/flattern-multipurpose-bootstrap-template/
All the file references you use in this sample are relative to the page path, so the files need to be there. Since ASP.net will start the default "home" page at (for instance) at http://localhost:33333/ the browser will request that url + css/filename.css and this will work for the first page.
Although if you navigate to http://localhost:33333/Home/Index (which is essentially the same page) it won't work anymore, because the browser will request the css at url + /home/index relative path + css/filename.css (resulting in not finding http://localhost:333333/home/css/filename.css )
You can resolve this quite easily by altering your layout.cshtml from this:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
to this:
<link href="/css/bootstrap.css" rel="stylesheet" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" />
<!-- ^ --->
as you can see there is an added slash (/) before the file path. This will instruct the browser to always use the root of the url and not a relative path to the current location.

Bootstrap 4.1.1 class option for rounded-circle is warped on MVC 5 page when adding padding

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>

Response.Redirect not working when button on mastepage is clicked

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">
<!--
^^^^^

Bootstrap drowpdown not working when placed in .net masterpage

I have placed a bootstrap navbar in a .net masterpage. This code runs perfectly when on another page without the masterpage, but if on the masterpage, it does not work.
<link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../plugins/pnotify/css/jquery.pnotify.default.icons.css" rel="stylesheet"
type="text/css" />
<script src="../plugins/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.15/jquery.form-validator.min.js"
type="text/javascript"></script>
<script src="../plugins/notify/notify.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">XX</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>FAQ</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Log Out</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Anyone? About to throw my computer out the window.
/Bob
if you check your browser inspection tool, I think you may be having this error:
Error("Bootstrap requires jQuery")
Bootstrap.js has a jQuery dependency. So you need to load the jQuery first script before bootstrap.js.
this should be the order. right above the </body> tab. The path should be relative to where you have placed your file.
NOTE: use /parent_folder/..path_to_your_files
<script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
Hope this helps. :-)

Categories