Moduler>AJAX>AJAX i .NET>Histogram
AJAX Histogram
Eksempel 1
Løsningen er laget som en enkel løsning som bare baserer seg på å lese Request-objektet og skrive til Resonse-objektet.
HTML-siden som drar det hele ser slik ut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Histogram</title> <script src="http://donau.hiof.no/borres/dn/_jslibs/jquery.js" type="text/javascript"> </script> <script type="text/javascript"> function sendData() { var d = document.forms[0].inputdata.value; d = d.replace(/\n/g, ","); var dat = new Date(); var time = dat.getTime(); var params = "data=" + d + "&random=" + time; $.ajax({ url: 'Default.aspx', method: 'get', data: params, success: function (data) { $('#img').html(data); }, error: function (data) { $('#img').html("Could not access content"); } }); } </script> </head> <body> <h1>Lag histogram</h1> <table> <tr> <td> <form action="#"> <textarea id="inputdata" name="inputdata" rows="15" cols="10"> </textarea> </form> <div> <input type="button" value="Lag histogram" onclick="sendData();" /> </div> </td> <td id="img"> Fyll inn heltall i lista til venstre,<br /> ett positivt heltall pr linje </td> </tr> </table> </body> </html>
Som du ser bruker den jQuery [1] som AJAX-bibliotek.
Koden som tar seg av spørsmål - svar ser slik ut:
protected void Page_Load(object sender, EventArgs e) { // pick up data String paramdata = this.Request.Params["data"]; String paramrandom = this.Request.Params["random"]; // set up paths string datapath = HttpContext.Current.Server.MapPath(".").ToString(); String imgref ="b" + paramrandom + ".gif"; String newfile = Path.Combine(datapath, "b" + paramrandom + ".gif"); // delete all old gif-files // will make the new one with new name to avoid caching try { String[] files = Directory.GetFiles(datapath, "*.gif"); foreach (String f in files)File.Delete(f); } catch (Exception dex) { this.Response.Write(dex.Message); this.Response.Flush(); return; } if ((paramdata==null) || (paramdata.Length < 2)) { this.Response.Write("ingen data"); this.Response.Flush(); return; } // get data as numbers String[] lines = paramdata.Split(','); List<int> data = new List<int>(lines.Length); try { foreach (string line in lines) if (line.Trim().Length > 0) data.Add(Convert.ToInt32(line.Trim())); } catch (Exception ex) { this.Response.Write(ex.Message); this.Response.Flush(); return; } // we draw on a bitmap Rectangle Rec = new Rectangle(0, 0,286,271); Bitmap canvas = new Bitmap(Rec.Width, Rec.Height, PixelFormat.Format16bppRgb555); Graphics cg = Graphics.FromImage(canvas); cg.FillRectangle(Brushes.White, Rec); // the actual drawing drawData(cg, Rec, data); // save the drawing as a file try { canvas.Save(newfile, ImageFormat.Gif); } catch (Exception sex) { // if image is too large // if not write permissions this.Response.Write(imgref); this.Response.Write(newfile); this.Response.Write(sex.Message); this.Response.Flush(); return; } String ret = String.Format(@"<img src=""{0}"" alt=""{0}""/>", imgref); this.Response.Write(ret); this.Response.Flush(); }
Denne koden er referert fra en en-linjes aspx-fil, som er adressen for AJAX-forespørselene:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Selve uttegningen er slik (samme som i desktop og website løsningen):
// draw data within Rec on g private void drawData(Graphics g, Rectangle Rec, List<int> data) { Font tFont = new Font("Arial", 16); SolidBrush blueBrush = new SolidBrush(Color.Blue); // any data to display if ((data != null) && (data.Count == 0)) { g.DrawString(" Ingen data ", tFont, blueBrush, new Point(10, 4)); } else { // find max value float max = 0.0F; foreach (int number in data) max = Math.Max((float)number, max); // Width of each column, with some margins int w = (Rec.Width - 10 * data.Count - 20) / data.Count; // flip round top and leave some room at top for text int txtheight = 20; g.ResetTransform(); g.TranslateTransform(0.0F, Rec.Height); g.ScaleTransform(1.0F, -1.0F * ((Rec.Height - txtheight) / (max + 1))); for (int ix = 0; ix < data.Count; ix++) { g.FillRectangle(Brushes.Red, new Rectangle(10 + ix * (w + 10), 0, w, data[ix])); } // text it g.ResetTransform(); g.DrawString("Resultater", tFont, blueBrush, new Point(10, 4)); } g.Flush(); }
Eksempel 2
Default.aspx -siden blir slik:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function pageLoad() { } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> </div> <h1>Lag histogram</h1> <table> <tr> <td> <asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical"> <asp:TextBox ID="TextInData" runat="server" TextMode="MultiLine" Height="250px"> </asp:TextBox> </asp:Panel> <div> <asp:Label ID="LabelStartText" runat="server" Text="Skriv inn naturlige tall"> </asp:Label> <br /> <asp:Button ID="ButtonMake" runat="server" Text="Lag histogram" onclick="ButtonMake_Click" /> </div> </td> <td> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Image ID="Image1" runat="server" /> <asp:Label ID="LabelMsg" runat="server" Text="-"> </asp:Label></ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ButtonMake" EventName="Click" /> </Triggers> </asp:UpdatePanel> </td> </tr> </table> </form> </body> </html>
C# koden som genererer histogrammet er slik. Selve uttegningen er som i eksempel1 ovenfor.
protected void ButtonMake_Click(object sender, EventArgs e) { // clear error msg LabelMsg.Text = ""; // pick up data String paramdata = TextInData.Text; // generate a random filename to avoid caching String paramrandom = Convert.ToString(new Random().Next()); // set up paths String datapath = HttpContext.Current.Server.MapPath(".").ToString(); Image1.ImageUrl= "b" + paramrandom + ".gif"; String newfile = Path.Combine(datapath, "b" + paramrandom + ".gif"); // delete all old gif-file(s) try { String[] files = Directory.GetFiles(datapath, "*.gif"); foreach (String f in files) File.Delete(f); } catch (Exception dex) { LabelMsg.Text =dex.Message; return; } if (paramdata.Length < 2) { LabelMsg.Text="ingen data"; return; } // get data as numbers String[] lines = paramdata.Split('\n'); List<int> data = new List<int>(lines.Length); try { foreach (string line in lines) if (line.Trim().Length > 0) data.Add(Convert.ToInt32(line.Trim())); } catch (Exception ex) { LabelMsg.Text=ex.Message; return; } // we draw on a bitmap Rectangle Rec = new Rectangle(0, 0, 286, 271); Bitmap canvas = new Bitmap(Rec.Width, Rec.Height, PixelFormat.Format16bppRgb555); Graphics cg = Graphics.FromImage(canvas); cg.FillRectangle(Brushes.White, Rec); // the actual drawing drawData(cg, Rec, data); // save the drawing as a file try { canvas.Save(newfile, ImageFormat.Gif); } catch (Exception sex) { // if image is too large // if not write permissions LabelMsg.Text=sex.Message; return; } }