在 aspx 網絡表單中從 javascript function 執行 C# void

Question

我有一個對數據庫中的行執行刪除操作的按鈕。 我寫了一個 javascript function ，它創建了一個自定義對話框，允許用戶 select 如果他們確實想刪除數據。 但是，當我嘗試從 javascript 內部的代碼執行私有 void 時，它不會運行。 我搜索了很多網站並嘗試了很多建議的方法，但還沒有成功。 請幫我。

（帶有 asp.net 的 JavaScript）

    <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" />

代碼背后 (C#)

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

Answer 1

這段代碼中有很多不同的錯誤。

模態對話框代碼在我看來並不像它在做任何有用的事情。 也許你的deleteBox.find(".yes").click(myYes); 應該是deleteBox.find(".yes").addEventListener('click', myYes); . 這是關於click和click event的 MDN 文檔。

但是，即使您使對話框正常工作，在您當前的代碼中似乎也有循環調用。 btn_del客戶端單擊調用RunDelete() ，后者又再次單擊btn_del ，而后者又再次調用RunDelete() 。

您不必在單擊處理程序中再次單擊按鈕，而是必須執行回發，將按鈕 ID 添加為參數，以便服務器上的 ASP.NET WebForms 代碼知道哪個元素執行了回發：

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

因此，完整RunDelete() function 應該如下所示：

function RunDelete() {
  // Correct modal dialog code here...

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

Answer 2

為什么要使用 asp 元素，如果你使用 asp 元素然后直接從那里調用 javascript function。 您在 cs 文件中調用 javascript function 。 它不允許您調用。 試試這個

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

試試這個，它會起作用的。

Answer 3

您可以使用jQuery.ajax()在 asp.net 網絡表單的代碼后面調用方法。

第 1 步：定義jQuery.ajax()方法，然后將其放入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);
                }
            });

第 2 步：在您需要using System.Web.Services名稱空間導入的代碼中定義您的 web 方法，並將[WebMethod]放在方法上

using System.Web.Services;


    [WebMethod]

    public static string DeleteRowDb(string RecordID)
    {
        //You can do SQL command stuff here 

        return "RecordID: " + RecordID;

    }

   

完成的代碼

<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" />

我希望這種方法對您有所幫助。