skip to Main Content

I have a button that executes a delete action to a row in a database. I wrote a javascript function that creates a custom dialog box that allows users to select if they do want to delete the data. However, when I try to execute the private void from code behind inside javascript, it does not run. I have searched through a lot of websites and tried many ways suggested but have not succeed yet. Please help me.

(javascript with asp.net)

    <script language="javascript" type="text/javascript">
        function OnDelete(msg, myYes, myNo) {
            var deleteBox = $("#delete");
            deleteBox.find(".message").text(msg);
            deleteBox.find(".yes, .no").unbind().click(function () {
                deleteBox.hide();
            });
            deleteBox.find(".yes").click(myYes);
            deleteBox.find(".no").click(myNo);
            deleteBox.show();
        }
        function RunDelete() {
            var rvalue = '<%= rvalue.ClientID %>';
            OnDelete("Delete?", function yes() {
                document.getElementById(rvalue).value = "Yes";
            },
                function no() {
                    document.getElementById(rvalue).value = "No";
                });
            document.getElementById('<%=btn_del.ClientID %>').click();
        }
    </script>
    <style>
        #delete {
            display: none;
            background-color: #FFFFFF;
            color: #000000;
            border-radius: 12px;
            border: 2px solid #000000;
            position: fixed;
            width: 225px;
            height: 100px;
            left: 45%;
            top: 40%;
            margin-left: -100px;
            padding: 15px 25px 15px;
            box-sizing: border-box;
            text-align: center;
        }
 
            #delete button {
                background-color: #FFFFFF;
                display: inline-block;
                border-radius: 12px;
                border: 1px solid #000000;
                padding: 5px;
                text-align: center;
                width: 60px;
                cursor: pointer;
            }
 
            #delete .message {
                text-align: left;
            }
        .auto-style58 {
            width: 65px;
            text-align: right;
        }
        .auto-style59 {
            text-align: right;
        }
        .auto-style60 {
            width: 103px;
            text-align: center;
        }
    </style>
    <div id="delete">
        <div class="message"></div>
        <br />
        <button class="yes">Sure</button>
        <button class="no">Not yet</button>
    </div>
    <asp:Button ID="btn_del" runat="server" Font-Bold="True" Text="DELETE" Width="130px" UseSubmitBehavior="false" OnClientClick="return RunDelete();" OnClick="btn_del_Click" />

Code behind (C#)

    protected void btn_del_Click(object sender, EventArgs e)
        {
            DeleteData();
        }

3

Answers


  1. You have a lot of different errors in this code.

    Modal dialog code does not look to me like it’s doing anything useful. Perhaps your deleteBox.find(".yes").click(myYes); is supposed to be deleteBox.find(".yes").addEventListener('click', myYes);. Here is MDN documentation for click and for click event.

    But even if you make your dialog works, it seems that in your current code you have circular calls. btn_del client-side click calls RunDelete(), which in turn clicks btn_del again, which in turn calls RunDelete() again.

    Instead of clicking the button again within the click handler, you have to execute postback, adding button ID as a parameter, so that ASP.NET WebForms code on the server knows which element executed postback:

    __doPostBack('<%=btn_del.ClientID %>','');
    

    So, full RunDelete() function should look like this:

    function RunDelete() {
      // Correct modal dialog code here...
    
      __doPostBack('<%=btn_del.ClientID %>','');
    }
    
    Login or Signup to reply.
  2. Why using asp elements if you use asp elements then directly call from there javascript function. You are calling a javascript function inside cs file. It does not allow you invoke.
    Try this one

    <button ID="btn_del" Font-Bold="True" Text="DELETE" Width="130px" UseSubmitBehavior="false"  OnClick="DeleteData()" />
    

    Try this one it will work.

    Login or Signup to reply.
  3. You can use jQuery.ajax() to call a method in code behind of asp.net webforms.

    Step 1: Define jQuery.ajax() method then put it in your Yes JavaScript function.

    // HiddenFieldValueID value this is the ID that you want to pass the method
    var id = $('#<%=hiddenFieldValueID.ClientID%>').val();
                $.ajax({
                    type: "POST",
                    url: "/WebForm1.aspx/DeleteRowDb",
                    data: JSON.stringify({ "RecordID": id }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response.d);
                    }
                });
    

    Step 2: Define your web method in the code behind you need to import using System.Web.Services name space and put [WebMethod] on the method

    using System.Web.Services;
    
    
        [WebMethod]
    
        public static string DeleteRowDb(string RecordID)
        {
            //You can do SQL command stuff here 
    
            return "RecordID: " + RecordID;
    
        }
    
       
    

    Completed code

    <script language="javascript" type="text/javascript">
    
        function OnDelete(msg, myYes, myNo) {
            var deleteBox = $("#delete");
            deleteBox.find(".message").text(msg);
            deleteBox.find(".yes, .no").unbind().click(function () {
                deleteBox.hide();
            });
            deleteBox.find(".yes").click(myYes);
            deleteBox.find(".no").click(myNo);
            deleteBox.show();
        }
    
    
        function RunDelete() {
         
    
            OnDelete("Delete?", function yes()
            {
    
    
                var id = $('#<%=hiddenFieldValueID.ClientID%>').val();
    
                $.ajax({
                    type: "POST",
                    url: "/WebForm1.aspx/DeleteRowDb",
                    data: JSON.stringify({ "RecordID": id }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response.d);
                    }
                });
                
    
    
            }, function no() { });
    
    
        }
            </script>
    
            <div id="delete">
                <div class="message"></div>
                <br />
                <button class="yes">Sure</button>
                <button class="no">Not yet</button>
            </div>
    
    
            <asp:Button ID="btn_del" runat="server" Font-Bold="True" Text="DELETE" Width="130px" UseSubmitBehavior="false" OnClientClick="return RunDelete();" />
    
    
            <asp:HiddenField ID="hiddenFieldValueID" runat="server" value="1" />
    

    I hope this approach helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search