Image displayed in the Dadagrid of WebForm

zhaozj2021-02-17  51

- Creation of Dadagrid template columns

Dadagrid is a very important control in ASP.NET programming, which provides great convenience for improving its expression. In addition to direct binding to the data source, we can also customize the column of the DataGrid through the column binding template to display data according to the format we set. For example, there is a field f_demoImage in the data table to store the path of the image (including the image file name), in order to display the actual picture in the DataGrid Cell, we can define a template column, then give the column to the value of the field f_demoimage, You can display pictures in the DataGrid Cell.

! WebForm1.aspx file: <% @ Page language = "c #" Codebehind = "Wizard_select_template.aspx.cs" AutoEventWireup = "false" Inherits = "WebHatcher.WebForm1"%> Webform1 </ Title> <meta content = "Microsoft Visual Studio .NET 7.1" Name = Generator> <meta content = C # name = code_language> <meta content = JavaScript name = vs_defaultClientScript> <meta content = http: //schemas.microsoft.com/intellisense/ie5 name = vs_targetSchema> <LINK href = "./ styles / style.css" type text / css rel = stylesheet => < / Head></p> <p><body ms_positioning = "gridLayout"> <form id = form1 method = post runat = "server"></p> <p><Asp: datagrid id = DataGrid1 runat = "server" AutoGenerateColumns = "False" Width = "744px"> <Columns> <asp: TemplateColumn> <ItemTemplate> <asp: Image id = "Image1" ImageUrl = '<% #DataBinder . Eval (Container, "DataItem.f_DemoImage")%> 'Runat = "Server"> </ ask: image> </ itemtemplate> </ asp: templateColumn> </ columns> </ asp: datagrid></p> <p></ form> </ body> </ html></p> <p>///WebForm1.aspx.cs file: using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web. UI; use system.web.ui.webcontrols; using system.web.ui.htmlControls; using mydbaccess; // My namespace Namespace Webhatcher {/// <summary> /// WebForm1 summary description. /// </ summary> public class webform1: system.web.ui.page {protected system.web.ui.webControls.dataGrid DataGrid1;</p> <p>Private Void Page_Load (Object Sender, System.Eventargs E) {// Place the user code here to initialize page if (page.ispostback) {} else {// Display data in DataGrid (including images): MyTableAccess OdbTable = New myTableAccess (); // myTableAccess I am defined database access class odbtable.sdbpath = server.mappath ("./ Webhatcher.mdb"); odbtable.spassword = "; odbtable.ssql =" select * from tabtemplate "; // TabTemplate is a data table containing the F_DemoImage field DataGrid1.datasource = ODBTABLE.ReadFromTable (); DataGrid1.dataBind ();}}</p> <p>#REGION Web Form Designer Generated Code Override Protected Void OnNit (Eventargs E) {// Codegen: This call is required for the ASP.NET Web Form Designer. InitializationComponent (); base.onit (e);} /// <summary> /// Designer supports the required method - Do not use the code editor to modify the contents of this method. /// </ summary> private void initializecomponent () {this.load = new system.eventhandler (this.page_load);} #ENDREGON}}</p> <p>// Definition of data access class: use system; use system.data; using system.data.oledb;</p> <p>Namespace mydbaccess {/// Data Stock Namespace: /// Class Name: MyTableAccess /// Property: /// sdbpath database path (including database file name) /// spassword database password /// ssql sql statement</p> <p>Public class myTableAccess {// Declare 3 properties (domain): public string sdbpath = ""; public string spassword = "; public string ssql =";</p> <p>Public void OPENDB () {Oconn = New OLEDBCONNECTION ("provider = microsoft.jet.Oledb.4.0; data source =" sdbpath "; password =" spassword "); Oconn.Open ();}</p> <p>Public void closedb () {oconn.close ();</p> <p>public DataView ReadFromTable () {OpenDB (); OleDbDataAdapter oAdp = new OleDbDataAdapter (sSQL, oConn); DataSet oDtSt = new DataSet (); oAdp.Fill (oDtSt, "aTable"); CloseDB (); return oDtSt.Tables [ " "]]. defaultview; // Return to the default view}</p> <p>}</p> <p>Zhang Qingzhangking@263.net http://www.why100000.com http://soft.why100000.com QQ: 9365852 2004.5.28</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-28913.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="28913" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.058</b>, SQL: <b>12</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'k9T9Vqn_2Fs7oKgA5KyXuRREqK2zsYWXiRpUBe4OwVYhtNQZICy_2BAEcY4qn42L3ywLPyfYU_2B8IN_2FNUHRDNrOLwNA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>