Issue With Edit Record using Ajax Jquery In Asp.Net? RSS

3 replies

Last post Jan 30, 2020 07:57 AM by Yongqing Yu

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

raju bhai

Member

15 Points

96 Posts

Issue With Edit Record using Ajax Jquery In Asp.Net?

Jan 28, 2020 06:39 PM|raju bhai|LINK

I m working with Jquery Ajax and performing crud operation,

I want to update a record and When I click the update button then fill(means name and address) the form data and then changes of name or address then again press edit button my edit button should not be work?

Insert Button Click

<input type="button" id="btnsubmit" value="Submit" onclick="insertrecord()" />

<asp:HiddenField ID="HiddenField1" runat="server" Value="" />

Emploee.aspx

                //insertion  
                function insertrecord() {

                    EmpId = $('HiddenField').val();

                    if ($("#btnsubmit").val() == "Submit") {
                        $.ajax({
                            url: 'Emploee.aspx/insertdata',
                            type: 'POST',
                            contentType: 'application/json;charset=utf-8',
                            dataType: 'json',
                            data: "{name:'" + $("#txtName").val() + "',address:'" + $("#txtAddress").val() + "'}",
                            success: function (data) {
                                //alert(data.d);
                                alert("Insert Data Successfully");
                                 if(data.d)
                                {
                                    window.location.reload();
                                }

                            },
                            Error: function () {
                                alert("Insert Error");
                            }
                        });
                    }
                    else
                    {
                        //when I press again edit button(means change name and address) then the record should not be updated that is my problem??

                        $.ajax({

                            url: 'Emploee.aspx/edit',
                            type: 'post',
                            contentType: 'application/json;charset=utf-8',
                            datatype: 'json',
                            data: "{EmpId: '" + EmpId + "'}",
                            success: function (data) {
                                data = JSON.parse(data.d);
                            },
                            error: function () {
                                alert('Update Error');
                            },
                        });
                    }
                }

                   function getlistdata() {
                    $.ajax({
                        url: 'Emploee.aspx/GetEmpData',
                        type: 'get',
                        contentType: 'application/json;charset=utf-8',
                        dataType: 'json',
                        success: function (data) {
                            //alert(data.d);
                            //exit();
                            data = JSON.parse(data.d);
                            for (var i = 0; i < data.length; i++) {
                                $("#tbl").append('<tr><td>' + data[i].EmpName + '</td><td>' + data[i].EmpAddress + '</td> 

<td><input type="button" id="btnedit" value="Edit" onclick="EditData(' + data[i].EmpId + ',\'' + data[i].EmpName + '\',\'' + data[i].EmpAddress + '\')" /></td> </tr>');
                            }
                        },
                        Error: function () {
                            alert("get error");
                        }
                    });
                }

                function EditData(EmpId, EmpName, EmpAddress) {
                    $.ajax({

                        url: 'Emploee.aspx/updates',
                            type: 'post',  
                            contentType: 'application/json;charset=utf-8',  
                            datatype: 'json',  
                            data: "{EmpId: '" + EmpId + "',EmpName:'" + $("#txtName").val() + "',EmpAddress:'" + $("#txtAddress").val() + "'}",
                            success: function (data) {  

                                data = JSON.parse(data.d);  
                                EmpId = EmpId;
                                $("#txtName").val(EmpName);
                                $("#txtAddress").val(EmpAddress);
                              
                                //I m writing this condition for updating a record
                                if (EmpId != null) {
                                    $("#btnsubmit").val("Update");
                                }  
                            },  
                            error: function () {  
                                alert('Update Error');  
                            },

                        });
                    }

            </script>

Emploee.aspx.cs

        [WebMethod]  //update  when press update button click then fill form data 
        public static void updates(int EmpId, string EmpName, string EmpAddress)
        {
            cn.Open();

            SqlCommand cmd = new SqlCommand("update", cn);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@EmpId", EmpId);
            cmd.Parameters.AddWithValue("@EmpName", EmpName);
            cmd.Parameters.AddWithValue("@EmpAddress", EmpAddress);
            int i = cmd.ExecuteNonQuery();
            cn.Close();

            if (i>0)
            {
                Console.WriteLine("successfully updated");
            }
            else
            {
                Console.WriteLine("successfully Not updated");
            }
        }
        
        [WebMethod] (when fillable updated record changes then again press update button) but record should not be updated?
        public static string Edit(int EmpId, string EmpName, string EmpAddress)
        {
            string _data = "";
            cn.Open();
            SqlCommand cmd = new SqlCommand("editsp", cn);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@EmpId", EmpId);
            cmd.Parameters.AddWithValue("@EmpName", EmpName);
            cmd.Parameters.AddWithValue("@EmpAddress", EmpAddress);

            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);
            cn.Close();
            if (ds.Tables[0].Rows.Count > 0)
            {
                _data = JsonConvert.SerializeObject(ds.Tables[0]);
            }
            return _data;
        }

update store procedure

update (fill the form record(name and address) when pressing the update button )

ALTER PROCEDURE [dbo].[update]
    @EmpId int,
    @EmpName varchar(40),
    @EmpAddress varchar(30)
AS
BEGIN
    update tblEmployee set EmpName=@EmpName,EmpAddress=@EmpAddress where EmpId=@EmpId
END

edit (fillable record update(means name and address change) then pressing the again update button

ALTER PROCEDURE [dbo].[edit]
    @EmpId int,
    @EmpName varchar(30),
    @EmpAddress varchar(20)
AS
BEGIN
    select * from tblEmployee where EmpId=EmpId or EmpName=EmpName or EmpAddress=EmpAddress; 
END

In my code what should be doIng I m wrong??

my record not updated?

- Reply
Yongqing Yu
Contributor

3690 Points

1043 Posts

Re: Issue With Edit Record using Ajax Jquery In Asp.Net?

Jan 29, 2020 03:21 AM|Yongqing Yu|LINK

Hi raju,

According to your code, I found that your table columns do not match the fields in the database. There is a column of EmployeeAge in the table?

Did you fill the wrong position in the getlistdata method?

And I found that when you click the Edit button, you don't need to use ajax to call methods in the code behind.

You just need to get the corresponding data of the current click line and display it in the pop-up box. When you click Update, you can use ajax to call the update operation.

For details, you can refer to the following link:

How to insert,update and Delete data from Html Table using Ajax Jquery in ASP.Net

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
- Reply
raju bhai
Member

15 Points

96 Posts

Re: Issue With Edit Record using Ajax Jquery In Asp.Net?

Jan 29, 2020 03:59 AM|raju bhai|LINK

EmployeeAge I remove this column because I don't need that.

when I click update then data going to form and change the record then update is not work can u tell me my store procedure is not work proper or not, my ajax call is wrong?

Yongqing Yu

Contributor

3690 Points

1043 Posts

Re: Issue With Edit Record using Ajax Jquery In Asp.Net?

Jan 30, 2020 07:57 AM|Yongqing Yu|LINK

Hi raju,

When you click the Edit button, you don't need to use ajax to get data back to the database.

You can directly assign values to the textbox through the edit parameters.

After you click the update button, you need to use ajax to pass the modified parameters to update the database.

I have create a demo based on your needs:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Emploee.aspx.cs" Inherits="WebApplication_webform.Code.Emploee" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="../Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                type: "POST",
                url: "Emploee.aspx/GetCustomers",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    data = JSON.parse(data.d);
                    for (var i = 0; i < data.length; i++) {
                        $("#tbl").append('<tr><td>' + data[i].EmpId + '</td><td>' + data[i].EmpName + '</td> <td>' + data[i].EmpAddress+ '</td><td> <input type="button" id="btnedit" value="Edit" onclick="EditData(' + data[i].EmpId+ ',\'' + data[i].EmpName + '\',\'' + data[i].EmpAddress+ '\')" /></td> </tr> ');
                    }
                },
                Error: function () {
                    alert("get error");
                }
            });

        });

        function EditData(EmpId, EmpName, EmpAddress) {
            $("#txtId").val(EmpId);
            $("#txtName").val(EmpName);
            $("#txtAddress").val(EmpAddress);
        }

        function update() {
            $.ajax({
                url: 'Emploee.aspx/Update',
                type: 'post',
                contentType: 'application/json;charset=utf-8',
                datatype: 'json',
                data: '{empId: ' + $("#txtId").val() + ', empName: "' + $("#txtName").val() + '", empAddress: "' + $("#txtAddress").val() + '" }',
                success: function (data) {
                    location.reload();
                },
                error: function () {
                    alert('Update Error');
                },
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:HiddenField ID="txtId" runat="server" Value="" />
        Name:
        <input id="txtName" type="text" /><br />
        Address:
        <input id="txtAddress" type="text" /><br />
        <input type="button" id="btnsubmit" value="Update" onclick="update()" /><br /><br />

        <table id="tbl" border="1" style="border-collapse: collapse">
            <tr>
                <th>EmpId</th>
                <th>EmpName</th>
                <th>EmpAddress</th>
                <th></th>
            </tr>
        </table>
    </form>
</body>
</html>

[WebMethod]
        public static string GetCustomers()
        {
            string query = "SELECT EmpId, EmpName, EmpAddress FROM Employees";
            SqlCommand cmd = new SqlCommand(query);
            string constr = ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString.ToString();
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataSet ds = new DataSet())
                    {
                        sda.Fill(ds);
                        return JsonConvert.SerializeObject(ds.Tables[0]);
                    }
                }
            }
        }

        [WebMethod]
        public static void Update(int empId, string empName, string empAddress)
        {
            string constr = ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString.ToString();
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("UPDATE Employees SET EmpName= @empName, EmpAddress=@empAddress WHERE EmpId= @empId"))
                {
                    cmd.Parameters.AddWithValue("@empId", empId);
                    cmd.Parameters.AddWithValue("@empName", empName);
                    cmd.Parameters.AddWithValue("@empAddress", empAddress);
                    cmd.Connection = con;
                    con.Open();
                    cmd.ExecuteNonQuery();
                    con.Close();
                }
            }
        }

Here is the result:

Best Regards,

YongQing.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›