Multiple Delete Using jquery json and c#

Question

I have already bind a html table using jQuery json. I want to get multiple checkbox value using jQuery json and delete by selected multiple delete method. This is my code for bind the table.

$(function () {
     $.ajax({
 type: "POST",
         contentType: "application/json; charset=utf-8",
         url: "WebForm5.aspx/BindDatatable",
         data: "{}",
         dataType: "json",
         success: function (dt) {
             debugger;
             for (var i = 0; i < dt.d.length; i++) {
                 $("#example1 > tbody").append("<tr><td> <input type='checkbox' /></td><td>" + dt.d[i].CategoryID + "</td><td>" + dt.d[i].Name + "</td><td>" + dt.d[i].Status + "</td><td> <button type='submit'>Submit</button><button type='submit'  onclick='deleteRecord(" + dt.d[i].CategoryID + ")'>Delete</button> </tr>");

             }
             $("#example1").DataTable();

         },
         error: function (result) {
             alert("Error");
         }
     });

 });

You just tell me :

1.what is the code to select all the checkbox??

2.Code to delete using multiple jquery??

The Server side Code is here For Single Delete(with out checkbox):

[WebMethod]
public static void deleteRecord(int Id)
{

    clsCategoryBL objproject = new clsCategoryBL();

    objproject.CategoryDelete(Id);

}

In BL:

public string CategoryDelete(int CategoryID)
{
    using (KSoftEntities db = new KSoftEntities())
    {
        try
        {

            var categoryDetails = db.tblCategories.Where(i => i.CategoryID == CategoryID).SingleOrDefault();
            db.tblCategories.Remove(categoryDetails);

            db.SaveChanges();
            return "Record deleted successfully";
        }
        catch (Exception ex)
        {

        }
        return "Error on deletion";
    }
}

I want To delete it on server Side that means also on my database(Sql) So what should i do???

I Want To Delete Multiple Row By Click On Multiple CheckBox On Database Also..I have mention in above the backend code also..I want to delete the row of html table by click 2 to 3 checkbox(it may be vary depend upon the data) and click Delete Selected button..

Basically multiple checkbox values can be obtained using their id property on client-side, thus you just need to serialize the data as an array of values and process them on server with `foreach`. Also, `WebForm5.aspx/BindDatatable` likely not a proper way to call code-behind method, use query string instead when calling custom processing method. — Tetsuya Yamamoto, Jul 11 '16 at 08:24
Can You Tell Me briefly???write down some code?how to get the id?? — Manoj Maharana, Jul 11 '16 at 08:26
Are your "multiple selection to delete" checkboxes created dynamically with certain id pattern? If yes, build an JS array and iterate through a for loop on JS side to obtain array of values, then on server-side call use foreach to pick values one-by-one and remove them. — Tetsuya Yamamoto, Jul 11 '16 at 08:39
yes but how????what is the code for jquery and for c#??how to get the value of the array and how to do multiple delete? — Manoj Maharana, Jul 11 '16 at 08:40
Please check the posted solution, that may far from your needs but at least can point out your essential problems. — Tetsuya Yamamoto, Jul 11 '16 at 09:51
The error is comes in these lines $("#example1").DataTable(); — Manoj Maharana, Jul 11 '16 at 10:02
`DataTable()` may not defined on JS context, try `$("#example1").bind` or something that involving the checkbox instead. I can provide more solution if you have certain definition about `DataTable()` action to perform with. — Tetsuya Yamamoto, Jul 11 '16 at 10:08
can you write down how to pass an array in jquery via ajax to a c# webmethod?? — Manoj Maharana, Jul 11 '16 at 10:17
the output is the error function error: function (result) { alert("Error"); — Manoj Maharana, Jul 11 '16 at 10:45

score 0 · Answer 1 · edited May 23 '17 at 12:14

To select all available checkbox with jQuery, use code below:

$('input[type=checkbox]').prop("checked", this.checked);

// or use attribute way
$('input[type=checkbox]').attr("checked", "checked");

To achieve multiple selections rather than selecting all checkbox, use a JS array to hold checkbox values into JSON serialization before ajax call (see here and here for references):

 // prepare an array of values
 var categories = new Array();

 // iterate all checkboxes and obtain their checked values, unchecked values are not pushed into array
 $('input[type=checkbox]').each(function () {
      this.checked ? categories.push($(this).val()) : null;
 });

 // assume urldata is your web method to delete multiple records
 var urldata = "WebForm5.asmx/BindDataTable";
 $.ajax({
         type: "POST",
         contentType: "application/json; charset=utf-8",
         url: urldata,
         data: JSON.stringify({ Id: categories }), // used to convert array into proper JSON format
         dataType: "json",
         success: function (dt) {
                  // done whatever tasks if succeeded
             }
             $("#example1").DataTable();

         },
         error: function (result) {
             alert("Error");
         }
     });

On your web method, pass an array as method's input list and perform desired operations:

[WebMethod]
// note clear difference between single and multiple selections
public static void deleteRecord(List<int> Id)
{
    clsCategoryBL objproject = new clsCategoryBL();

    // iterate through input list and pass to process method
    for (int i = 0; i < Id.Count; i++) 
    {
        objproject.CategoryDelete(Id[i]);
    }
}

public String CategoryDelete(int CategoryID)
{
    using (KSoftEntities db = new KSoftEntities())
    {
        try
        {
            var categoryDetails = db.tblCategories.Where(i => i.CategoryID == CategoryID).SingleOrDefault();
            db.tblCategories.Remove(categoryDetails);

            db.SaveChanges();

            // Advice: Place this line below somewhere after all iteration process finished
            return "Record deleted successfully"; 
        }
        catch (Exception ex)
        {

        }
        return "Error on deletion";
    }
}

This solution is just skeletons to figure out what operations should be performed, you can modify it based on your needs.

Any further edits and comments welcome.

Multiple Delete Using jquery json and c#

1 Answers1