Need to crop or resize images before uploading, in asp.net? Sounds like the alternative to thumbnail generation in asp.net web page? Here comes a handy code using jQuery, JCrop and ASP.NET.

I have coded a shopping cart in which there was the need of uploading images to the server, and keep the sizes as required by the content of the pages. In my case I had to hard-code the size of the thumbnail I generated. But wouldn't it be lovely if the site user could crop the image and fix the required size? So I have found one very useful way to Upload and Crop Images with jQuery, JCrop and ASP.NET. I hope this will be useful for all programmers.

Upload and Crop Images with jQuery, JCrop and ASP.NET

At first glance, it should be easy to inject a javascript, but it took a little bit of digging around to figure out the resolution, the key is to use ScriptManager.

   1: <asp:UpdatePanel ID="myUpdatePanel" UpdateMode="Conditional" runat="server">

   2:    <Triggers>

   3:       <asp:AsyncPostBackTrigger ControlID="btnClick" EventName="Click" />

   4:    </Triggers>

   5:    <ContentTemplate>

   6:        <asp:ImageButton 

   7:           ID="btnClick" 

   8:           ImageUrl="ClickMe.png" 

   9:           runat="server"

  10:           CausesValidation="false" 

  11:           OnClick="btnClickEvent"

  12:           ToolTip="Click Me" 

  13:           AlternateText="Click me!" />

  14:    </ContentTemplate>

  15: </asp:UpdatePanel>

We wanted to dynamically inject some JavaScript code. If my ScriptManager control has EnablePartialRendering set to true, it's a simple matter of registering the script. What i didn't realize earlier was that you don't need to the use the current page or current event, you need to call the static method on the ScriptManager class.

   1: protected void btnClickEvent(object sender, ImageClickEventArgs e)

   2: {

   3:    btnClick.Text = "I was clicked."

   4:    btnClick.Disabled = true;

   5:    ScriptManager.RegisterClientScriptBlock(myUpdatePanel, typeof(UpdatePanel),myUpdatePanel.ClientID, "alert('It worked!');",true);            

   6: }

That's it! Use the ScriptManager class, point it to the instance of your update panel, pass it a unique key and then the JavaScript you want, and it will be executed once the update panel is done rendering.