I'm doing an C# ASP.NET web application, just in my learning stage.
I have a navbar in my Site.Master and when I am in my Default.aspx (/~), the image can be seen.
But when I change page eg. to (~/Account/Register) the image can not be found.
The code to Image in my navbar:
<img style="margin:10px; margin-left:30px;" width="30px" height="30px" src="logo_abstract.png">
To see the whole code for my Site.Master and MainContent , here it is the relevant code, containing the above code:
<div class="navbar navbar-inverse navbar-fixed-top">
<img style="margin:10px; margin-left:30px;" width="30px" height="30px" src="brain_stransparent_abstract.png">
<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>
<a class="navbar-brand" runat="server" href="~/">TestApp</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contat</a></li>
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a runat="server" href="~/Account/Login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li>
<a runat="server" href="~/Account/Manage" title="Manage your account">
<img src="http://placehold.it/18x18" class="profile-image img-circle">
<%: Context.User.Identity.GetUserName() %> <b class="caret"></b>
</a>
</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - Test</p>
</footer>
</div>
I think, I need to set a path to my image, that is the same path from everywhere, but I don't know any word for this, to google or something.
This is because at runtime the path in internal pages can't locate the images so for any link or image paths you should use Page.ResolveUrl method
<img style="margin:10px; margin-left:30px;" width="30px" height="30px" src="<%= Page.ResolveUrl("~/Images/logo_abstract.png"); %>">
Hope it helps
Related
I am working on an MVC application, and I am trying to add links to the navigation bar including a dropdown menu and a search form. But whenever I add the dropdown-items and the form to the navbar I am getting this error
An unhandled exception occurred while processing the request.
XmlException: '.', hexadecimal value 0x00, is an invalid character. Line 1, position 1.
AspNetCoreGeneratedDocument.Views_Shared__Layout.b__35_1() in _Layout.cshtml
When I remove the added code the program runs perfectly
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - eTickets</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/eTickets.styles.css" asp-append-version="true" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="Movies" asp-action="Index">eTickets</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i>Management</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"> <i class="bi bi-camera-reels"></i> Cinemas</a>
<a class="dropdown-item" asp-controller="Producers" asp-action="Index"> <i class="bi bi-headset"></i> Produers</a>
<a class="dropdown-item" asp-controller="Actors" asp-action="Index"> <i class="bi bi-person-square"></i> Actors</a>
</div>
</li>
<li class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i>Movies</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" asp-controller="Movies" asp-action="Filter" style="padding-right:25px;">
<input name="searchString" type="text" class="form-control" placeholder="Search movie..." />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
</form>
</div>
</div>
</nav>
</header>
<div class="container-fluid">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - eTickets - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js" integrity="sha512-ewfXo9Gq53e1q1+WDTjaHAGZ8UvCWq0eXONhwDuIoaH8xz2r96uoAYaQCm1oQhnBfRXrvJztNXFsTloJfgbL5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
What could be the problem, I'm using bootstrap 5.1.3 I also added the popper.js package and also the bootstrap package but the error still pops up.
I have solved the problem, instead of using the div tag I replaced it with the ul tag
<ul class="navbar-nav flex-grow-1">
<li class="nav-item dropdown">
<a class=" nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="badge-info bi-gear"></i>Management</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" asp-controller="Cinemas" asp-action="Index"> <i class="bi bi-camera-reels"></i> Cinemas</a></li>
<li><a class="dropdown-item" asp-controller="Producers" asp-action="Index"> <i class="bi bi-headset"></i> Produers</a></li>
<li><a class="dropdown-item" asp-controller="Actors" asp-action="Index"> <i class="bi bi-person-square"></i> Actors</a></li>
</ul>
</li>
<li class="navbar-nav flex-grow-1">
<a class="nav-link text-dark" asp-controller="Movies" asp-action="Index"><i class="badge-info bi-film"></i>Movies</a>
</li>
and on the form I replaced the form tag with the div tag as follows
<div class="form-inline my-2 my-lg-0" asp-controller="Movies" asp-action="Filter" style="padding-right:25px;">
<input name="searchString" type="text" class="form-control" placeholder="Search movie..." />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"><i class="bi bi-search"></i></button>
</div>
Refer to the https://getbootstrap.com/docs/5.1/components/dropdowns/
I am new to webforms and am getting an error while trying to compile webform1.aspx which is a form next to the site master form:
I am trying to get in my headers and footers and the fixed set of navigation buttons in my webpage
I am getting the following error:
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS1061: 'site1_master' does not contain a definition for 'LinkButton4_Click' and no accessible extension method 'LinkButton4_Click' accepting a first argument of type 'site1_master' could be found (are you missing a using directive or an assembly reference?)
Source Error:
Line 55:
Line 56:
Line 57: <asp:LinkButton class="nav-link" ID="LinkButton4" runat="server"
Line 58: OnClick="LinkButton4_Click">View Books</asp:LinkButton>
Line 59:
Source File: D:\KUD Venkat\source\repos\ELibraryManagement\LibraryManagementSystem\Site1.Master Line: 57
Here is my code for Site1.master:
<html>
<head runat="server">
<title></title>
<!-- Bootstrap css -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- Datatable css -->
<link href="DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- FontAwesome css -->
<link href="FontAwesome/css/all.css" rel="stylesheet" />
<!-- Bootstrap Bundle -->
<script src="Bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Popper js -->
<script src="Bootstrap/js/popper.min.js"></script>
<!-- Bootstrap js -->
<script src="Bootstrap/js/bootstrap.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<img src="imgs/books.png" width="30" height="30"/>
E-Library
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="homepage.aspx">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Terms</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server"
OnClick="LinkButton4_Click">View Books</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton1" runat="server"
OnClick="LinkButton1_Click">User Login</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton2" runat="server"
OnClick="LinkButton2_Click">Sign Up</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton3" runat="server"
OnClick="LinkButton3_Click">Logout</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton7" runat="server"
OnClick="LinkButton7_Click">Hello user</asp:LinkButton>
</li>
</ul>
</div>
</nav>
</div>
<!-- Main Content Place Holder-->
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!-- Main Content Place Holder-->
<footer>
<p> © All right Reserved. <a class="footerlinks" href="#"
target="_blank">TataSteel</a> </p>
</footer>
</form>
</body>
</html>
My code in Web Form1.aspx:
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
CodeBehind="WebForm1.aspx.cs" Inherits="LibraryManagementSystem.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>
This is our Content webform
</h1>
</asp:Content>
I am trying to get in my header and footer and the corresponding menu buttons. However I am getting the error. What could be wrong . Could you help?
The solution should have the headers and footers along with the navigation buttons.
For example: when home is clicked #Url.Action("Information", "Admin") has to be viewed and when menu1 is clicked #Url.Action("Information1", "Admin1") has to be viewed.
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
#Url.Action("Information", "Admin")
</div>
<div id="menu1" class="tab-pane fade">
#Url.Action("Information1", "Admin1")
</div>
<div id="menu2" class="tab-pane fade">
#Url.Action("Information2", "Admin2")
</div>
<div id="menu3" class="tab-pane fade">
#Url.Action("Information3", "Admin3")
</div>
</div>
</div>
The tab-content divs are intended to be used if you have rendered the HTML for each tab already, and you simply wish to show/hide them on the page (which Bootstrap does using some JavaScript).
In your case, you actually want to show different pages, so you should add just the 'nav-tabs' HTML to each page, and use #Url.Action in the hrefs instead.
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
You will need to manually control the "active" class on the li on each page.
If you do actually want to pre-render the HTML so it all shows in one page, then rather than use Url.Action as in your question, you should be rendering a set of partial views using Html.RenderPartial instead.
Im working on a website built in .net
the following code
<asp:Repeater ID="RT_FAQ" runat="server">
<ItemTemplate>
<div class="faq-row" style="z-index: 976;">
<span class="itp-title"><%# DataBinder.Eval(Container.DataItem, "Question")%></span>
<div id="div1" style="display: none;"><%# DataBinder.Eval(Container.DataItem, "Answer")%></div>
</div>
</ItemTemplate>
</asp:Repeater>
outputs something along the lines of...
<div class="faq-row" style="z-index: 976;">
<span class="itp-title">Title</span>
<div id="div1" style="display: none;">Div contents</div>
</div>
<div class="faq-row" style="z-index: 976;">
<span class="itp-title">Title</span>
<div id="div1" style="display: none;">Div contents</div>
</div>
<div class="faq-row" style="z-index: 976;">
<span class="itp-title">Title</span>
<div id="div1" style="display: none;">Div contents</div>
</div>
<div class="faq-row" style="z-index: 976;">
<span class="itp-title">Title</span>
<div id="div1" style="display: none;">Div contents</div>
</div>
If you see all the divs are being given id="div1". I need to somehow give them all unique ID's so the first is div1, second div2 and so on.
Is this possible with .net?
Use the ItemIndex :
<div id="div<%# Container.ItemIndex %>" style="display: none;"><%# DataBinder.Eval(Container.DataItem, "Answer")%></div>
Just add + 1 if you want to start at 1 instead of 0.
I'm trying to create a part which is essentially a list
<ul>
<n2:DroppableZone ID="zoneSlideshowItems" ZoneName="SlideshowItems" AllowExternalManipulation="true" runat="server"></n2:DroppableZone>
</ul>
I have another part that i drop multiple times onto the above zone:
<li>
<a href="<%= CurrentItem.Link %>">
<img src="<%=CurrentItem.ImageUrl %>" alt="<%= CurrentItem.Title %>" />
<div class="overlayBox">
<h1><%= CurrentItem.OverlayHeader %></h1>
<p><%= CurrentItem.OverlayText %></p>
</div>
<div class="overlayBoxBack">
</div>
</a>
</li>
However when i look at the page source, its adding a div around each element that i drop onto the zone:
<div class='uc slideshowItem'> <<<< That Guy!!
<li>
<a href="http://gigpig.fm">
<img src="/Upload/skal.jpg" alt="Anthony is Jacinta" />
<div class="overlayBox">
<h1>Anthony</h1>
<p>im trying to tell you something</p>
</div>
<div class="overlayBoxBack">
</div>
</a>
</li>
</div>
Does anyone know how to stop that div from being generated?
Cheers!