Archives for category: ASP.NET Development (Web Forms or MVC)

I needed to display TIF images that were stored in the database.  Unfortunately it is not as simple as just setting the MIME Type and writing out the binary. So I asked Google and the overwhelming response I saw was to convert the TIF into another image type and then write out the binary.  Here is my take on the solution:

Written in C# (the image is sent via a Generic Handler hence the “context.Response”):

using (MemoryStream stream = new MemoryStream(Content))
{
   System.Drawing.Image img = System.Drawing.Image.FromStream(stream);
   img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);
   context.Response.ContentType = "image/gif";
}
Advertisements

I was playing with the HTML5 Canvas element trying to allow client side zooming/panning/rotating of an image.  I finally figured out an implementation that will accommodate the zooming and I am still working on the panning/rotating pieces of the functionality.  I use a SELECT element to act as the scale (Zoom) for the image.  Even though it is not present in the code snippet below, I use a Generic Handler to populate my ASP.NET Image control.  The HTML5 canvas uses the ASP.NET Image control as the source of the image and then I can use JavaScript and the Canvas element to manipulate the image on the client side.

The HTML:

Zoom:
<select id="ZoomSelect" onchange="drawpicture();">
   <option id="Zoom50" value=".5">50%</option>
   <option id="Zoom75" value=".75">75%</option>
   <option id="Zoom100" value="1" selected="selected">100%</option>
   <option id="Zoom125" value="1.25">125%</option>
   <option id="Zoom150" value="1.5">150%</option>
   <option id="Zoom175" value="1.75">175%</option>
   <option id="Zoom200" value="2">200%</option>
</select>
<canvas id="viewer"></canvas>
<asp:Image ID="imgViewer" runat="server" style="display:none;" />

The JavaScript:

window.onload = function () {
   drawpicture();
};

function drawpicture() {
   var canvas = document.getElementById("viewer");
   var context = canvas.getContext("2d");
   var imageObj = document.getElementById('<%= imgViewer.ClientID %>');
   var scale = $('#ZoomSelect option:selected').val();
   context.clearRect(0, 0, 3000, 3000); // clear canvas for re-draw
   context.canvas.width = imageObj.width * scale;
   context.canvas.height = imageObj.height * scale;
   context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, imageObj.width * scale, imageObj.height * scale);
}

I was in a situation where I was expanding the functionality of an existing ASP.NET Gridview and I needed to add on-click highlighting and double-click redirecting.  I was browsing the JQuery website for a general idea on what to implement when I eventually pieced this together:

The JQuery:

var selected = null;

$(document).ready(function () {
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").hover(function () {
      $(this).css('cursor', 'pointer');
   }, function () {
      $(this).css('cursor', 'default');
   });
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").click(function () {
      $(selected).removeClass("selectedrowstyle"); // Removes the CSS class from the previously selected row
      $(this).addClass("selectedrowstyle");        // Assigns the CSS class to the newly selected row
      selected = this;                             // Set the global javascript variable to the newly selected row
   });
   $("#<%=GRIDVIEWNAME.ClientID %>").find("tr").dblclick(function (e) {
      var id = $(this).closest("tr").find("input[type=hidden][id*=HIDDENFIELDNAME]").val();
      window.location = "PAGENAME.aspx?id=" + id;
   });
});

In the click function I use JQuery to set a class that will change the row background and text color to help the user identify which row was selected.

In the dblclick function I use JQuery to look up an id that is stored in a template column in the gridview.  That template column contains a hidden control that stores a value that I want to pass as a query string to the new page.

The hover function is just there to give me the nice pointer cursor look when a user is hovering over a row.