Integrate variable data with div tag in asp.net

Question

Hi all,

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 database value; I tried both of the below. But still i am not getting the 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 height and width variables are defined in page_load() function

int height = 300;
int width = 800;

This is not affecting the resulting web page. Can anyone help me on this.

Answer 1

Rather than using inline styles like this, you should use classes in your stylesheet and set the class attribute on the div or CssClass if it is a server control with runat="server" on it.

Have one classname in your stylesheet for each width that 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...

Answer 2

Make sure the variables width and height in your code behind page are declared with the Protected keyword.

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 further advice:

• name the variable a little more specifically, live divHeight and divWeight at least. Something like CentralPanelHeight would be better.

• better is to give the dive a class attribute, get rid of your variables, and set the height and weight dynamically up top of your page, like so:

  <style type="text/css">
      div.centralPanel { 
          width: 300px;
          height: 800px; }
  </style>
  

Answer 3

Try:

width:'<%= width %>'px;

Answer 4

First you should make your <div> a server control by adding a runat="server" attribute.

<div id="div1" runat="server"></div>

Then in a code behind you can do something like this...

div1.Style.Add("width", width);
div1.Style.Add("height", height);

The <%# Eval() %> data binding expressions will only work within the context of a databinding control.

Answer 5

HI all,

Thanks for all the support I got answer for my own query!

This was written in designer file where i wanted the display and width and height are defined in code behind file on top of 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 am not sure if it's a standard way of writing it. But it's giving me the desired answer.

Answer 6

Dude, inject some JQuery yumminess into your. I know this is a different direction, but it will pretty much do what you are trying to accomplish.

http://css-tricks.com/resolution-specific-stylesheets/