Manipulating data in ASP.net 2.0 54: Include a file upload option when adding new records _ self-study process

Introduction:

In the previous 2 tutorials, we explored how to use the FileUpload control to upload files from the client to the server and how to display binary data in a data Web control.

In this section, we'll create a Web page to add a new kind. In addition to adding textboxes controls to the name and description properties of the class, we'll add 2 fileupload controls on the page--one for uploading new classes, the other for uploading classes. The uploaded images will be stored directly in the picture column of the new record. In contrast, the brochure is stored in the ~/brochures folder, while the file path is stored in the Brochurepath column of the new record.

Before creating the page, we need to update the architecture. Since Categoriestableadapter's main query does not return the picture column, the automatic production Insert method contains only the CategoryName, description, and Brochurepath columns. We need to create new methods in TableAdapter to include the 4 columns of categories. The CATEGORIESBLL class of the business logic layer also needs to be updated.

Step 1th: Add a Insertwithpicture method to the Categoriestableadapter

In the previous tutorial, "Creating a data access layer," We created the Categoriestableadapter and set it to automatically generate the Insert, update, and delete commands based on the main query. In addition, we set the TableAdapter to enable the DB direct method, which creates the insert, update, and delete methods. These methods perform the automatically generated insert, update, and delete commands, which, naturally, are based on the columns returned by the main query. In the tutorial, "uploading Files using FileUpload," we extended the Categoriestableadapter main query to include Brochurepath columns.

Because the Categoriestableadapter main query and the picture are referenced, the picture value cannot be involved when you add a new record or update a record. To get the picture information, either create a new method in the TableAdapter to insert the binary data of the view, or customize the automatically generated insert command. However, there is a risk that custom insert commands may be overwritten by the wizard, with the custom automatically generated insert command. For example, suppose we customize the Insert command to use the Picture column to update the TableAdapter insert method so that it contains a parameter corresponding to the picture binary data. Then create a method at the business logic layer that uses the Dal method and then invokes the business logic layer method at the presentation layer. Everything is working fine now, but the next time you set up TableAdapter in the TableAdapter Setup Wizard, our custom Insert command will be rewritten by the wizard, returning to the state before customization. The result is that our code will not compile!

　　Note: This problem does not exist if you use stored procedures instead of SQL statements. In future tutorials, we'll explore using stored procedures in place of SQL statements in the data access layer.

To avoid this headache, we add new methods for TableAdapter, rather than customizing the SQL commands that are automatically generated. We named the added method Insertwithpicture, which accepts CategoryName, Description, Brochurepath, and picture values, and executes the insert command to add the above values to a single record.

Right-click at the top of the Categoriestableadapter and select Add Query. Enter the TableAdapter Query Setup Wizard, first ask us how to access the database TableAdapter query, select "Use SQL Statement", click Next, because we want to add new records for table categories, select "INSERT", click Next.

Figure 1: Select the INSERT option

Now we need to specify the INSERT SQL statement. The wizard automatically generates an INSERT statement based on the main query. At this point, it inserts only CategoryName, description, and Brochurepath values. Updates to it, including picture columns and parameter @picture, are as follows:

INSERT into [Categories]
 ([CategoryName], [Description], [Brochurepath], [picture])
VALUES
 (@ CategoryName, @Description, @BrochurePath, @Picture)

Finally, the wizard asked us to name the method, named Insertwithpicture, point finish.

Figure 2: Named Insertwithpicture for the new method

Step 2nd: Update the business logic layer

Since the presentation layer generally refers to the business logic layer rather than bypassing it to directly reference the data access layer, we need to create a business logic layer method to invoke the data access layer method just created (insertwithpicture), this section, We create a insertwithpicture method in CATEGORIESBLL that accepts 3 strings and a byte array, with string arguments corresponding to name, description, and brochure file addresses ; The byte array corresponds to the binary content of the picture. As shown in the following code, the BLL method invokes the corresponding Dal method:

[System.ComponentModel.DataObjectMethodAttribute
 (System.ComponentModel.DataObjectMethodType.Insert, false)]
public void Insertwithpicture (string CategoryName, String description,
 string brochurepath, byte[] picture)
{ C5/>adapter.insertwithpicture (CategoryName, description, Brochurepath, picture);

　　Note: Before adding insertwithpicture methods to BLL, make sure that the dataset (Typed DataSet) has been saved because the code for the Categoriestableadapter class is automatically generated based on the Typed DataSet. If the changes to the typed dataset are not saved in the first place, the adapter attribute will not agree with the Insertwithpicture method.

Step 3rd: List existing types and their binary data

In this tutorial we will create a page that allows users to add new classes, including their pictures and explanatory brochures. In the previous section, we used a GridView control containing TemplateField and ImageField to show each class's name, description, and a link to a download description booklet. In this tutorial, we implement the same functionality, create a page that shows the existing class, and add new classes.

Open the Displayordownload.aspx page of the BinaryData folder, switch to source mode, and copy the declaration code of the GridView and ObjectDataSource controls, pasted on the uploadindetailsview.aspx page <asp:Content> elements. Also, don't forget to copy the Generatebrochurelink method of the background code class to the Uploadindetailsview.aspx code class.

Figure 3: Copy the Declaration code of the Displayordownload.aspx page to the page uploadindetailsview.aspx

When you're done, check the page in your browser to make sure everything works. The GridView control lists 8 classes, each containing a picture and a link to a download description booklet.

Figure 4: You should see each class and its corresponding binary data

Step 4th: Set up Categoriesdatasource to support add functionality

The ObjectDataSource control named Categoriesdatasource used by the GridView control with ID categories currently does not support adding data. To implement this feature, we want to set the Insert method of the control to refer to a method of the class CATEGORIESBLL. Specifically, we need to use the Insertwithpicture method added in step 2nd.

In the smart tag for the ObjectDataSource control, click Set Data source. Always point to the "Define Data Methods" interface. Click the Insert tab again, select the method "Insertwithpicture" from the dropdown list, and finish setting the point finish.

Figure 5: Setting the ObjectDataSource control using the Insertwithpicture method

　　Note: When you finish setting up, Visual Studio asks if you "refresh fields and Keys" and choose No, because if you choose Yes, the data Web controls fields will be reconstructed. That will rewrite all the columns (field) that we have customized.

When the settings are complete, the ObjectDataSource control assigns a value to the InsertMethod property, including a <insertparameters>, as shown in the following declaration code:

<asp:objectdatasource id= "Categoriesdatasource" runat= "Server"
 oldvaluesparameterformatstring= "original_{" 0} "selectmethod=" GetCategories "
 typename=" Categoriesbll insertmethod= "Insertwithpicture" >
 < insertparameters>
 <asp:parameter name= "CategoryName" type= "String"/> "<asp:parameter Name=
 " Description "type=" string "/> <asp:parameter name=" Brochurepath "type="
 string "/>
 <asp: Parameter name= "Picture" type= "Object"/>
 </InsertParameters>
</asp:ObjectDataSource>

Step 5th: Create an Insert interface

In the Tutorial 16 overview Insert, UPDATE, and delete data, we talked about enabling the DetailsView built-in add interface when the DetailsView control's data source control supports adding functionality. Let's add a DetailsView control on the page, put it on top of the GridView control, and in Add mode. When you add a new kind to the DetailsView control, the GridView control under it automatically refreshes and displays the class that you just added.

Drag a DetailsView control from the toolbox to the page, put it above the GridView, set its ID to newcategory, and empty its height and width properties. In its smart tag, set it to bind to a data source named Categoriesdatasource, and enable the Insert feature.

Figure 6: Bind the DetailsView control to the Categoriesdatasource and enable the Insert feature.

To render the DetailsView as an insert interface, set its DefaultMode property to insert

We note that although the DetailsView control has 5 Boundfields--categoryid, CategoryName, Description, Numberofproducts and Brochurepath, However, the Insert interface does not contain CategoryID because the InsertVisible property of the CategoryID column is false. Why are these 4 columns displayed? Because the GetCategories () method that the ObjectDataSource calls returns these columns. When adding a new class, we do not want the user to specify a value for the Numberofproducts column, and we also want users to upload pictures and related PDF brochures for the new class.

In DetailsView, the Numberofproducts column is deleted, and the HeaderText property of CategoryName column and Brochurepath column is set to "Category" and "brochure" respectively. Convert Brochurepath to TemplateField, add a TemplateField, set its HeaderText property to "picture", and place it between the Brochurepath column and the CommandField column.

Figure 7: Bind the DetailsView control to the Categoriesdatasource and enable the Insert feature (note: Incorrect picture description)

When you convert Brochurepath BoundField to a TemplateField in the Edit Column dialog box, the TemplateField will contain 3 templates: ItemTemplate, EditItemTemplate and InsertItemTemplate, because we only need insertitemtemplate template, delete the other 2 templates. So, your DetailsView control's declaration code should look something like the following:

<asp:detailsview id= "newcategory" runat= "Server" autogeneraterows= "False" datakeynames= "CategoryID" DataSourceID = "Categoriesdatasource" defaultmode= "Insert" > <Fields> <asp:boundfield datafield= "CategoryID" Headertext= "CategoryID" insertvisible= "False" readonly= "True" sortexpression= "CategoryID"/> <asp:boundfield D Atafield= "CategoryName" headertext= "Category" sortexpression= "CategoryName"/> <asp:boundfield "DataField=" Description "headertext=" Description "sortexpression=" Description "/> <asp:templatefield headertext=" Brochure "Sortexpression=" Brochurepath > <InsertItemTemplate> <asp:textbox id= "TextBox1" runat= "Server" text= ' &
 lt;%# Bind ("Brochurepath")%> ' ></asp:TextBox> </InsertItemTemplate> </asp:TemplateField> <asp:templatefield headertext= "Picture" ></asp:TemplateField> <asp:commandfield showinsertbutton= "

 True "/> </Fields> </asp:DetailsView>

Add FileUpload Control for brochure and picture fields

Currently, the InsertItemTemplate template for Brochurepath TemplateField contains a textbox, and the picture TemplateField does not contain any templates. We add FileUpload controls for the InsertItemTemplate template templates for these 2 TemplateField.

Select Edit Template from the smart tag of the DetailsView control, select the InsertItemTemplate template for Brochurepath TemplateField from the Drop-down list, and delete the textbox in the template. Drag a FileUpload control from the toolbox to the page and set its ID to brochureupload. Similarly, add a FileUpload control with ID pictureupload to the insertitemtemplate template for picture TemplateField.

Figure 8: Adding a FileUpload control to the InsertItemTemplate template

After the addition is complete, the 2 TemplateField declaration code should be similar to the following:

<asp:templatefield headertext= "Brochure" sortexpression= "Brochurepath" >
 <InsertItemTemplate>
 <asp:fileupload id= "brochureupload" runat= "server"/>
 </InsertItemTemplate>
</asp: templatefield>
<asp:templatefield headertext= "Picture" >
 <InsertItemTemplate>
 <asp : FileUpload id= "Pictureupload" runat= "server"/>
 </InsertItemTemplate>
</asp:templatefield >

When the user adds a new class, we want to make sure that the uploaded picture and description brochure are the appropriate file types. For the description brochure, you must be a PDF type; for pictures, we need users to upload an image file. Is that the image file must be a certain type, such as GIF or JPG? In view of other different types of files, we need to extend the columns of the table categories to include these types of files. At the same time we can send these files to the client via Response.ContentType in the page displaycategorypicture.aspx. Since table categories now does not have such a column, we only limit the user upload specified as a certain type of image file. The existing images in the table categories are bitmaps, but it may be more appropriate to use the JPG type.

When the user uploads the file type incorrectly, we will cancel the insert operation and display a prompt message. Add a label Web control under the DetailsView control, set the ID to uploadwarning, clear the Text property, and set the CssClass property to "Warning", Then set the visible and EnableViewState properties to false. Warning CSS definition in styles.css, the role is to display text as bold italic, red large words.

　　Note: Ideally, the CategoryName and description BoundFields are converted to Templatefields to achieve the purpose of customizing the insertion interface. For example, for the description insert interface, it might be better to use a text box that allows a branch line; Insert an interface to CategoryName because CategoryName is not allowed to be a null value. We should add a RequiredFieldValidator control to ensure that the name of the class is entered. These steps are left to the reader to do the exercise, more in-depth discussion please refer to the previous tutorial 20 "Custom Data Modification Interface"

Step 6th: Save the uploaded brochure in the server's file system

But the user types the relevant category information, after the Insert button, a page return occurs, followed by a series of insert processes. First, the Iteminserting event events of the DetailsView control occur, and then the Insert () method of the ObjectDataSource control is invoked, which causes the Categories table to add a new record; Occurrence of the iteminserted event of the DetailsView control.

Before invoking the Insert () method of the ObjectDataSource control, we must make sure that the user has uploaded the appropriate file and saved it on the server's file system. To do this, we create an event handler for the Iteminserting event for the DetailsView control, adding the following code:

Reference the FileUpload control
fileupload brochureupload =
 (fileupload) Newcategory.findcontrol (" Brochureupload ");

if (brochureupload.hasfile)
{
 //Make sure that a PDF has been uploaded
 if (string. Compare (System.IO.Path.GetExtension
 (Brochureupload.filename), ". pdf", true)!= 0)
 {
 Uploadwarning.text =
  "Only PDF, the May is used for a category ' s brochure.";
 Uploadwarning.visible = true;
 E.cancel = true;
 return;
 }

The code first references the FileUpload control named Brochureupload in the DetailsView control template, and if the file has already been uploaded, check to see if the FileUpload control's extension is ". PDF, and if not, cancel the insert operation and exit.

　　Note: It is not foolproof to ensure that the user uploads the PDF file by examining the file's extension (extension). For example, it is possible that the user did upload a PDF file, except that the extension is. brochure, or the user provided is not a PDF file, but use the. pdf extension. The insurance approach is to do a final check on the contents of the file by programming. In this way, though thoroughly, it is a bit too much (overkill). In most cases, it is sufficient to check the file name extension.

As discussed in the tutorial, "uploading Files using FileUpload," Use caution when saving files in a file system to avoid overwriting files uploaded by others. In this section, we try to use an already used name for the uploaded file and add a number to the end of the name to make the difference. For example, if the folder ~/ There is a file named Meats.pdf in the brochures, we named Meats-1.pdf when we uploaded the file, if there is a meats-1.pdf file in the folder, we'll name it meats-2.pdf, and so on, until the filename is the only one.

The following code uses the File.exists (path) method to determine whether a file with the same name already exists and, if it exists, renames it until the name is unique:

Const string brochuredirectory = "~/brochures/";
String Brochurepath = Brochuredirectory + brochureupload.filename;
String filenamewithoutextension =
 System.IO.Path.GetFileNameWithoutExtension (brochureupload.filename);

int iteration = 1;

while (System.IO.File.Exists Server.MapPath (brochurepath))
{
 Brochurepath = string. Concat (Brochuredirectory,
 filenamewithoutextension, "-", Iteration, ". pdf");
 iteration++;
}

Once a unique filename is found, the file is saved to the file system immediately, and the value of the Insertparameter parameter Brochurepath of the ObjectDataSource control is updated to write the file name to the database. As you can see in the tutorial, "uploading Files using FileUpload," Use the SaveAs (path) method of the FileUpload control to save the file. Use E. Values collection to update the parameter brochurepath of the ObjectDataSource Control.

Save the file to disk and set the value of the Brochurepath parameter
brochureupload.saveas (Server.MapPath Brochure Path));
e.values["Brochurepath"] = Brochurepath;

Step 7th: Save uploaded pictures to the database

To save the uploaded image in a newly added record, we need to assign a value to the picture parameter of the ObjectDataSource control using the uploaded data in the Iteminserting event of the DetailsView control. Before we do that, however, we need to make sure that the uploaded file is jpg instead of any other format. As discussed in step 6th, we check the file's extension for its type.

Although the Categories table allows the picture to be a null value, all types should have a single image. On this page, we force the user to provide a picture when adding a record. The following code ensures that the image has been uploaded and is the appropriate type.

Reference the FileUpload controls
fileupload pictureupload = (fileupload) Newcategory.findcontrol (" Pictureupload ");
if (pictureupload.hasfile)
{
 //Make sure that a JPG has been uploaded
 if (string. Compare (System.IO.Path.GetExtension (pictureupload.filename),
  ". jpg", true)!= 0 &&
 string. Compare (System.IO.Path.GetExtension (pictureupload.filename),
  ". jpeg", True)!= 0)
 {
 Uploadwarning.text = "Only JPG the May is
  used for a category ' s".
 Uploadwarning.visible = true;
 E.cancel = true;
 return;
 }
else
{
 //No picture uploaded!
 Uploadwarning.text =
 "You must provide a picture for the new category."
 Uploadwarning.visible = true;
 E.cancel = true;
 return;
}

The code should precede the code in step 6th and, if there is a problem with the uploaded file, the event handler ends before the file is saved to the file system.

Suppose the uploaded file is not a problem, and then we use the following code to assign the uploaded file's data to the parameter picture:

Set the value of the picture parameter
e.values["picture" = pictureupload.filebytes;

Complete Iteminserting Event handler

The following is the complete code for the Iteminserting event handler:

protected void Newcategory_iteminserting (object sender, DetailsViewInsertEventArgs e) {//Reference the FileUpload cont
 Rols fileupload pictureupload = (fileupload) newcategory.findcontrol ("Pictureupload"); if (pictureupload.hasfile) {//Make sure that a JPG has been uploaded if (string. Compare (System.IO.Path.GetExtension (Pictureupload.filename), ". jpg", true)!= 0 && string. Compare (System.IO.Path.GetExtension (Pictureupload.filename), ". jpeg", True)!= 0) {Uploadwarning.text = "only JPG
  The documents may is used for a category ' s picture.
  Uploadwarning.visible = true;
  E.cancel = true;
 Return
 } else {//No picture uploaded!
 Uploadwarning.text = "You must provide a picture for the new category."
 Uploadwarning.visible = true;
 E.cancel = true;
 Return
 
 
 }//Set the value of the picture parameter e.values["picture"] = pictureupload.filebytes; Reference the FileUpload controls FileUpload brochureupload = (fileupload) NEWCATEGORY.FINDCOntrol ("Brochureupload"); if (brochureupload.hasfile) {//Make sure that a PDF has been uploaded if (string. Compare (System.IO.Path.GetExtension (Brochureupload.filename), ". pdf", true)!= 0) {uploadwarning.text = "only pdf"
  Documents May is used for a category ' s brochure. ";
  Uploadwarning.visible = true;
  E.cancel = true;
 Return
 Const string brochuredirectory = "~/brochures/";
 String Brochurepath = Brochuredirectory + brochureupload.filename;

 String filenamewithoutextension = System.IO.Path.GetFileNameWithoutExtension (brochureupload.filename);

 int iteration = 1; while (System.IO.File.Exists Server.MapPath (Brochurepath)) {Brochurepath = string.
  Concat (Brochuredirectory, Filenamewithoutextension, "-", Iteration, ". pdf");
 iteration++; }//Save the file to disk and set the value of the Brochurepath parameter Brochureupload.saveas (Server.MapPath Brochur
 Epath));
 e.values["Brochurepath"] = Brochurepath;

 }
}

Step 8th: Update the Displaycategorypicture.aspx page

Let's take a few minutes to test the insert interface and the Iteminserting event handler that we created in the last few steps. In the browser view the Uploadindetailsview.aspx page, try adding a class, ignoring the picture or specifying a non-JPG or non-pdf brochure. In either case, an error message is displayed and the insert operation is canceled.

Figure 9: A warning message is displayed when the uploaded file is not correct

The confirmation page requires uploading a picture and does not accept non-pdf or non-jpg files. Add a new category that contains a JPG image, put the brochure column blank, click the Insert button, page back, add a new record for the Categories table, and upload the image data directly into the database. After the GridView control is updated, the newly added class is displayed. However, as shown in Figure 10, the picture of the class is not displayed correctly.

Figure 10: A picture of the new class is not displayed

The reason the picture is not displayed is because the page displaycategorypicture.aspx used to return a picture of a particular class is set to handle a bitmap with an OLE header. The 78-byte header is stripped off before the data in the picture column is returned to the client. Also, the uploaded jpg file does not have an OLE header, so the required bytes have been removed from the picture's binary data.

Since there are jpg files in table categories and bitmaps with OLE headers, we need to adjust the page displaycategorypicture.aspx so that it splits the OLE headers on the original 8 classes without stripping the newly added classes. In the following tutorial, we explore how to update the image file for an existing record and adjust the pictures of all the previous classes to JPG format. Now, in the page displaycategorypicture.aspx, we'll split the OLE headers of the original 8 classes with the following code.

protected void Page_Load (object sender, EventArgs e) {int CategoryID = Convert.ToInt32 (request.querystring["CategoryID"

 ]);
 Get information about the specified category Categoriesbll Categoryapi = new CATEGORIESBLL ();
 northwind.categoriesdatatable categories = Categoryapi.getcategorywithbinarydatabycategoryid (CategoryID);

 Northwind.categoriesrow category = Categories[0]; if (CategoryID <= 8) {//For older categories, we must strip the OLE header ... images are bitmaps//Output HTTP H

 Eaders providing information about the binary data Response.ContentType = "Image/bmp";
 Output the binary data//But we need to strip out the OLE header const int oleheaderlength = 78; int strippedimagelength = category.
 Picture.length-oleheaderlength;
 byte[] Strippedimagedata = new Byte[strippedimagelength]; Array.copy (category.

 Picture, Oleheaderlength, Strippedimagedata, 0, strippedimagelength);
 Response.BinaryWrite (Strippedimagedata); else {//for new catEgories, images are jpgs ...

 Output HTTP headers Providing information about the binary data Response.ContentType = "Image/jpeg"; Output the binary Data response.binarywrite (category.
 picture); }
}

With the above modifications, JPG Images can now be displayed correctly in the GridView control.

Figure 11: A JPG image of the newly added class can be displayed correctly

Step 9th: Delete the brochure file when an exception occurs

Saving an uploaded file to the file system also faces the problem of not associating the data with the storage mode. When a record is deleted, the corresponding file stored in the file system should also be deleted, similarly, when adding records. Suppose these conditions: when a user adds a new category, he assigns a picture and a description booklet. After clicking the Insert button, the page is returned, the Iteminserting event of the DetailsView control occurs, and the file is saved to the server file system; Next, the ObjectDataSource control's insert () Method calls the Insertwithpicture method of the Categoriesbll class, and it calls the Categoriestableadapter Insertwithpicture method.

What if the database is just offline, or if there are errors in the INSERT SQL statement? There is no doubt that adding records will fail. As a result, adding records to the database failed, but the file was successfully uploaded to the server file system. When an exception is thrown by the insert procedure, the file should be deleted.

In tutorial 18, "Dealing with the bll/dal layer in the ASP.net page", we mentioned that different layers of the architecture might throw exceptions. At the presentation layer, we can determine whether an exception has occurred by DetailsView the Iteminserted event of the control and provide the InsertParameters parameter value of the ObjectDataSource control. Therefore, we create an event handler for the Iteminserted event, check whether to throw an exception, or delete the file specified by the Brochurepath parameter of the ObjectDataSource control.

protected void newcategory_iteminserted
 (object sender, DetailsViewInsertedEventArgs e)
{
 if (e). Exception!= null)
 {
 //Need to delete brochure file, if it exists
 if (e.values["Brochurepath"]!= null)
  S Ystem. Io. File.delete (Server.MapPath (
  e.values["Brochurepath"). ToString ());
 }

Summarize

We'll go through several steps to create a web-based add-in interface that allows you to add records that contain binary data. If you choose to store directly in the database, we will make some adjustments to the architecture, in order to insert binary data, we need to add the appropriate method; After the architecture is adjusted, the next step is to create an add interface, use the DetailsView control, and customize it to include the FileUpload control. The uploaded file can be stored on the server's file system, or a data source parameter (DetailsView) is assigned to the Iteminserting event handler of the control.

Keeping the data in the file system also requires a naming system to avoid overwriting files uploaded by one user to another. Also, when inserting data into a database fails, the uploaded file must be deleted.

Now we can add a new category to the system with its picture and description brochure. In the next chapter we explore how to update existing classes and how to properly remove the corresponding binary data when a class is deleted.

I wish you a happy programming!

Author Introduction

The author of this series of tutorials, Scott Mitchell, has six asp/asp. NET book, is the founder of 4GuysFromRolla.com, has been applying Microsoft Web technology since 1998. You can click to see all Tutorials "[translation]scott Mitchell asp.net 2.0 data tutorial," I hope to learn asp.net help.