I'm using an ASP master page to lay out content on my webpage.
The Site.Master file looks something like this.
<div class="container fullwidth-main-content">
<asp:ContentPlaceHolder ID="FullWidthMainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="container margin-main-content">
<asp:ContentPlaceHolder ID="MarginMainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
Now.. On my default.aspx I'm calling the <asp:ContentPlaceHolder ID="FullWidthMainContent" control. amongst other content controls.
However on my Portfolio.aspx page for some reason even though I'm not calling the <asp:ContentPlaceHolder ID="FullWidthMainContent" control it's still appearing underneith my other content that I have called.
Why is this happening?
Related
How to link css file in vb asp.net project
Right now my css file is not beeing run from Home.aspx files. What is my All_Body.css file path that I should type in Home.aspx file.
I need to put this code on server so I can not use full path with my computer username
project Files:
>MyWebsite
>Styles
>All_Body.css
>UI
>Home.aspx
>Master.master
All_Body.css full path
C:\Users\Dave\source\WebSites\MyWebsite\Styles\All_Body.css
Home.aspx
<asp:Content id="Home_Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="~\Styles\All_Body.css" />
...
</asp:Content>
Master.master
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
...
</body>
</html>
I cleared my browser cache and it worked.
The browser doesn't reload the css or js files, so as a developer you have to do hard refresh /reload every time you update the css or js files and you must add query string like ?v=0.01 after the href or src when you publish the website to the server and change the number every time.
ex:
href="styles.css?v=0.01"
src="main.js?v=0.01"
Now the browser will think this is a new file and will reload it in the client browsers.
Home.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
....
</asp:Content>
Master.master
The link to your CSS file should be in the <head> element of the master page:
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<link rel="stylesheet" type="text/css" href="Styles/All_Body.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Note that I updated the path to your CSS file which was incorrect; this link is relative to the root. Also, the "~/" only works when you include runat="server" - either way it is not needed when using a relative link for CSS. You also had a malformed head content placeholder. The content placeholder for the main content was missing from your master page. There was no form tag so nothing could work. In fact the code you presented would not even compile. If you simply used the standard Web Forms template out of the box with the master page option, it would have worked.
Tip: The easiest way to get the CSS link correct in a master page is to drag the CSS file from Solution Explorer into the <head> section of the master page in Visual Studio.
As a disclaimer, I have read all of the posts regarding this topic and have tried all of the suggestions and still don't seem to be able to get this to work. So, for purposes of this question, I have created a very simple Master page file and an index file. The code for the master page is:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master.master.cs" Inherits="EckankarInOklahoma.master" %>
<!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>ECKANKAR in Oklahoma</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
The index page's code is as follows:
<%# Page Title="" Language="C#" MasterPageFile="~/master.Master" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="EckankarInOklahoma.index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
I DON'T GET THIS AT ALL :)
</asp:Content>
When I debug through Visual Studio, I get the expected white screen that just says:
I DON'T GET THIS AT ALL :)
But after publishing, uploading to the website via ftp and going to the website, I get nothing but my code. I have saved the files with encoding but without BOM. I used Sublime Text editor to ensure I was saving without BOM. I have published and then uploaded, and I have uploaded without publishing. All to no avail. I still get unrendered code.
Additionally, I have tried to validate through W3C Schools and the code will not validate. I have 3 errors and 3 warnings.
Can someone please advise what I might be doing wrong? Thanks in advance. Have a great weekend!
***update 1 = I tried what MarcusVinicius suggested and that did get me closer, but now instead of giving me my code as text, it says :
This is a marker file generated by the precompilation tool, and should not be deleted!
I am unsure of where to go from here. I published the website as not updatable and the config files are in the root directory. Any more ideas for me to try? Again, I appreciate all of the help and suggestions. :)
hey guys i'm building a website for a school assignment and i want to create a multi line text box but when i do i get the error "'TextBox' must be placed inside a form tag with runat=server" I've looked it over and it wouldn't go away by inserting a form tag with runat server before the text box code. how can i fix this? here's the code:
<asp:Content ID="Content2" ContentPlaceHolderID="body" Runat="Server">
<form id="Form1" runat="server">
<div id="body">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</asp:Content>
Just remove the form tag from your content page - the form tag on the master page will be sufficient. You will need the ContentPlaceHolder tags on the master page to be within the form for this to work.
like
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="bodycontent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
This is the code what i tried:
<asp:ImageButton ID="imgDropArrow" class="cssDropArrow" ImageUrl="~/Styles/Down.gif" OnClick="ImageDropArrow_Click" runat="server"/>
Everytime I click on this imagebutton, page refreshes.
What I want on click is to run the serverside("ImageDropArrow_Click") function and no page refresh.
Any help will be highly appreciated.
I suggest to use UpdatePanel in Your Code
for example
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!--Content Here-->
<asp:ImageButton ID="imgDropArrow" class="cssDropArrow" ImageUrl="~/Styles/Down.gif" OnClick="ImageDropArrow_Click" runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
</form>
Look at the following link. It might be helpful for you.
http://www.codeproject.com/Articles/401903/AJAX-for-Beginners-Part-Understanding-ASP-NET-AJ
At first use runat="Server" and you can use updatepanle with imagebutton
I have been using .NET since beta and HTML since the days of HotDog pro & notepad, using table layout of course. I am FINALLY ready to use only div, li, CSS for the layout, but my question is, what is the proper way to layout pages in VS2010?
When i use table layout its simple and i can visually see what im creating and where the elements are, such as the sample below - how should I do this using div's, etc in VS2010?
<table width="300" border="0" cellpadding="5">
<tr>
<td><img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" /></td>
<td><h2>This is some text to the right of the picture...</h2></td>
</tr>
<tr>
<td colspan="2">Here some text underneath</td>
</tr>
</table>
I would say that you should learn about Css and use divs etc to layout pages.
In my opinion you should not use any WYSIWYG and write the markup from scratch, it's just as fast if you know how.
Or if you want a good basic css framework for dealing with the layout in a grid-like way then try out 960 Grid System.
As for seeing what you are doing I would say use the simplest. open the site in a webbrowser and hit refresh.
Here is an example of a masterpage in ASP.NET MVC that uses the Blueprint CSS framework.
It has two columns next to each other with a footer underneath it.
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<asp:ContentPlaceHolder ID="MetaDescription" runat="server" >
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="MetaKeywords" runat="server">
</asp:ContentPlaceHolder>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"/>
</head>
<%=Html.Flash() %>
<body>
<div id="flash" style="display:none"></div>
<div class="container">
<div id="main" class="span-24 last">
<div class="span-5">
<div id="logo">
</div>
<% Html.RenderAction("MainMenu", "Cms"); %>
</div>
<div class="span-19 last">
<div id="headerTekst">
<div class="padding-30">
<h1 class="right uppercase">Some text</h1>
</div>
</div>
<div class="padding-10">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer" class="span-24 last">
</div>
</div>
</body>
</html>
To write html code you should definetly not use at all Visual Studio. Use Dreamweaver instead.
When designing the page's layout you will get a far better tool with Adobe's Dreamweaver using design view than using Visual Studio.
Only when it's time to program the page to make it dynamic is when you should open your IDE and write code.
For layout I use Firefox with the FireBug plugin. It's gives you real-time feedback. It does not get any better. Once I have the change dialed in, I copy the change in to the html or css in the project.
WYSIWYG programs are fine. It's how I learned. Like everything else, eventually you'll want to know what's happening under the hood.
If you need to use browsers that support HTML 4.01 then go with divs, but if your layouts get too complex you will eventually fall captive to div soup and understanding your markup and making changes will become cumbersome.
If you can use modern browsers that support HTML 5 (or add various hacks to make it work) I would go this route since your markup will have more semantic meaning and be easier to understand. Instead of making a nav like this:
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
</ul>
</div>
You could use HTML5 to have:
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
Or if you were posting blogs instead of doing this:
<div class="post">
<h1>Example Blog Post</h1>
<div class="entry">
<p>Blog text goes here...</p>
</div>
<div class="entryFooter">
<p> Posted in example category.</p>
</div>
</div>
You would write it like this:
<article>
<header>
<h1>Example Blog Post</h1>
</header>
<p>Blog text goes here...</p>
<footer>
<p>Posted in example category.</p>
</footer>
</article>
As you can see it is a lot easier to understand and still gives the structure you are looking for over tables.
To then position everything like you would want I would use CSS3, but again if you need to support older browsers use CSS2.
To do this in VS2010, simply open up the .aspx or .ascx pages and start writing the markup. I find products like Dreamweaver to produce garbage markup when using a designer interface, so the best bet is to write it yourself by hand.
Also, if you do go the HTML5 route and want intellisense in VS2010, here is an addon for it.