ASP. NET MVC Image Management (delete)

Source: Internet
Author: User

Last week, I wrote an ASP. NET MVC image Management (upload, preview and display) http://www.cnblogs.com/insus/p/4620420.html it only implements upload function, instant preview and display function. Today we will complete the delete function.

Since the picture is stored in a binary database, it is convenient to delete it. Just delete the database records.

Create a stored procedure in the database first:

CREATE PROCEDURE [dbo].[Usp_imagestore_delete](    @ImageStore_nbr INT) asDELETE  from [dbo].[Imagestore] WHERE [IMAGESTORE_NBR] = @ImageStore_nbrGO
View Code


Create a Delete method in entity entities, and the program communicates with the database.


Next, you need to create an action action on the controller:



In the #70 code, because we use links to implement deletions, there is no post data, so the operation does not use attribute HttpPost. If you use it, the deletion will have an exception: theresource cannot be found.



OK, in the view, the Data display table, add a column, the following highlighted areas:


Demo:

A bit on the deletion, and then normal, such a design is not the slightest human, so that users have the choice of confirmation or regret. In the deleted link, add one more parameter htmlattributes:



And look at the effect:


A record delete, it seems a little bit hidden, insus.net below do a bulk delete demo.
To implement this function, consider how to handle the primary key value of the selected record, how to collect and store it, and how to pass it into the data. ASP. NET MVC does the removal of the ammonium button:

<id= "Button1"  type= "button"  value= "Delete"  />


is not a Web controll for ASP. This is the client tag, so use jquery to implement it.

Let's start with the database layer, write the stored procedure, or process the incoming string, as in the order above. Because of the strings we passed, such as "2,5,4,10,25", write a function that converts these characters into a data table:



Well, write a stored procedure that is used for bulk deletion:


The part that draws the red line above is the application of the SQL custom function above. Stored Procedure Code:

ALTER PROCEDURE [dbo].[Usp_imagestore_batchdelete](    @MultiPrimaryKeyString NVARCHAR(MAX) ) asDELETEImg from [dbo].[Imagestore]  asimg Right JOIN [dbo].[udf_splitstringtotable](@MultiPrimaryKeyString,',') asOp on(IMG. Imagestore_nbr=Mpk. Value)
View Code


Development goes to ASP. NET MVC, there is an entity write bulk Delete method:


In the controller, we create an operation that is used for jquery:

Ok, the main work is the view, we need to modify the HTML and add jquery code, not the same as the urgent. Add an Ammonium button label and a checkbox:



Implementing the jquery Code:


Run to see if the desired effect is achieved?

No problem, the record can be deleted normally. However, there is no regret prompt, let the user confirm after the correct deletion, add a line of code:



Demo again:


Event code for JQuery button:

$ ("#Button1"). Click (function () {                varVallist = ""; $(' Input[name= ' Imgsel "]). each (function () {                    if( This. Checked) vallist+ = ', ' + $ ( This). Val ();                }); Vallist= vallist.length > 0? Vallist.substring (1, vallist.length): ""; if(Vallist = = "") {alert ("Select Delete Records."); return; }                Else {                    if(Confirm ("All selected records'll be delete!") = =true{$.ajax ({type:' POST ', URL:'/july15/batchdelete ', DataType:' JSON ', data:JSON.stringify ({strpklists:vallist }), ContentType:' Application/json; Charset=utf-8 ', Success:function(data, textstatus) {alert ("Delete succeeded. ");                            Location.reload (); }, Error:function(XMLHttpRequest, Textstatus, Errorthrown) {alert (errorthrown);                    }                        }); }                }            });
View Code


In any case, we develop programs to be efficient and interface friendly. The above batch removal, we are all the selected primary key values concatenated together into the database, that is to be efficient. There is no need to have programs in the loop to pass in the database separately. In the higher version of the database, there is another method, is also insus.net more commonly used methods. is to put all the selected primary key values in a DataTable and then pass the DataTable into the database.

You can have a database to customize a data type, which is actually the structure of a DataTable.

Then create a stored procedure:


In the entity of MVC, the code reference below #59~ #78, where #61,62 is defining a DataTable. #64是把字符串根据 "," split into arrays. #66 ~69 is a cyclic array that stores values in a DataTable.



In the controller, we modify the operation slightly:


OK, the last instance animated demo won't go up. It's the same as the demo above. In the whole article, perhaps it is not complete enough. But insus.net the master, share in this, hope you have some knowledge to gain ...


The following content was added on 2015-07-07 14:20:
After the post was published, it was found that a small function was not implemented, is to put a full select checkbox at the top of the table. No problem, now add up and make it more comprehensive:
In HTML modification, add a checkbox:



Writing the jquery code is also fairly straightforward:


At this point, this requires an animated demo:


ASP. NET MVC Image Management (delete)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.