I'm new to Asp.net and bootstrap. I referenced bootstrap.min.css in my html and I have gridview control I want to style with "table table-striped" class. Visual studio intelisens seems to fail to recognize table-striped class and it's not working when the program runs. Any ideas what I'm doing wrong?
Here's my html source:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="NotDelivered.aspx.cs" Inherits="PapaBobs.NotDelivered" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server" class ="container">
<div class ="form-group">
<asp:GridView ID="notDeliveredGrid" runat="server" CssClass ="table table-hover table-striped"></asp:GridView>
</div>
</form>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery-3.3.1.min.js"></script>
</body>
</html>
Your current href value specifies relative path to css file and browser just cannot load it because this path doesn't exist. Update link to the following
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
Also consider using bundling.
Related
This question already has answers here:
Content controls have to be top-level controls in a content page or a nested master page that references a master page
(2 answers)
Closed 6 years ago.
I have added a masterpage to my project, and now when i try to inherit this masterpage to one page, I get this error:
'Content controls have to be top-level controls in a content page or a nested master page that references a master page.'
master_page.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master_page.master.cs"Inherits="KitchenCounter.master_pages.MasterPage"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</asp:Content>
</head>
<body>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<div class="menuBar">
<ul>
<li class="hvr-bounce-to-bottom active"><a>Home</a></li>
<li class="hvr-bounce-to-bottom">Account</li>
<li class="hvr-bounce-to-bottom">Recipes</li>
<li class="hvr-bounce-to-bottom">Contact</li>
</ul>
</div>
</asp:ContentPlaceHolder>
</asp:Content>
</body>
</html>
Index.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="KitchenCounter.pages.Index" MasterPageFile="~/kitchencounter/master_pages/master_page.Master"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Kitchen Counter | Home</title>
<link rel="stylesheet" href="kitchencounter/css/main.css" />
</head>
<body>
</body>
</html>
Any ideas where to start with this? Any help is appreciated.
The idea behind a master page with content pages is that your master page contains items that should appear on every (or most) page in your site, with placeholders left where a content page will fill in information specific to that page. With that premise in mind, there are a few things to change:
You put the content controls in the master page; they need to go in the content page, which in your case is Index.aspx.
Additionally, your content page should only contain as its top-level controls tags - you use the ContentPlaceHolderId attribute to match the content inside the tags on your content page to the places where the content belongs on the Master page.
Finally, your markup for your navigation bar needs to be outside of the control on your Master page. The control is just that - a placeholder; nothing goes inside of it.
So try this:
master_page.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master_page.master.cs"Inherits="KitchenCounter.master_pages.MasterPage"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="menuBar">
<ul>
<li class="hvr-bounce-to-bottom active"><a>Home</a></li>
<li class="hvr-bounce-to-bottom">Account</li>
<li class="hvr-bounce-to-bottom">Recipes</li>
<li class="hvr-bounce-to-bottom">Contact</li>
</ul>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Index.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="KitchenCounter.pages.Index" MasterPageFile="~/kitchencounter/master_pages/master_page.Master"%>
<asp:Content runat="server" ContentPlaceHolderID="head">
<title>Kitchen Counter | Home</title>
<link rel="stylesheet" href="kitchencounter/css/main.css" />
</asp:Content>
<asp:Content runat="server" ContentPlaceHolderID="MainContent">
The text that is specific for your Index page goes here.
</asp:Content>
How to fix this problem ?... I am not understanding that !... I have given my HTML code and the error pic ! and it is occouring after adding this line
plz help
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Signin.aspx.cs" Inherits="Signin" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>ESbook</h1>
<asp:Login ID="Login1" runat="server" OnAuthenticate="Login1_Authenticate">
</asp:Login>
</div>
</form>
</body>
</html>
]1
Your codes requires a reference to jQuery libraries.
Before donwloading and referencing the jQuery place this line of code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
agter <title>tag in your <head> block.
I have copied this code from a website http://www.aspdotnet-suresh.com/2012/04/jquery-dropdownlist-selection-for.html and its not showing me the desired output, I'm Naive at this but the calendar is not visible below the textbox which should as per the code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '1970:2012'
});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>Date:</b> <asp:TextBox ID="txtDate" runat="server"/>
</div>
</form>
</body>
</html>
You can also set up calendar by using ajax calendar extender..
<asp:CalendarExtender ID="txtDate_CalendarExtender" runat="server"
Enabled="True" TargetControlID="txtDate" Format="dd/MMM/yyyy">
</asp:CalendarExtender>
As per you First statement you copied the code so check that your application contain js folder or not
Make sure that your website project includes the reference files in your project
css/ui-lightness/jquery-ui-1.8.19.custom.css
js/jquery-1.7.2.min.js
js/jquery-ui-1.8.19.custom.min.js
If not you can download the same from jquery site and include same in your project or provide http path for reference files
I am stuck with this error and found a work around and the solutions works for me, but i i would like to know is it the best way to fix the issue and i want to make sure that it wont affect any other pages badly. Hope the experts will help.
If this was the best solution then many of you can save your heads.
This error occurs when a code block is placed in the MasterPage. Place the code block in a placeholder to resolve the issue.When adding AJAX extenders to your Web page, it will attempt to register scripts in the head. If code blocks are present in the MasterPage, an error might occur.
To resolve this issue, simply move the code block into a placeholder in the head of your MasterPage, like so:
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="myPlaceholder" runat="server">
<script language="javascript" type="text/javascript" src="<%= Page.ResolveClientURL("~/javascript/global.js")%>"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
The error is logical you can not confuse the rendered controls after they rendered by using the <%= %>
One way to solve this issue is to use a literal control, and render the script line on code behind.
<asp:ContentPlaceHolder ID="myPlaceholder" runat="server">
<asp:Literal runat="server" ID="txtIncludeScript" EnableViewState="false"></asp:Literal>
</asp:ContentPlaceHolder>
and on code behind. Check for null because if you change the placeholder the literal is null. Also set EnableViewState=false because you set it on every Page_Load and you do not wish to save it to viewstate.
if(txtIncludeScript != null)
{
txtIncludeScript.Text =
string.Format("<script language=\"javascript\" type=\"text/javascript\" src=\"{0}\"></script>",
Page.ResolveClientUrl("~/javascript/global.js"));
}
ContentPlaceHolder requires a master page, so you can replace that tag with some other element that can be ran at the server in case your page does not have a master page and you cannot get rid of the
<head id="Head1" runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<div runat="server">
<script language="javascript" type="text/javascript" src="<%= Page.ResolveClientURL("~/javascript/global.js")%>"></script>
</div>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
While I'm using Response.Redirect("~/Pages/Page.aspx"), style is loaded on the page, but unfortunately it is not loaded while I'm using Server.Transfer("~/Pages/Page.aspx") method.
The page looks following:
<html>
<head runat="server">
<link href="../Css/Layout/style.css" type="text/css" rel="stylesheet" />
</head>
<body></body>
</html>
How to make the page load style.css using Server.Transfer() ?
Regards
The problem is that you use a relative path to your CSS file, you should use an abolute path.
If the css folder is inside your application root, you can use
<html>
<head runat="server">
<link href="/Css/Layout/style.css" type="text/css" rel="stylesheet" />
</head>
<body></body>
</html>
or even
<html>
<head runat="server">
<link href="~/Css/Layout/style.css" type="text/css" rel="stylesheet" runat="server" ID="aUniqueId" />
</head>
<body></body>
</html>