ASP. NET: Like Web Form, or drag controls (2)

ASP. NET: Like Web Form, or drag controls (1)
ASP. NET: Like Web Form, or drag controls (2)
ASP. NET: Like Web Form, or drag controls (3)
ASP. NET: Like Web Form, or drag controls (4)
ASP. NET: Like Web Form, or drag controls (5)

This article was dragged on for too long. It was originally intended to be called FormView. Later, I thought the content was not entirely related to FormView, and I changed it to the current name. When ASP. net mvc is popular, is it a kind of resistance?

The first article is too basic and I am not very interested in sending it to the homepage. You can go here to see: ASP. NET: Like Web Form, or drag controls (1)

Let's get down to the truth, and the book goes back. The previous article demonstrated how to use VS to automatically generate the form to be submitted. Here we will consider a complicated situation, including the form with uploaded images and displaying the images saved in the database in WebForm.

Recall this database table:

Commodity Product

Id	Name	Company_id
1	Steamed Stuffed bun	3
2	Steamed dumplings	3
3	Talent	1
4	MVP	1
5	Window 7	2

 

Since it is a product, it is no longer a normal situation to configure images for each product. For similar requirements, many people prefer to store images together and use a GUID as the file name, the GUID of the image file stored in the database. However, adding, deleting, modifying, and querying backups become very difficult, which is too troublesome! Is there a better way?

In fact, most databases use the Image field type. We can store images in the database. The expected table structure is as follows:

Id	Name	Company_id	Image
1	Steamed Stuffed bun	3	[Bin]
2	Steamed dumplings	3	[Bin]
3	Talent	1	[Bin]
4	MVP	1	[Bin]
5	Window 7	2	[Bin]

Table creation:

Follow the previous method to create a FormView from the data table and set the Default Mode to Insert. The result is as follows:

Okay, we automatically generate a data insertion form, but unfortunately, the image field generates a TextBox, it is obviously unrealistic to expect users to copy the image content and input it into the text box. We want to submit the image through the upload method, so let's edit the Insert template and use the upload control.

This is the data binding method of TextBox. The Text of TextBox is bound to the image field.

Unfortunately, when we put a FileUpload here, only two Bindable attributes appear. Even if Show all properties is selected, there is no desired attribute.

Is it feasible? Of course not! We can also directly change the ASP. NET code. Find the corresponding code first:

Then bind the FileBytes attribute to the image field:

<Asp: FileUpload ID = "imageFileUpload" runat = "server" FileBytes = '<% # Bind ("image") %>'/>

 

Then let's run the program and see, insert a new product type as planned: Steamed Stuffed bun.

Click "run" and we get an error: the SQL variable type does not match the field.

In fact, we only need to delete the image parameter type restrictions in the Data source:

Now, the data seems to be correctly inserted.

 

 

 

 

Now, we have successfully saved images to the database, but we still need to confirm whether the images are saved. Besides, it is easy to store the images and it is difficult to display them.

We tried to use a GridView to display our table. However, the automatically generated table ignores the image field. It seems that we still need to find a way to display the image.

 

First, we will analyze that the images in HTML must exist in a separate URL form, so we cannot do anything on the same page. The content of our image URL is the binary value in the image field of the corresponding product. Therefore, we need a page similar to image Service. Here we create a page called CommodityImage. aspx.

Of course, we cannot create a page for each row in the table, so CommodityImage. aspx should also be able to process post or get parameters and query the data table based on the primary key of the data item. We just need to replace the response stream on this page with the content of the image field in the data table.

So here we need to use C # to query the database? Of course not! To be as lazy as possible, we have some tips here: P

We need to remove all the HTMl and ASP. NET tags on the page, leaving only

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "CommodityImage. aspx. cs" Inherits = "WebForm. CommodityImage" %>

Switch to the design view and drag a SqlDataSource! Then configure the DataSource. Note that we only need the image field, and we must obtain the id from the post or get parameters (here we still use post, therefore, we need to add the query conditions:

Click where to configure

After configuring the data source, we can use the following code in Page_load to replace the Response data stream:

Response. Clear ();
Response. ContentType = "image/jpeg ";
Foreach (System. Data. DataRowView record in sqlperformance1.select (cesceselectarguments. Empty ))
{
Response. BinaryWrite (record [0] as Byte []);
}

Here we write SqlDataSource to ASP. NET tag, let the IDE complete most of the work for us, so you only need to use 6 lines of valid code to display the image, you can follow the page url? Id = 1 to see the effect, that is, the image we just uploaded.

With this image page, we will display it in the GridView. First, we will add a template column to the Grid:

Then you can edit the template for this column. Since it is a display image, we drag an image. Now we want to point the image url to the image service page we just wrote, and upload the id as QueryString. The specific method is shown in the figure. You do not need to say more:

 

The final result looks good: (if the example image uploaded in the figure infringes your rights, please contact me and I will handle it as soon as possible,)

The following articles may include:

Automatically fill in fields: submission time, user ID, auto-increment primary key, and securely retrieve information from the session

Multi-Table query: how to change the referenced foreign key to a drop-down list?

Integrated Client technology: Use CSS to make the page look beautiful. Use the client JavaScript to increase the interaction between seemingly simple pages and images of different sizes will immediately be different.

 

PS. About this series

In fact, although I have been dragging and dropping, I don't really just want to share some drag and dropping skills, except as a small trick for laziness in small projects, I hope you can read these articles to learn more about the programming model of WebForm. In fact, most of the time, our fatigue is not from the complexity of the business logic, but from the wrong design. Web applications involve SQL and ASP.. NET tag, C #, HTML, CSS, JavaScript, and other languages with different usage levels. Writing business logic and functions at which level has a huge impact on the workload.

This series comes from a small project that I used to help my friends. It is a system similar to invoicing, and some functions such as statistics management, the only C # code is the five lines of C # mentioned above. I hope to share this interesting development experience and let everyone see a different aspect of WebForm.