Scribd
Upload
12 views

Insert Image

Uploaded by

abhishek basak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Insert Image

Uploaded by

abhishek basak
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

SqlDataSource : Update /Insert (GridView)

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.
........................................................................................................... top

Inserting 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.

You might also like