studio NETSOULS

Applying Web To Your Business

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

  • Currently 3 /5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

I’ll show you how you can quickly enable ViewState compression and show you the effects it has on overall ViewState size and server performance.

How do I enable Viewstate compression?

Enabling ViewState compression with the RadCompression module really couldn’t be easier. It requires no changes to your code, no changes to your markup, and not even a change to your web.config (assuming you’ve already added the required HttpModule references). The only thing you need to do is add a new Browser file to your web project (or modify your Browser file if you’re already using one). To add a new Browser file, follow these simple steps:

  • Right-click on your web project, select "Add…" > "Add ASP.NET Folder…" > "App_Browsers"
  • Right-click in your new App_Browsers folder, select "Add…” > "Add New Item…" > "Browser File"
  • The new browser file will have some default values, feel free to delete everything and then add this code:
   1: <browsers>
   2:  <browser refID="Default">
   3:  <controlAdapters>
   4:  <adapter controlType="System.Web.UI.Page" adapterType="Telerik.Web.UI.RadHiddenFieldPageStateCompression" />
   5:  <!--Uncomment the following line to use SessionStateCompression and remove ViewState from the page-->
   6:  <!--<adapter controlType="System.Web.UI.Page" adapterType="Telerik.Web.UI.RadSessionPageStateCompression" />-->
   7:  </controlAdapters>
   8:  </browser>
   9: </browsers>

And that’s it!. Run your project at this point and you’ll discover that the RadCompression module is now automatically compressing your ViewState.

How much does the compression help?

ViewState, as you probably know, is just a serialized string of data. By default, it’s not compressed, it’s not encrypted, and it’s often a bloated piece of string data that gets passed back and forth with every request to the server.

Compressing this data is an easy way to reduce your page size and reduce the number of bytes you must send and receive from the server.

To demonstrate RadCompression’s effectiveness, I created a simple page with a RadGrid that loads data from the AdventureWorks Employees table. I bound my grid declaratively to an EntityDataSource and I slowly started increasing my Grid’s page size- from 10 records to 240 per page. As the page size grew, obviously the ViewState grew.

RadCompression Efficiency

RadCompression Efficiency

The blue bars represent the ViewState size (in KB) with RadCompression. The green bars represent the difference in the original ViewState size (i.e. total size with no compression). And the red numbers indicate the compression “efficiency” at each step (for instance, “53%” means the compressed ViewState was 53% smaller than the original).

  • As the original ViewState grew, the compression became even more “efficient” (ranging from 47% to 75% compression ratios)
  • In the first two tests, there was no difference between the original and the “compressed” output – more on this in a moment
  • On average, RadCompression reduced ViewState size by 61%! (omitting the “0” tests)

So why are the first two tests “0%”? RadCompression actually has a “threshold” that must be passed before compression will kick-in. For smaller ViewState sizes, it doesn’t make sense to apply compression- the overhead of the processing and compression header/footer offset the small gains in overall state size. Currently, this threshold is 8KB. If your original ViewState is smaller than 8KB, RadCompression will automatically skip over it. Bigger than that, and RadCompression will automatically work.

What is the effect on server performance?

Many people will often say, “Sure you can compress ViewState, but doesn’t that add significant processing overhead on the web server?” It is true that adding compression represents extra CPU cycles and it does have an effect on server performance. With RadCompression, though, that impact is relatively small. Internally, RadCompression uses Deflate compression to compress and decompress state, which is much faster than Gzip compression. And thanks to the optimizations of the compression APIs in .NET, the overall effect on server processing time is low.

This may be one of the easiest ways to help reduce your page size, and in turn, help improve your page performance. By simply registering the RadCompression HttpModule and adding a .browser file to your project, you can see reductions of over 70% in your ViewState size with little impact on your server performance. Clearly, as developers we should all be taking active steps to reduce our ViewState size, but if you’ve already done everything you can (or at least everything you have time for) and you want to squeeze a few more KB out of your page, RadCompression is ready and waiting for you in your Telerik toolbox.

  • Currently 0 /5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

This example is useful when you need to add new row in the gridview. Here  to can add the link URL runtime.

Add a placeholder in the HTML page.

   1: <asp:PlaceHolder ID="phGrid" runat="server"></asp:PlaceHolder>

Now create the gridview run time

   1: private void BindGrid()
   2:   {
   3:     // Create new instance of gridview
   4:       GridView gvNew = new GridView();
   5:       gvNew.ID = "ItemGrid";
   6:       gvNew.SkinID = "ListView";
   7:       gvNew.Width = 300;
   8:  
   9:       DataTable dt = Datasource();
  10:       if (dt.Columns.Count > 1)
  11:       {
  12:             // Assign RowDataBound handler. This will add link URL dynamically.
  13:           gvNew.RowDataBound += new GridViewRowEventHandler(gvNew_RowDataBound);
  14:           gvNew.DataSource = dt;
  15:           gvNew.DataBind();
  16:       }
  17:       else
  18:       {
  19:             // Some Comments
  20:       }
  21:      
  22:       phGrid.Controls.Add(gvNew);
  23:  
  24:   }
   1: protected void gvNew_RowDataBound(object sender, GridViewRowEventArgs e)
   2:  {
   3:      int random = 1;
   4:      int count = e.Row.Cells.Count;
   5:  
   6:      if (e.Row.RowType == DataControlRowType.DataRow)
   7:      {
   8:          string str = e.Row.Cells[0].Text;
   9:      }
  10:      else if (e.Row.RowType == DataControlRowType.Footer)
  11:      {
  12:  
  13:          Label lblEdit = new Label();
  14:          lblEdit.Text = "&nbsp;";
  15:          Table tbl = new Table();
  16:          tbl = (Table)e.Row.Parent;
  17:          GridViewRow myRow = new GridViewRow(0, 0, DataControlRowType.DataRow, DataControlRowState.Normal);
  18:          DataTable dt = new DataTable();
  19:          dt = (DataTable)this.dtOCCRateList;
  20:  
  21:          for (int i = 0; i < count; i++)
  22:          {
  23:              TableCell myCell = new TableCell();
  24:              // need to create the edit hyperlink in the the footer 
  25:  
  26:              if (i == 0)
  27:              {
  28:                  // leave blank
  29:                  myCell.Controls.Add(new LiteralControl(""));
  30:              }
  31:              else
  32:              {
  33:                  // create the image and hyperlink 
  34:                  HyperLink editLink = new HyperLink();
  35:                  editLink.ID = "editLink" + random;
  36:                  
  37:                  // set the image url 
  38:                  editLink.ImageUrl = "~/library/images/ico-edit.gif";
  39:  
  40:                  // set the navigate url 
  41:                  editLink.NavigateUrl = "~/Default.aspx?Id=" + dt.Rows[0][i].ToString()
  42:                      + "&PId=" + AssetId.ToString();
  43:  
  44:                  // now add this hyperlink in the table cell
  45:                  myCell.Controls.Add(editLink);
  46:                  
  47:                  // add delete 
  48:                  HyperLink delLink = new HyperLink();
  49:                  delLink.ID = "delLink" + random;
  50:                  random++;
  51:  
  52:  
  53:                  delLink.ImageUrl = "~/Library/images/delete.gif";
  54:  
  55:                  // set the navigate url
  56:                  delLink.NavigateUrl = "~/Default.aspx?Id=" + dt.Rows[0][i].ToString()
  57:                      + "&PId=" + AssetId.ToString();
  58:  
  59:                  myCell.Controls.Add(new LiteralControl("&nbsp;"));
  60:                  myCell.Controls.Add(delLink);
  61:              }
  62:  
  63:              myRow.Cells.Add(myCell);
  64:              tbl.Rows.Add(myRow);
  65:          }
  66:      }
  67:  
  68:  }
  • Currently 0 /5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

This code is useful to transpose the datatable rows and columns.

   1: DataTable dtSource = new DataTable();
   2: protected void Page_Load(object sender, EventArgs e)
   3:    {
   4:     // Bind the source datatable from the database
   5:     dtSource = dataSource();
   6:    }
   7:  
   8: public DataTable FlipDataTable(GridView gvNew)
   9:     {
  10:         DataTable dataTable = new DataTable("dataTable");
  11:  
  12:         // create column
  13:         DataRow newRow;
  14:         for (int iRow = 0; iRow < dtSource.Columns.Count; iRow++)
  15:         {
  16:             newRow = dataTable.NewRow();
  17:  
  18:             newRow[0] = dtSource.Columns[iRow].ToString();
  19:  
  20:             for (int iCol = 1; iCol <= dtSource.Rows.Count; iCol++)
  21:             {
  22:                 newRow[iCol] = dtSource.Rows[iCol - 1][iRow];
  23:             }
  24:  
  25:             dataTable.Rows.Add(newRow);
  26:         }
  27:     }
  • Currently 0 /5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Lets suppose you have a data source in XML like:

   1: <Settings> 
   2:    <ElementCollection> 
   3:          <add key="SomeKey" value="SomeValue"> 
   4:          <add key="SomeKey" value="SomeValue"> 
   5:    </ElementCollection> 
   6: </Settings>


Now you want to edit the key and values with in the xml element collection.

<asp:XmlDataSource ID="configXmlDataSource" XPath="//add" runat="server" DataFile="~/settings.config"/>

Use the following code in the code-behind

   1: // In this code we are getting the Data Item values of the Rad Editor. On UpdateCommand Event we are getting the values of data row in an instance of hash.
   2: GridDataItem dataItem = (GridDataItem)e.Item; 
   3: Hashtable ht = new Hashtable(); 
   4: dataItem.ExtractValues(ht);
   5:  
   6: //Get the node values as per the selected key name: 
   7: XmlNode AppNode = XmlDataSource1.GetXmlDocument().SelectSingleNode( String.Format("//add[@key='{0}']", key)); 
   8:  
   9: //Now assign the new value of the Value attribute of the selected node:
  10: AppNode.Attributes["value"].Value = ht["value"];
  11:  
  12: //Finally we need to update the xml source file:
  13: configXmlDataSource.Save();
  • Currently 0 /5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

About Us

studio NETSOULS is a complete IT services company, offering strategy, design, development and implementation of the total solution for your web and IT initiatives. The solutions we provide, enables businesses to leverage leading edge technology to gain sustainable competitive advantages in today's marketplace.

We specialize in designing, developing and deploying the next generation of IT solutions including e-business solutions Read more...

Tags

This will be shown to users with no Flash or Javascript.

Contact Us

My status

Quote of the Day

"Do you see a man wise in his own eyes? There is more hope for a fool than for him."

- Proverbs 26:12

NutritionVista

www.NutritionVista.com

Archives


Advertisements


Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2008

Log in