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

Senorita

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

12 Replies

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
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>
+1
Salman Beg6y ago
Yeah so I think .asmx page is not working with html page. Thanks
0
Senorita6y ago
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.
0
Salman Beg6y ago
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
0

Senorita6y ago

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:-

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="abc_Edit.aspx.vb" Inherits="abc_Edit" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Asp.net Bind Data to Datatable using JQuery or JSON

Enter Tan Number

Uploaded Date

From

Select	Name of Deductor	TAN of Deductor	Section	Transaction Date	Total Amount Paid / Credited	Total Tax Deducted	Company	Upload Date

Jignesh Kumar6y ago
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
0
Salman Beg6y ago
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.
0
Senorita6y ago
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.
0
Salman Beg6y ago
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.
0
Senorita6y ago
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 < data.d.length; 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)
0
Justin Cobler6y ago
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.
0
Salman Beg6y ago
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
0