ASP. NET is like Web Form, and like drag controls (4)

ASP. NET: Like Web Form, or Drag Control (3). We have a comprehensive function to insert data into the Form, and it is easier for the GridView to display data. However, the customer is absolutely unable to accept a page that is so arrogant and so crude: (although from a technical point of view, this page already has some functionality ......)

First, the first problem is that the table length and width are different in size. We can solve this problem through CSS:

First, we need to add a client CSS class to the GridView so that we can use it in CSS and add the property: CssClass = "commodity_data"

The image cell is special. We add two client CSS classes to it: HeaderStyle-CssClass = "image" ItemStyle-CssClass = "image"

Then we use CSS to change the style:

Copy to ClipboardReference: [www.bkjia.com] table. commodity_data
{
Width: 100%;
}
Table. commodity_data tr th
{
Width: 15em;
Background-color: Gray;
}
Table. commodity_data tr td
{
Width: 15em;
Text-align: center;
}
Table. commodity_data tr td. image
{
Width: auto;
}
Table. commodity_data tr th. image
{
Width: auto;
}

After adding the following style, the page looks much more comfortable. However, images of different sizes still affect the visual effect. Therefore, we need to scale them to a proper size using JavaScript. We want to limit the length and width to X and maintain the aspect ratio. First, we must use a x container to restrict the image and rewrite the img code:

Copy to ClipboardReference: [www.bkjia.com] <asp: Image ID = "Image" runat = "server"
ImageUrl = '<% # Eval ("id", "\ CommodityImage. aspx? Id = {0} ") %> '/>

Rewrite:

Copy to ClipboardReference content: [www.bkjia.com] <div style = "text-align: center; line-height: 100px; font-size: 12px; height: 100px; width: 100px; overflow: hidden; ">
<Asp: Image ID = "Image" onreadystatechange = "OnImageReady. apply (this, arguments);" runat = "server"
ImageUrl = '<% # Eval ("id", "\ CommodityImage. aspx? Id = {0} ") %> '/>
</Div>

The size of the image is limited, but the cut seems uncomfortable. At this time, we need JavaScript to do the following:

Copy to ClipboardReference content: [www.bkjia.com] <div style = "text-align: center; line-height: 100px; font-size: 12px; height: 100px; width: 100px; overflow: hidden; ">
<Asp: Image ID = "Image" onreadystatechange = "OnImageReady. apply (this, arguments);" runat = "server"
ImageUrl = '<% # Eval ("id", "\ CommodityImage. aspx? Id = {0} ") %> '/>
</Div>

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page