In the
first part of this tutorial, we have learned how to display the binary field image from SQL DataSource within a GridView's template field. Now, we will show you how you can update the image in Edit mode of GridView control. Not only that, you may want to upload the image and resize the uploaded image to a managable size so that it doesn't cost too much load in your SQL server. Same like before, you dont need to write any code to perform all of these tasks.
Updating a record with binary field (imagedata) :
Step 1: First of all, we need to configure the SQLDatasource properly to allow it to update/insert/delete records. It is really necessary for update/insert records even though you are not using SpieLogicBlobAndFile Control.
Step 2: In this step, you need to select the radio button named "Specify columns from a table or view".
Then you should select the fields you want to retrieve for your datasource. For simplicity, we have choosen *. Then you need to click the button named "Advanced". A dialog box will appear with check box option named "Generate INSERT, UPDATE, and DELETE statements. You should check this option. For this demonstration, we did not prefer to check option named "Use optimistic concurrency" so please leave this option uncheck for this tutorial. Then click Ok button. You will be back to the second part of the SQLDataSource configuration window. Click
Next on this window and then finally click
Finish to finish the configuration.
STEP 3: Now, you need to select the Source View of the aspx page and locate the source tag of the SQLDataSource you are associating with your gridview control.
Locate the attribute named "type" with the value "object" both for UpdateParameters and InsertParameters for the selected SQLDataSource for the binary data field named "imagedata" and remove this attribute from both of the UpdateParameters and InsertParameters for "imagedata".
Step 4: Now you should go back to design view and edit the Edit Template for the field named imagedata of the gridview. Place a BlobImage control or BlobThumbnail Control exactly in the same manner like before (discussed in part 1). Bind the BlobData property (2 way) with imagedata field and bind the MimeType property (2 way) with mimetype field.
Step 5: Now choose the property builder and check Enable UploadMode. Now, in order to resize the uploaded image to a managable size, check the option "Resize Image after upload". For the sake of enhancement, check "Keep aspect ratio for resized uploaded image. Also provide your preferred resized image size. Now you can also choose to convert the resized image to a better quality image format like PNG format. Please note about it from the following screenshot.
Step 6: Now, you should set the databinding properties of this control. Bind the BlobData property with the imagedata field and bind the MimeType property with the mimetype field and finally exit template editing of the GridView1 control.
Step 7: Now you should enable editing for the gridview1 control from its smart tag.
Now if you run the web application, you will see the gridview as follows:
Step 8: Now you should be able to upload a new image file to replace the original image file in edit mode of the gridview control. Please click the link named "Edit" of the first row of the GridView and then you will see that BlobImage is appearing with its UploadMode FileBrowser and upload button. You can upload any file you want from your PC. Every time you upload a new image file, the image file will be resized according to your upload mode resize preference.
After Clicking Update link
Step 9: After clicking the Update Link, you will see that the GridView is updated with the new image replacing the old image in the first row.
...........................................................................................................
topInserting a new record to a binary field (imagedata) :
Step 1: In order to insert a record, you should add either a FormView or a DetailsView in your aspx page. For simplicity we have added a DetailsView and set
DefaultMode=Insert from its property editor. Also choose DataSource for this details view to SqlDataSource1 which already exists in the page.
Step 2: Now, you should add the imagedata field to this DetailsView by clicking EditFields link from the Smart Tag. Then add imagedata field, Convert that field toa TemplateField.
Step 3: Now, from the smart tag of the control, click Edit Template.
Step 4: Now, you should select "Insert Template" from all template options. Within the Insert Template, you need to place an instance of the BlobThumbnail Control or BlobImage Control and check the Enable Upload Mode.
Very very important thing to remember, once you pasted the instance, make sure BlobData and MimeType properties are bounded with the imagedata and mimetype fields.
After placing the Blob control Instance, click "End Template Editing."
Step 5: Now, you need to enable the Details View Inserting Recors by simply check the option "Enable Inserting" from its smart tag.
Step 6: Run the Web Application.
You should see the screen like this.."There is no BlobData availabe". If you specified any value for "NULL_IMAGE_URL" then that image will replace the shown image.
Step 7: Now you should browse for a new image from your PC and click Upload Button to see the new uploaded image.
Step 8: Now add some data to the other textboxes and click "Insert" link.
After clicking insert link, You will see that, the new image is inserted and the previous GridView is updated with the new inserted image. Now, you can enable deleting rows by checking "Enable Deleting" from the smart tag of the gridview. After doing so, you can delete entire record from the gridview. So, now you can Display, Insert, Update and Delete Binary data from and to SQL DataSource using SpieLogic Blob control and we did not write any code so far.
No comments:
Post a Comment