I have a problem creating a Shield UI ASP.NET Chart on my web page. What I need is to have the control with not data, but yet visible on the page.
I have the reference to the control at the beginning:
<%# Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
And here is the complete code actually:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<%# Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
<!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 id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="chart" style="width: 390px; height: 290px; left: 5px; top:5px; margin: auto; position:inherit;">
<shield:ShieldChart ID="ShieldChart1" runat="server" Width="320px" Height="330px"
OnTakeDataSource="ShieldChart1_TakeDataSource">
<DataSeries>
</DataSeries>
</shield:ShieldChart>
</div>
</form>
</body>
Dragging and dropping the control in the VS doesn’t do all the work needed to show the control when page is launched. What you need is to add some more lines of code, and namely:
<link rel="stylesheet" type="text/css" href="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/css/shield-chart.min.css" />
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/jquery-1.9.1.min.js" type="text/javascript"> //</script>
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/shield-chart.all.min.js" type="text/javascript"> //</script>
These are the actual references to the runtime components you need to use the control in your web application.
Related
The more I work with CSS, the more depression I get
I want to set a background picture stored on the same folder where my aspx and cs files
are located, still it wont put a background picture:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background-image:url(banner.gif);
display:block; // have tried without it as well, no change :(
}
Default.aspx:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!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" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Please help how to set the background picture ?
You said that your CSS and image are in same folder where you've your aspx file and CSS so
First try setting a background color for body say
body {
background: #f00; /*This should give you red*/
}
If this works than fine, something is wrong with the image path, if you fail to see the color too, that means your stylesheet is at the wrong path, so instead of
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
Should be
<link href="Site.css" rel="stylesheet" type="text/css" />
here is the image, I dont thin there is any problem with paths:
My question is pretty simple. I have some style classes that I need to use on individual aspx pages. e.g.
.txtbx
{
margin-bottom: 20px;
border-style:solid;
border-width:thin;
border-color:Gray;
height:30px;
width:250px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Now, can I add such styles to the site.css file (that comes as a default when you choose to create a new web application). If yes how do I apply it to the individual .aspx pages since I don't have a head tag there. I read a solution that asks me to include a content place holder in the content (.aspx) page and put the link in it. However I already have two content place holders on each of my content pages. Do I need to add a third one?
Also, would it be better to have another (external) css file to define & use my personal styles such as the one above..? Thnx..!
On your master page :
<%#
Master Language="C#"
AutoEventWireup="false"
CodeBehind="BaseMaster.Master.cs"
Inherits="BaseMaster"
EnableViewState="false"
%>
<html runat="server" id="htmlTag" xmlns="http://www.w3.org/1999/xhtml" clientidmode="Static">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="cphHead" runat="server"></asp:ContentPlaceHolder>
</head>
<body runat="server" id="bodyTag" clientidmode="Static">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="cphBody" runat="server"></asp:ContentPlaceHolder>
</form>
</body>
</html>
On your page where you need the style:
<%#
Page Title=""
Language="C#"
MasterPageFile="~/BaseMaster.Master"
AutoEventWireup="false"
CodeBehind="..."
Inherits="..."
EnableViewState="false"
%>
<asp:Content ID="Content2" ContentPlaceHolderID="cphHead" runat="server">
<link runat="server" href="Styles/YOURSTYLE.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphBody" runat="server">
<input type="hidden" id="Field1" runat="server" clientidmode="Static" />
</asp:Content>
Not sure what you want, but I can assume following.
you have a global .css file, which you want to be applied to all the .aspx pages.
then simply , add a Link to the css file in the head section of your .Master page
you have a local css file, i.e. a css you want to be applied only to a given page, but not to the other pages, in that case, you should do this.
a. expose the head section of your Master page, by creating a ContentPlaceHolder inside the head of the Master Page. i.e (head of Master Page below)
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="headerContent" runat="server">
</asp:ContentPlaceHolder>
</head>
b. and use this contentPlaceHolder on your local Page to add link to that local css file.
<asp:Content ID="HeadContent" ContentPlaceHolderID="headerContent"
runat="server">
<link runat="server" href="styleSheet.css" rel="stylesheet"
type="text/css" />
</asp:Content>
I have a html table and I am trying to have it span the entire page height. For some reason I am not able to get this to work. I have set the html, body and table height to be 100%, but the table still does not occupy the entire 100%.
Heres the code. It is very basic because I am just trying to have the table occupy the entire height.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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>
<style type="text/css">
body,html {
margin:0;
padding:0;
height:100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="2" cellpadding="0" cellspacing="0" style="height:100%; width:100%" >
<tr>
<td>ABCD</td>
</tr>
</table>
</form>
</body>
</html>
I tried for couple of hours and I could not get it to work. Any help is really appreciated.
This should work:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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>
<link rel="Stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style>
body, html, form, table { height:100%; }
table { border:2px solid gray; }
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>ABCD</td>
</tr>
</table>
</form>
</body>
</html>
Is the table in a form ? make its height 100% too by using style
Try setting the html height attribute to 100%.
<table height="100%">
It appears that the height is relative to the current container, which may not be at 100%. See this article:
http://apptools.com/examples/tableheight.php
Greetings,
I'm trying to select item from asp.net list box then assign it to a text box so when a click on an item from the list box should appear in the text box.
I tried the code listed down but it did not work.
please advice how to do this!!
............................
updated code
..........................
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="IMAM_APPLICATION.WebForm3" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#<%=ListBox.ClientID %>").change(function() {
$("#<%=text.ClientID %>").val($(this).val());
});
});
</script>
<asp:ListBox ID="ListBox" runat="server">
<asp:ListItem Value="one">1</asp:ListItem>
<asp:ListItem Value="two">2</asp:ListItem>
</asp:ListBox>
<asp:TextBox ID="text" runat="server"
style = "position:absolute; top: 267px; left: 45px;"></asp:TextBox>
</div>
</form>
</body>
</html>
You can do it like this:
$(function() {
$("#<%=ListBox.ClientID %>").change(function() {
$("#<%=text.ClientID %>").val($(this).val());
});
});
Replace your $(document).ready(function() { }) with the above code, and when you change the dropdown, the value will go in the text input, e.g. one, or two.
In a webform iam have placed one textbox, i want to choose a background image for that particular textbox during runtime. need coding in C#, ASP .NET
You could use css to set the background image and javascript to change it. Here's an example:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ToDDDD._Default" %>
<!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>
<style type="text/css">
input
{
background-image: url(/initialImage.png)
}
</style>
<script type="text/javascript">
function changeImage() {
document.getElementById('txt').style.backgroundImage = 'url(/newImage.png)';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server" />
Change background image
</div>
</form>
</body>
</html>
If you have a limited number of images that you want to use for the background then it would probably be cleanest to define each of them as a separate class in you css and then programatically either with javascript or C# change the class on the input.
<style>
.image1 { background-image: url(/image1.png);}
.image2 { background-image: url(/image2.png);}
.image3 { background-image: url(/image3.png);}
</style>
In you Page_Load of you page you can then write this:
txtBox1.CssClass = "image1";
Or using javascript:
document.getElementById('<%=txtBox1.ClientID%>').setAttribute("class", "image2");