Create a pop-up window in DataGrid

xiaoxiao2021-03-06  94

This article comes from DOTNETJUNKIE proposal. He originally writes the letter to provide an example of how to create HyperLinkColumn in DataGrid, you can open a new window after the user clicks this column, showing the details of this column. We have answered them through Email, he suggested that we have added this method to their guidelines, so there is this article. Like our original article, it is very simple, but simple-containing method examples can sense developers more effectively.

This example contains two WebForms and a CSS file (all code can be downloaded) - the first WebForm contains a DataGrid of the product list read from the Northwind library, and HyperLink's State is set to "SEEDETAILS", once this The link is clicked, and the JavaScript clip will call. The user wants to get the product's ProductID as a parameter in the URL. The second WebForms containing another DataGrid lists all the specific users of the product. detail. Let's take a look at DataGrid-Open.aspx and DataGrid-Open.aspx.cs

DataGrid-Open.aspx

<% @ Page language = "c #" codebehind = "DataGrid-open.aspx.cs" autoeventwireup = "false" inherits = "study.dataGrid_open"%>

DataGrid-Open </ Title></p> <p><meta name = "generator" content = "Microsoft Visual Studio 7.0"></p> <p><meta name = "code_language" content = "c #"></p> <p><meta name = "vs_defaultclientscript" content = "javascript"></p> <p><meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5"></p> <p></ HEAD></p> <p><body></p> <p><center></p> <p><form runat = "server" id = "form1"></p> <p><asp: datagrid id = "dataGrid1" runat = "server" font-size = "12" autogeneratecolumns = "false"></p> <p><Columns></p> <p><ask: boundcolumn datafield = "productID" Headertext = "Product ID" Headerstyle-CssClass = "Headerstyle" ItemStyle-CssClass = "ItemStydefault" /></p> <p><Asp: BoundColumn DataField = "ProductName" HeaderText = "Product Name" HeaderStyle-CssClass = "HEADERSTYLE" ItemStyle-CssClass = "ITEMSTYLEDEFAULT" /> <asp: hyperlinkcolumn DataTextFormatString = "Show Details ..." DataTextField = "ProductID" DataNavigateUrlField = "ProductID" DataNavigateUrlFormatString = "javascript: var win = window.open ("? datagrid-show.aspx ProductID = {0} ", null," width = 700, height = 200 ");" HeaderText = "See Details" Headerstyle-cssclass = "Headerstyle" ItemStyle-CssClass = "ItemStylehyperLink" /></p> <p></ Columns></p> <p></ ask: DataGrid></p> <p></ form></p> <p></ center></p> <p></ body></p> <p></ Html></p> <p>DataGrid-open.aspx.cs</p> <p>Using system;</p> <p>Using system.collections;</p> <p>Using system.componentmodel;</p> <p>Using system.data;</p> <p>Using system.drawing;</p> <p>Using system.Web;</p> <p>Using system.Web.SessionState;</p> <p>Using system.Web.ui;</p> <p>Using system.Web.ui.webcontrols;</p> <p>Using system.Web.ui.htmlcontrols;</p> <p>Using system.data.sqlclient;</p> <p>Namespace Study</p> <p>{</p> <p>/// <summary></p> <p>/// DataGrid_open's summary description.</p> <p>/// </ summary></p> <p>Public class datagrid_open: system.web.ui.page</p> <p>{</p> <p>Protected system.web.ui.webcontrols.dataGrid DataGrid1;</p> <p>Protected system.web.ui.htmlcontrols.htmlform form1;</p> <p>#Region User Defined Code</p> <p>Private Void Page_Load (Object Sender, System.EventArgs E)</p> <p>{</p> <p>IF (! this.ispostback)</p> <p>THIS.BINDDATA ();</p> <p>}</p> <p>protected void binddata ()</p> <p>{</p> <p>Sqlcommand cmd = new sqlcommand ("SELECT TOP 10 Productid, Products", Con ("Server = DWServer; Database = Northwind; user ID = sa; password = 123456"));</p> <p>This.DataGrid1.datasource = cmd.executeRead (commandbehavior.closeconnection); this.dataGrid1.databind ();</p> <p>}</p> <p>Protected SqlConnection Con (System.String Connectionstring)</p> <p>{</p> <p>SqlConnection C = New SqlConnection (Connectionstring);</p> <p>C.Open ();</p> <p>Return C;</p> <p>}</p> <p>#ndregion</p> <p>#Region Web Form Designer Generated Code</p> <p>Override protected void oninit (Eventargs E)</p> <p>{</p> <p>//</p> <p>// Codegen: This call is necessary for the ASP.NET Web Form Designer.</p> <p>//</p> <p>InitializationComponent ();</p> <p>Base.onit (e);</p> <p>}</p> <p>/// <summary></p> <p>/// Designer supports the required method - do not use the code editor to modify</p> <p>/// This method is content.</p> <p>/// </ summary></p> <p>Private vidinitiRizeComponent ()</p> <p>{</p> <p>This.Load = New System.EventHandler (this.page_load);</p> <p>}</p> <p>#ndregion</p> <p>}</p> <p>}</p> <p>In addition to DataNavigateURLFORMATSTRING, there is no difficulty, you can notice that I actually use a JavaScript clip (Note: You can also create a .js file or use <script> </ script> in WebForm, JavaScript Universal, so this is no longer explained in detail. Function, it opens a new window, with the ProductID query string DataGrid_show.aspx, ProductId's value comes from our data source. We can see these two files:</p> <p>DataGrid_show.aspx</p> <p><% @ Page language = "c #" codebehind = "DataGrid-show.aspx.cs" autoeventwireup = "false" inherits = "study.DataGrid_show"%></p> <p><Html></p> <p><HEAD></p> <p><title> DataGrid-show </ title></p> <p><meta name = "generator" content = "Microsoft Visual Studio 7.0"></p> <p><meta name = "code_language" content = "c #"></p> <p><meta name = "vs_defaultclientscript" content = "javascript"></p> <p><meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5"></p> <p></ HEAD></p> <p><body></p> <p><P align = "left"></p> <p><ask: DATAGRID Headerstyle-CssClass = "Headersty" temstyle-cssclass = "ItemStydefault" runat = "server" id = "dataGrid1" font-size = "8" height = "50" width = "675"> </ asp: DataGrid> </ p> <p align = "center"></p> <p><a href="javascript:window.close()"> Close Window </A></p> <p></ p></p> <p></ body></p> <p></ Html></p> <p>DataGrid_show.aspx.cs</p> <p>Using system;</p> <p>Using system.collections;</p> <p>Using system.componentmodel;</p> <p>Using system.data;</p> <p>Using system.drawing;</p> <p>Using system.Web;</p> <p>Using system.Web.SessionState;</p> <p>Using system.Web.ui;</p> <p>Using system.Web.ui.webcontrols;</p> <p>Using system.Web.ui.htmlcontrols;</p> <p>Using system.data.sqlclient;</p> <p>Namespace Study</p> <p>{</p> <p>/// <summary></p> <p>/// DataGrid_show's summary description.</p> <p>/// </ summary></p> <p>Public class datagrid_show: system.Web.ui.page</p> <p>{</p> <p>Protected system.web.ui.webcontrols.dataGrid DataGrid1;</p> <p>#Region User Defined Code</p> <p>Private Void Page_Load (Object Sender, System.EventArgs E)</p> <p>{</p> <p>IF (! this.ispostback)</p> <p>THIS.BINDDATA ();</p> <p>}</p> <p>protected void binddata ()</p> <p>{</p> <p>Sqlcommand cmd = new sqlcommand ("SELECT * from Products Where ProductId = @ProductID", Con ("Server = DWServer; Database = northwind; user ID = sa; password = 123456"));</p> <p>CMD.Parameters.Add (New Sqlparameter ("@ productID", SqldbType.varchar, 200);</p> <p>CMD.Parameters ["@ productID"]. value = request ["productID"]. TOSTRING ();</p> <p>This.DataGrid1.datasource = cmd.executeReader (Commandbehavior.CloseConnection);</p> <p>THIS.DATAGRID1.DATABIND ();</p> <p>}</p> <p>Protected SqlConnection Con (System.String Connectionstring)</p> <p>{</p> <p>SqlConnection C = New SqlConnection (Connectionstring);</p> <p>C.Open (); Return C;</p> <p>}</p> <p>#ndregion</p> <p>#Region Web Form Designer Generated Code</p> <p>Override protected void oninit (Eventargs E)</p> <p>{</p> <p>//</p> <p>// Codegen: This call is necessary for the ASP.NET Web Form Designer.</p> <p>//</p> <p>InitializationComponent ();</p> <p>Base.onit (e);</p> <p>}</p> <p>/// <summary></p> <p>/// Designer supports the required method - do not use the code editor to modify</p> <p>/// This method is content.</p> <p>/// </ summary></p> <p>Private vidinitiRizeComponent ()</p> <p>{</p> <p>This.Load = New System.EventHandler (this.page_load);</p> <p>}</p> <p>#ndregion</p> <p>}</p> <p>}</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-104967.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="104967" 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.046</b>, SQL: <b>9</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 = 'XKL00wzudN7ji_2BDis_2FikD1qmqFB4EaKHDdgBYbDypL47Vt5xJSn_2FEu3a0P1hmB_2BctdLFcxPxq9R6HvETyAHIkQ_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>