Hi guys so i have a div slider element im trying to put in, but however i cannot seem to offset it at all my code is this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</asp:ContentPlaceHolder>
<style type="text/css">
.auto-style2 {
width: 277px;
height: 150px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="Navbar">
<div class="Log">
<ul>
<li>Login</li>
<li>Register</li>
</ul>
</div>
</div>
<div class="Header">
<%-- <div id="boxtest">
<input id="Textbox" type="text" name="test"/>
</div> --%><img alt="gmaa" class="auto-style2" src="GMAA%20Logo%20Large%20Resized.png" />
<div class="nav">
<ul>
<li>Parents
</li>
<li>Providers
</li>
<li>About Us
</li>
<li>Faqs
</li>
<li>Applicants
</li>
</ul>
</div>
</div>
<div class="slider">
<img src="GMG%20Logo%20Large%20slider.jpg" border="0" alt="GMG"/>
<img src="GMAA%20Logo%20Large%20slider.png" border="0" alt="GMAA" />
<img src="GMRC%20Logo%20Large%20Slider.png" border="0" alt="GMRC"/>
</div>
</form>
</div>
</body>
</html>
now from my css it seems that everything should work as i moved an element that was inside of a div earlier but now its just not working at all?, does anyone have any tips, also here is the css for the slider element:
div.slider {
width:1000px;
height:541px;
overflow:hidden;
margin:auto;
left:-50px;
}
Simply put,... in order to position a div within its parent, make the parent element position:relative;
<div style="position:relative; height:500px; width:100%;">
<div style="position:absolute; left: 60px; top:60px; width:10px; height:10px;">
absolute
</div>
</div>
Next... why not look into JS library which supports this out of the box.?
Related
I have 3 partial views:
_Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rand</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://kit.fontawesome.com/d3898ff33d.js" crossorigin="anonymous"></script>
<style>
.menu-category {
display: none;
}
.nav-link-designed-for:hover .menu-category {
display: block;
}
</style>
#await RenderSectionAsync("Styles", required: false)
</head>
<body>
<partial name="_Navbar" />
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - RandApp
</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>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
_Navbar
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" style="font-weight:600" asp-area="" asp-controller="Item" asp-action="Index">ANZA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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" style=" width: 35%; justify-content: space-evenly; text-transform: uppercase; font-weight: 600;">
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Men" asp-controller="Item" asp-action="GetData">Men</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Women" asp-controller="Item" asp-action="GetData">Women</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark nav-link-designed-for" asp-area="" asp-route-designedFor="Kids" asp-controller="Item" asp-action="GetData">Kids</a>
</li>
<!--
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Role" asp-action="Index">Role</a>
</li>
-->
<!--
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Admin" asp-action="Index">Admin Page</a>
</li>
-->
</ul>
<partial name="_LoginPartial" />
</div>
</div>
</nav>
<div class="menu-category">
<partial name="_MenuCategory" />
</div>
</header>
_MenuCategory
<!--some random text-->
<h1>Everything is working fine</h1>
In Navbar view, i have navbar with nav-items: Men, Women, Kids. My goal is to render "_MenuCategory" partial view on these nav-items hover.
In _Layout view you can see i am using tags but i doesn't work, i tried also some js code, it doesn't work too.
In other views i am using #section Styles {} for css code and #section Scripts {} for js code and it works fine but in partial views none of them works.
Exactly what is the problem and how can i fix it?
So I am using asp.net razor pages and I want to pass a property from one of my page models to be used in the asp-route-id tag helper in the _layout page. I tried injecting the specific page model onto the _layout page and accessing it through #Model tag, when i use this and hover over the nav bar, the route id i want to show comes up, but when i click on it i get this error:
and if I use viewdata, it disappears after clicking on a nav item and becomes null.
_layout.cshtml(shared)
#model VescovererWebApp.Pages.AccountModel
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VescovererWebApp</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</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">
<a class="navbar-brand" asp-area="" asp-page="/Index"><img id="logo" src="~/Logo/vescoverer.png" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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 flex-sm-row-reverse">
<partial name="_LoginPartial" />
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a id="cu" class="nav-link text-dark" asp-area="" asp-page="/Account" asp-route-id="#Model.currentUserID">Account</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Vescover" asp-route-id="#Model.currentUserID">Vescover</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Vescovered" asp-route-id="#Model.currentUserID">Vescovered</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Verify" asp-route-id="#Model.currentUserID">Verify</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - VescovererWebApp - <a asp-area="" asp-page="/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>
#RenderSection("Scripts", required: false)
</body>
</html>
<style>
#logo {
height: 40px;
width: 40px;
}
</style>
try to use AccountModel as a base class
public class VescoveredModel : AccountModel
or you can create interface IAccountModel
public class AccountModel:IAccountModel
and
public class VescoveredModel : IAccountModel
and change layout model
#model VescovererWebApp.Pages.IAccountModel
you have two chose:
1.with button
<form method="post" asp-page="Order" asp-page-handler="Details">
<input type="hidden" name="Id" value="#item.Id">
<input type="submit" value="Show" >
</form>
2.with tag a
add #addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers to _ViewImports.cshtml
and use
<a asp-page="/Supplier" asp-route-id="#item.Id">Click</a>
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.
I'm following an older book (2017) so the code is outdated
I'm having a problem connecting bootstrap to _Layout.cshtml
I believe the problem is this link to bootstrap
<link rel="stylesheet" asp-href-include="/lib/bootstrap/dist/**/*.min.css"
asp-href-exclude="**/*-reboot*,**/*-grid" />
Since there is no wwwroot folder anymore. How do I link bootstrap correctly?
Here is my _Layout.cshtml code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" asp-href-include="/lib/bootstrap/dist/**/*.min.css"
asp-href-exclude="**/*-reboot*,**/*-grid" />
<title>SportsStore</title>
</head>
<body>
<div class="navbar navbar-inverse bg-inverse" role="navigation">
<a class="navbar-brand"
href="#">SPORTS STORE</a>
</div>
<div class="row m-1 p-1">
<div id="categories" class="col-3">
Put something useful here later.
</div>
<div class="col-9">
#RenderBody()
</div>
</div>
</body>
</html>
Here is my solution explorer image
Here is the List.cshtml that I'm trying to use bootstrap with
#model ProductsListViewModel
#foreach (var p in Model.Products)
{
<div class="card card-outline-primary m-1 p-1">
<div class="bg-faded p-1">
<h4>
#p.Name
<span class="badge badge-pill badge-primary" style="float:right">
<small>#p.Price.ToString("")</small>
</span>
</h4>
</div>
<div class="card-text p-1">#p.Description</div>
</div>
}
<div page-model="#Model.PagingInfo" page-action="List" page-classes-enabled="true"
page-class="btn" page-class-normal="btn-secondary"
page-class-selected="btn-primary" class="btn-group pull-right m-1">
</div>
You can use CDN links.
You should link the css library in the head tag, and scripts to last of body tag.
<head>
.....
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
......
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
I have create a website with masterpage. Apart from this, I also create a child page called - Home.aspx, which inside this home.aspx file, I have use a Jquery slider to display slide show of images.
The images had appeared successfully at first(no errors). However, upon adding more child pages and adding an Login control to the masterpage, the images are not appearing anymore. In addition, the file path of the images had appeared errors - "Warning File 'Images/h1.jpg' was not found."
I had tried to comment up the Login control inside the masterpage to check whether does it affect the jquery and eventually it did not.
Here is my code of the master page head section whereby I add in the jquery:
<head runat="server">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>BedOfRoses</title>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.slidertron-1.0.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Following is the Home.aspx file code:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="banner">
<div id="slider">
<div class="viewer">
<div class="reel">
<div class="slide"> <img src="Images/H1.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H2.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H3.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H4.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H4.jpg" alt="" /> </div>
<div class="slide"> <img src="Images/H6.jpg" alt="" /> </div>
</div>
</div>
</div>
<script type="text/javascript">
$('#slider').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
advanceDelay: 3000,
speed: 'slow'
});
</script>
</div>
Are these pages placed in a separate folder than the root one? Use the root selector instead of the current dir selector?
This
<div class="slide"> <img src="/Images/H1.jpg" alt="" /> </div>
instead of this
<div class="slide"> <img src="Images/H1.jpg" alt="" /> </div>