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;
}
}
