Integrate variable data with div tag in asp.net
I have this code:
<div id="container" style="width: 800px; height:300px; margin: 0 auto;overflow:hidden;"></div>
I need to replace 800px and 300px from the database value; I tried both of the below. But I still don't get an answer.
Method 1:
<div id="container" style="width:'<% Response.Write(width);%>'px; height:'<% Response.Write(height);%>'px; margin: 0 auto;overflow:hidden;"></div>
Method 2:
<div id="container" style="width:'<%# Eval("width");%>'px; height: <%# Eval("height");%>'px; margin: 0 auto;overflow:hidden;"></div>
The value of the height and width variables is defined in the page_load () function
int height = 300;
int width = 800;
This does not affect the resulting web page. Can anyone help me with this.
a source to share
HI all,
Thank you for the support I received a response to my request!
This was written in a constructor file where I wanted the display and width and height to be defined in code behind the file on top of the page_load () function
<% string display= "<div id=\"container\"style=\"width:{0}px; height:{1}px; margin:0 auto;overflow:hidden;\"></div";
display= string.Format(display, width, height);
Response.Write(display); %>
I'm not sure if this is the standard way of writing it. But this gives me the answer I want.
a source to share
Instead of using inline styles like this, you should use classes in your stylesheet and set the class attribute to a div or CssClass if it's a server control with runat = "server" on it.
You have one class name in your stylesheet for each width you want to display
<div id="container" class="auto <%= className %>"></div>
div.auto {
margin: 0 auto;
overflow:hidden;
}
div.wide {
width: 800px;
height:300px;
}
div.narrow {
width: 600px;
height:300px;
}
etc...
a source to share
Make sure the width and height of the variables in your code behind the page are declared with a keyword Protected
.
protected int height=300;
protected int width= 800;
Then in your page use this:
<div id="container" style="width:'<%= width %>'px; height:'<%= height %>'px;
margin: 0 auto;overflow:hidden;"></div>
Some additional tips:
- change the variable a bit, at least the live divHeight and divWeight. Something like CentralPanelHeight would be better.
-
it's better to give the dive a class attribute, get rid of your variables, and set the dynamic height and weight up your page:
<style type="text/css"> div.centralPanel { width: 300px; height: 800px; } </style>
a source to share
First, you must make your <div> a server control by adding a runat = "server" attribute .
<div id="div1" runat="server"></div>
Then in the code behind you can do something like this ...
div1.Style.Add("width", width);
div1.Style.Add("height", height);
The binding characters <% # Eval ()%> will only work in the context of a data binding control.
a source to share