Create a pop-up window in DataGrid

zhaozj2021-02-16  56

Create a pop-up window in DataGrid

Author: wyhw Posted: 2003-8-1 Recommended Level: ★ View author information and author anthology

Create a pop-up window of the DataGrid: Herd proposal from DotNetJunkie of this article. 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.csdataGrid-open.aspx.csdataGrid-open.aspx <% @ page language = "c #" codebehind = "DataGrid-open.aspx.cs" autoeventwireup = "inherits =" Study.DataGrid_open "%> DataGrid-open </ title> <meta name =" generator "content =" Microsoft Visual Studio 7.0 "> <meta name =" code_language "content =" c # " > <meta name = "vs_defaultclientscript" content = "javascript"> <meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5> </ head> <body> <center> <center> < Form runat = "server" id = "form1"> <ask: dataGrid id = "dataGrid1" runat = "server" font-size = "12" autogeneratecolumns = "false"> <columns> <ask: BoundColumn Datafield = "ProductID "HeaderText =" Product ID "HeaderStyle-CssClass =" HEADERSTYLE "ItemStyle-CssClass =" ITEMSTYLEDEFAULT "/> <asp: BoundColumn DataField =" ProductName "HeaderText =" Product Name "HeaderStyle-CssClass =" HEADERSTYLE "ItemStyle-CssClass =" ItemStydeDefault "/> <ask: hyperlinkcolumn DataTextFormatString =" show details ... "DATATEXTFIELD =" 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 =</p> <p>"ITemStylehyperLink" /> (.../columns><//asp:dataGrid> "/HTMLDATAGRID-Open.aspx.csusing system; using system.collections; using system.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System. Data.SqlClient; Namespace Study {/// <summary> /// DataGrid_open's summary description. /// </ summary> public class datagrid_open: System.Web.UI.Page {protected System.Web.UI.WebControls.DataGrid DataGrid1; protected System.Web.UI.HtmlControls.HtmlForm Form1; #region User Defined Code private void Page_Load (object sender, System.EventArgs e) {if this.BindData () (this.IsPostBack!);} protected void BindData () {SqlCommand cmd = new SqlCommand ( "SELECT TOP 10 ProductID, ProductName FROM Products", con ( "Server = dwserver; DataBase = Northwind; User Id = sa; Password = 123456")); this.DataGrid1.DataSource = cmd.ExecuteReader (CommandBehavior.CloseConnection); this.DataGrid1.DataBind ();} protected SqlConnection con (System .String ConnectionString) {SqlConnection c = new SqlConnection (ConnectionString); c.Open (); return c;} #endregion #region Web Form Designer generated code override protected void OnInit (EventArgs e) {// // CODEGEN: the call It is necessary for the ASP.NET Web Form Designer. // InitializeComponent (); base.onit (e);} /// <summary> /// Designer Supports the required method - Do not use the code editor to modify the // / this method.</p> <p>/// </ summary> private () {this.load = new system.eventhandler (this.page_load);} #ENDREGON}} In addition to DataNavigateURLFORMATSTRING does not have any difficulties, you can notice that I actually use directly. A JavaScript fragment (Note: You can also create a .js file or use <script> </ script> in WebForm, JavaScript is so popular, so it 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.</p> <p>We can see these two files: DataGrid_show.aspx <% @ page language = "c #" codebehind = "DataGrid-show.aspx.cs" autoeventwireup = "false" inherits = "study.dataGrid_show"%> <html> <head > <title> DataGrid-show </ title> <meta name = "generator" content = "Microsoft Visual Studio 7.0"> <meta name = "code_language" content = "c #"> <meta name = "vs_defaultclientscript" content = " JavaScript> <meta name = "vs_targetschema" content = "http://schemas.microsoft.com/intellisense/ie5"> </ head> <body> <p align = "left"> <ask: DataGrid Headerstyle-CSSClass = "Headerstyle" temstyle-cssclass = "itemstyledefault" runat = "server" id = "dataGrid1" font-size = "8" height = "50" width = "675"> </ asp: datagrid> </ p> < P align = "center"> <a href="javascript:Window.close()"> Close Window </a> </ p> </ body> </ html> DataGrid_show.aspx.csusing system; using system.collections ; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI .Htmlcontrols; using system.data.sqlcl Int; Namespace Study {/// <summary> /// DataGrid_show's summary description.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-18499.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="18499" 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.045</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 = 'lX1gxa0MmmWq_2FlNQ3tEjrCK_2FI_2ByfHmK2V_2F7co1phgeIVwvxiQf34EsC9CPbCzLdFGrrzmM4VSmCTcMU5LV5T_2Fg_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>