I'm trying to set the background-image of a div within ItemTemplate of a DataList to the filename in column image_path in the datatable that's used as the listview's datasource.
Here's the code I'm currently using, which includes two datalists. It's based on the code found here: background-image eval
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestWebApp.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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text="My lagel"></asp:Label>
<div style='width:195px;height:162px;background-position:center;background-image:url(<%# Eval("image_path","~/Styles/Images/{0}") %>)'></div>
</ItemTemplate>
</asp:DataList>
<asp:DataList ID="DataListImages" runat="server" RepeatColumns="5">
<ItemTemplate>
<asp:ImageButton ID="ImageButton2" ImageUrl='<%# Eval("image_path","~/Styles/Images/{0}")%>' runat="server" />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
The problem is that DataListDiv is not being displayed. The 2nd datalist (DataListImages) is displayed, but it's using an ImageButton. Both are using the same eval so I know the binding is correct.
This is what the datatable looks like:
BedNum Waiter image_path
201 Joe Red.png
202 Jim Green.png
203 Mary Red.png
204 Carl Yellow.png
I ended up changing the relative path in background-image:url for the div by eliminating the ~/ :
<asp:DataList ID="DataListDiv" runat="server" RepeatColumns="5">
<ItemTemplate>
<div style='width:195px;height:162px;background-position:center;background-image:url(<%# Eval("image_path","Styles/Images/{0}") %>)'></div>
</ItemTemplate>
</asp:DataList>
Related
I have a Default.aspx and a web user control that adds in Default.aspx
Is there any way that i can change value of a div in Default.aspx from web user control?
for example :
<meta name="description" content="" id="MetaDescription" runat="server"/>
<meta name="keywords" content="" id="MetaKeywords" runat="server"/>
or :
<div id="test" runat="server"></div>
Thank you
You can change value of parent page's any control, I made my sample for label control by using the following code. I have made one sample please check it.
Main Page ASPX:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="UseUsercontrol.WebForm1" %>
<%# Register TagPrefix="My" TagName="UserInfoBoxControl" Src="~/WebUserControl1.ascx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<My:UserInfoBoxControl runat="server" ID="MyUserInfoBoxControl" />
<asp:Label ID="Label1" runat="server" Text="Main Page"></asp:Label>
</div>
</form>
</body>
</html>
User control ASCX:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="UseUsercontrol.WebUserControl1" %>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
User Control CS:
protected void Button1_Click(object sender, EventArgs e)
{
Label parentPanel = this.Parent.FindControl("Label1") as Label;
parentPanel.Text = TextBox1.Text;
}
Here i am updating parent page's Label control value with child's textbox latest value which enter by user.
Hope it will help you. if i am going wrong then please let me know i will try to update it.
You can access a dive from codebehind but you cannot manipulate it's inner html.
If you want to ad a div and it's inner html from codebehid,
Create a user control and add a literal control
<asp:Literal Text="" ID="literal" runat="server" />
Add it to the aspx page
From the code behind of the aspx page,
Literal litereal = MyUserControl1.FindControl("literal") as Literal;
litereal.Text = string.Format("<div id=\"test\" runat=\"server\">{0}</div>", "any text or html");
My assignment states: Create a site that is similar to Figure 8.9 in ASP.NET 4 Unleashed, but instead of a list of movie hyperlinks, create a list of your favorite activities (sports, reading, shopping etc.) The image in question is just a simple vertical listing of hyperlinked movies. I am running into issues as it will not build correctly though I have no errors or warnings. I do have a message that states
"Message 1 Validation (ASP.Net): Attribute 'ConnectionString' is not a valid attribute of element 'AccessDataSource'. c:\users\owner\documents\visual studio 2010\Projects\Activities\Activities\Activities.aspx 41 5 Activities"
My code is as follows
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Activities.aspx.cs"
Inherits="Activities.Activities" %>
<!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">
<style type="text/css">
.floater
{
float:left;
border:solid 1px black;
padding:5px;
margin:5px;
}
</style>
<title>Activities</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater
id="Repeater1"
DataSourceId="srcActivities"
Runat="server">
<ItemTemplate>
<asp:HyperLink
id="HyperLink1"
Text='<%# Eval("Type") %>'
NavigateUrl='<%# Eval("Activities.aspx?id={0}") %>'
runat="server" />
<br />
</ItemTemplate>
</asp:Repeater>
<asp:AccessDataSource
id="srcActivities"
ConnectionString="Data Source=.\Access;
AttachDbFilename=|Desktop|WD364|Activities.accdb;
Integrated Security=True;User Instance=True"
SelectCommand="SELECT Id, Type FROM Activities"
Runat="server" />
</div>
</form>
</body>
</html>
The database is a simple MS Access Table (there is only one) with a few rows and two columns. One the ID and one the Type with the names of the activities. Any help would be greatly apprecitated
Try this
<asp:hyperlink id="hlxx" runat="server"
NavigateUrl='<%# "~/Activities.aspx?id="+Eval("Type") %>'
Target='<%# "_blank" %>'>Eval("Type")</asp:hyperlink>
Or see this
Send string with QueryString in Repeater Control in ASP.net
and below link have multiple answers
Link
$(document).ready(function() {
$('#chkRFI').click(
function() {
$("INPUT[type='checkbox']").attr('checked', $('#chkRFI').is(':checked'));
}); });
<div class="grid_3">
<div class="box">
<div class="boxheader">
<asp:CheckBox ID="chkRFI" runat="server" Text="RFI" />
</div>
<div class="boxbody">
<asp:CheckBoxList ID="chklstRFI" runat="server" CssClass="boxbodylist">
<asp:ListItem Text="RFI No" Value="RFI" />
<asp:ListItem Text="RFI Date" Value="RFI_Date" />
</asp:CheckBoxList>
</div>
</div>
</div>
How to solve? Please provide me any ideas...
Thanks
You should use $('#<%= chkRFI.ClientID %>') instead of $('#chkRFI')
I feel that solution by ysrb should work - but you may also try alternate selectors - for example:
var checkAll = $('.boxheader input');
checkAll.click(function() {
$('.boxbody input').attr('checked', checkAll.attr('checked'));
});
If you are using ASP.NET then all element IDs will be generated in very ugly form, e.g. $Form1$$MyCheckBox (in is not exactly the correct sample, but it shows the main idea). If you are using ASP.NET 4 you can disable this feature in web.config ([pages clientIDMode="static" /]). Analyze your checkbox with FireBug or simply view the page source to make sure that checkbox was generated with correct ID. Hope this helps...
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>Check/Uncheck All CheckBoxes Using JQuery</title>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#chkAll').click(
function() {
$("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />
<asp:CheckBoxList ID="cbList" runat="server">
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
here is the complete example
i have in my code a table with a text field and a button on each cell. My problem it's that the button and the field are not recognized like System.Web.UI.WebControls.Button and System.Web.UI.WebControls.TextBox respectively. In fact recognize like buton are textfield html plain. I'm going to put my code so if anybody can see what i'm doing wrong.
Note: If i put this elemets out of the table work so i assumed that something wrong in the table
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MapaPrueba._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>Uso de google map</title>
<link href='/assets/css/styles.css' rel='stylesheet' type='text/css' />
</head>
<body>
<form id="form1" runat="server">
<asp:Panel runat="server" Height="1024" Width="768" style="text-align: center">
<div id="map-canvas" style="width: 700px; height: 500px" align="center"></div>
<asp:Table id="Table1" runat="server" CellPadding="10" GridLines="Both" HorizontalAlign="Center">
<asp:TableRow runat="server">
<asp:TableCell runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:Panel>
</form>
</body>
</html>
I would follow atrljoe's suggestion. Don't use an asp table, just use
<table>
<tr>
<td>
controls go here
</td>
<tr>
</table>
Tip: If you add the table first, switch in VS to Design View and using Ctrol + Alt + arrows you can add new rows and columns easily
You cant access the controls because your placing a Control (ASP Button & ASP TextBox) within a Control (ASP Table) ASP.NET Table. Every ASP.net page has a control tree, all the controls (HTML and server controls are in this control tree based on their position in page hierarchy). Thus since it is contained within the Control, the system is not picking it up. To gain access to this control you would need to use FindControl in your code behind.
As I had asked, If you really need to control this button and textbox, then consider changing to an HTML table. Otherwise when you reference these controls in your code behind you will need to use FindControl
I am developing a C#/SQL VS 2008 website application and I'm trying to set breakpoints in my site.master file--is there a way to do this? The contents of this file are:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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>Forms Authentication, Authorization, and User Accounts</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">User Account Tutorials</span><br />
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:ContentPlaceHolder>
</div>
<div id="navigation">
<asp:ContentPlaceHolder ID="LoginContent" runat="server">
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
Welcome back,<asp:LoginName ID="LoginName1" runat="server" />
</LoggedInTemplate>
<AnonymousTemplate>
Hello, stranger!
</AnonymousTemplate>
</asp:LoginView>
<br />
<br />
</asp:ContentPlaceHolder>
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Logout.aspx" />
<ul>
<li>
<asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
</li>
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkMenuItem" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
<asp:Repeater ID="submenu" runat="server" DataSource="<%# ((SiteMapNode) Container.DataItem).ChildNodes %>">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkMenuItem" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
</div>
</form>
</div>
</body>
</html>
My site.master.cs file contents:
public partial class Site : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
You can set breakpoints in the code-behind, and javascript debugging will be as good (or bad) as always. The master page is just another aspx page; nothing differs.
You should put the breakpoint in your code behind. i.e. PageLoad.
So in your case the code behind file is: Site.master.cs
The code behind of my masterpages are mostly empty (like you have). Its main purpose is to define your website's structure and it contains the place holders for you "real content".
Scenarios where you might want to put some logic in your Master page's code-behind is for instance when you want to generate a Google-maps javascript (coming from the database) at the bottom of every page of your website.
You can put breakpoint at the first '{' of the PageLoad method.