how to edit, delete data in dynamic html table in asp.net

Question

Dear sir/mam, I am working on asp.net web appliction. in my application i need to create simple html page and bind data sql server and binded data i have to select data and perform delete or edit option. but sir problm is, i am not getting how i start this, no idea comes in my mind. please guide me how i start and achive this

Laxmidhar Sahoo · Answer

hi Bellow is one example calling webservice in html page. your url shoul be changed , check whether your webservice is runing or not in postman script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" > script > script type = "text/javascript" > $(function () { $("[id*=btnSubmit]").click(function () { var name = $.trim($("[id*=txtName]").val()); var age = $.trim($("[id*=txtAge]").val()); $.ajax({ type: "POST", url: "Service.asmx/GetDetails", data: "{ name: '" + name + "', age: " + age + "}", contentType: "application/json; charset = utf -8", dataType: "json", success: function (r) { alert(r.d); }, error: function (r) { alert(r.responseText); }, failure: function (r) { alert(r.responseText); } }); return false; }); }); script >

Salman Beg · Answer

Yeah so I think .asmx page is not working with html page. Thanks

Senorita · Answer

my find is , when i used html page in this case have to put my web method in .asmx page, my method return array type object which shows error. if i use normal method its working fine.

Salman Beg · Answer

Hey you can do the same Ajax call in HTML page also. Just add the script tag and in that add your Ajax call and it will work fine. Thanks

Senorita · Answer

Hi i haven't found a way to call ajax call method in html page. so i bit change in my application i used aspx page.but still anyone have any solution please share with me. my code is:- Asp.net Bind Data to Datatable using JQuery or JSON $(document).ready(function () { $("#txtfromdate1").datepicker({ changeMonth: true, changeYear: true }); $("#txtfromdate2").datepicker({ changeMonth: true, changeYear: true }); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "abc.aspx/bindtdsdata", data: "{}", dataType: "json", success: function (data) { for (var i = 0; i $("#tbDetails").append(" " + data.d[i].TransactionId + " " + data.d[i].Name_of_Deductor + " " + data.d[i].TAN_No + " " + data.d[i].Section + " " + data.d[i].dtTransaction + " " + data.d[i].mTot_Amt_Paid_Credited + " " + data.d[i].mTot_Tax_Deducted + " " + data.d[i].cCompany + " " + data.d[i].dtcreated + " "); } }, error: function (result) { alert("Error"); } }); $('[type="button"]').on('click', function () { var check = confirm("Are you sure you want to delete this row?"); if (check == true) { var selectedRows = getSelectedRows(); var myJSON = JSON.stringify(selectedRows); if (myJSON == "[]") { alert("There is no row selected.."); return false;} $.ajax({ type: "POST", url: "abc_Edit.aspx/DeleteTDSdata", data: "{IID:" + JSON.stringify(myJSON) + "}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { $(".errMsg ul").remove(); var myObject = response.d; alert(myObject) window.location.href = window.location.href; clear(); $('td input:checked').closest('tr').remove(); }, error: function (response) { alert(response.status + ' ' + response.statusText); } }); } }); }); $(document).on('click', '.checkAll', function (e) { var table = $(this).closest('table'); table.find(':checkbox').not(this).prop('checked', this.checked); }); function getSelectedRows() { var selectedRows = [] $('input[type=checkbox]').each(function () { if ($(this).is(":checked")) { //alert($(this).val()); selectedRows.push($(this).val()); } }); return selectedRows; } function GETTAN(txt) { var myJSON= txt.value; var myJSON1= ""; var myJSON2= ""; $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "abc_Edit.aspx/bindtdsdata", data: "{TANNO:" + JSON.stringify(myJSON) +",Fromdate1: " + JSON.stringify(myJSON1) +",Fromdate2: " + JSON.stringify(myJSON2) +"}", dataType: "json", success: function (data) { for (var i = 0; i $("#tbDetails").append(" " + data.d[i].TransactionId + " " + data.d[i].Name_of_Deductor + " " + data.d[i].TAN_No + " " + data.d[i].Section + " " + data.d[i].dtTransaction + " " + data.d[i].mTot_Amt_Paid_Credited + " " + data.d[i].mTot_Tax_Deducted + " " + data.d[i].cCompany + " " + data.d[i].dtcreated + " "); } }, error: function (result) { alert("Error"); } }); } /*table, th, td { border: 1px solid maroon; border-collapse: separate; }*/ #tbDetails th, #tbDetails td { padding: 0.8em; border: 1px solid; } #tbDetails th { background-color: #6699FF; font-weight: bold; } Enter Tan Number Uploaded Date From    To Select Name of Deductor TAN of Deductor Section Transaction Date Total Amount Paid / Credited Total Tax Deducted Company Upload Date

Jignesh Kumar · Answer

Hi, You can refer below links, https://www.aspdotnet-suresh.com/2015/07/jquery-ajax-gridview-crud-operations-insert-edit-update-delete-in-aspnet-using-csharp-vbnet.html https://www.aspsnippets.com/Articles/ASPNet-jQuery-AJAX-CRUD-Select-Insert-Edit-Update-and-Delete-in-ASPNet-GridView-using-jQuery-AJAX.aspx

Salman Beg · Answer

Just check in your html page that the ajax url which you mentioned that is correct or not because as per the error it is saying that the method is not valid.

Senorita · Answer

sir, if i call same methode in .aspx page , its working fine, but when i apply same code in html page then hit method its showing error.

Salman Beg · Answer

I think you are not calling the proper method in ajax call. Check properly. You can follow this link as a reference also, https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx Thanks.

Senorita · Answer

i create html page,:- "Head1" runat= "server" > "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" > "text/javascript" > $(document).ready( function () { $.ajax({ type: "POST" , contentType: "application/json" , url: "test.asmx/BindDatatable" , data: "{}" , dataType: "json" , success: function (data) { for ( var i = 0; i $( "#tbDetails" ).append( " " + data.d[i].UserId + " " + data.d[i].UserName + " " + data.d[i].Location + " " ); } }, error: function (result) { alert( "Error" ); } }); }); "text/css" > table,th,td { border:1px solid black; border-collapse:collapse; } "form1" runat= "server" > "tbDetails" cellpadding= "0" cellspacing= "0" > "background-color:#DC5807; color:White; font-weight:bold" > "border:solid 1px #000000" > UserId UserName Location test.asmx Public Shared Function bindtdsdata() As TDS_Memorandum() ) Dim cs = ConfigurationSettings.AppSettings( "DSN_RMS" ) Dim TDS_Memorandums = New List(Of TDS_Memorandum)() Dim con As SqlConnection = New SqlConnection(cs) Dim cmd As New SqlCommand() con.Open() cmd.Connection = con cmd.CommandType = CommandType.StoredProcedure cmd.Parameters.Clear() cmd.CommandText = "TML_sp" cmd.Parameters.AddWithValue( "@List_Name" , "TDS_LIST" ) HttpContext.Current.Session( "Gbl_Qry_str" ) = "exec TML_sp @List_Name='TDS_LIST'" Dim dr = cmd.ExecuteReader() While dr.Read() Dim TDS = New TDS_Memorandum() With TDS .Name_of_Deductor = dr(0).ToString() .TAN_No = dr(1).ToString() .Section = dr(2).ToString() .dtTransaction = Convert.ToString(dr(3).ToString()) .mTot_Amt_Paid_Credited = dr(4).ToString() .mTot_Tax_Deducted = dr(5).ToString() .cCompany = Convert.ToString(dr(6).ToString()) .Createdby = dr(7).ToString() .dtcreated = Convert.ToString(dr(8).ToString()) .flag = dr(9).ToString() End With TDS_Memorandums.Add(TDS) End While con.Close() Return TDS_Memorandums.ToArray() End Function but when i run this code its showing below error:- System.InvalidOperationException: bindtdsdata Web Service method name is not valid. at System.Web.Services.Protocols.HttpServerProtocol.Initialize() at System.Web.Services.Protocols.ServerProtocolFactory.Create(Type type, HttpContext context, HttpRequest request, HttpResponse response, Boolean& abortProcessing)

Justin Cobler · Answer

This is the way to edit data from HTML table: Step 1: Creating SQL Table. Step 2: Designing ASPX Page. Step 3: Adding Controls using jQuery. Step 4: Removing a particular row. Step 5: Saving all the rows into the database.

Salman Beg · Answer

Hey. First create a Page and note down what are the things required in that page. Then design the page. You can bind, edit and update those records using Ajax call because in HTML page we don't have server side event. Also you need to use jQuery. Please do in chunk-wise manner so that you won't face much problem. Thanks