使用 jQuery ajax 将数据插入数据库，无需在 ASP.NET C# 中回发答案

【问题标题】：Insert data into database using jQuery ajax without postback in ASP.NET C#使用 jQuery ajax 将数据插入数据库，无需在 ASP.NET C# 中回发
【发布时间】：2021-01-20 22:38:58
【问题描述】：

我正在开发一个需要使用 jQuery ajax 将数据提交到 SQL Server 数据库的项目。我习惯于使用回发提交数据。当我尝试提交时，我不断收到提交错误！在 jQuery 文件中而不是成功的消息和数据没有插入。请问我做错了什么？另外，请在下面找到我的 aspx 页面、jQuery 脚本、asmx 中的类和 webmethod：

我的 ASPX 页面：

<div id="sf6" class="frm" style="display: none;">
    <fieldset>
        <legend>Bank Account Information [Step 6 of 7]</legend>


        <div class="form-group">
            <%--<label class="col-lg-2 control-label" for="uname">Subject 1: </label>--%>
            <div class="col-lg-10">
                <div style="color: #b94a48; font-weight: bold; font-size: 14px; background-color: #f2dede; border: #eed3d7 1px solid; padding: 10px; margin-top: 5px; margin-bottom: 5px;">
                    <p>
                        <b>Important Info:</b>PLEASE SUPPLY YOUR PERSONAL ACTIVE ACCOUNT DETAILS.
                    </p>
                </div>
            </div>

        </div>

        <div class="clearfix" style="height: 10px; clear: both;"></div>
        <div class="clearfix" style="height: 10px; clear: both;"></div>

        <div class="form-group">
            <label class="col-lg-2 control-label" for="uname">Bank: </label>
            <div class="col-lg-6">
                <asp:DropDownList ID="ddlbankname" runat="server" Height="30px" Width="330px">
                    <asp:ListItem>--Select Bank--</asp:ListItem>
                    <asp:ListItem>Access Bank Plc</asp:ListItem>
                    <asp:ListItem>Access (Diamond)Bank Plc</asp:ListItem>
                    <asp:ListItem>CitiBank Nigeria Limited</asp:ListItem>
                    <asp:ListItem>Ecobank Nigeria Plc</asp:ListItem>
                    <asp:ListItem>Enterprise Bank Plc</asp:ListItem>
                    <asp:ListItem>Fidelity Bank Plc</asp:ListItem>
                    <asp:ListItem>First Bank Nigeria Limited</asp:ListItem>
                    <asp:ListItem>First City Monument Bank Plc</asp:ListItem>
                    <asp:ListItem>Globus Bank Limited</asp:ListItem>
                    <asp:ListItem>Guaranty Trust Bank Plc</asp:ListItem>
                    <asp:ListItem>Heritage Banking Company Limited</asp:ListItem>
                    <asp:ListItem>Jaiz Bank Plc</asp:ListItem>
                    <asp:ListItem>Keystone Bank</asp:ListItem>
                    <asp:ListItem>MainStreet Bank</asp:ListItem>
                    <asp:ListItem>Polaris Bank</asp:ListItem>
                    <asp:ListItem>Providus Bank</asp:ListItem>
                    <asp:ListItem>Skye Bank Plc</asp:ListItem>
                    <asp:ListItem>Stanbic IBTC Ltd</asp:ListItem>
                    <asp:ListItem>Standard Chartered Bank Nig Ltd</asp:ListItem>
                    <asp:ListItem>Sterling Bank Plc</asp:ListItem>
                    <asp:ListItem>SunTrust Bank Nigeria Limited</asp:ListItem>
                    <asp:ListItem>Titan Trust Bank Limited</asp:ListItem>
                    <asp:ListItem>Union Bank of Nigeria Plc</asp:ListItem>
                    <asp:ListItem>United Bank For Africa Plc</asp:ListItem>
                    <asp:ListItem>Unity Bank Plc</asp:ListItem>
                    <asp:ListItem>Wema Bank Plc</asp:ListItem>
                    <asp:ListItem>Zenith Bank Plc</asp:ListItem>
                </asp:DropDownList>

            </div>
        </div>

        <div class="clearfix" style="height: 10px; clear: both;"></div>
        <div class="clearfix" style="height: 10px; clear: both;"></div>

        <div class="form-group">
            <label class="col-lg-2 control-label" for="uname">Account No: </label>
            <div class="col-lg-6">
                <asp:TextBox runat="server" type="text" class="form-control" ID="txtaccno" Width="330px" placeholder="*Account Number" value="" MaxLength="10"></asp:TextBox>

            </div>
        </div>

        <div class="clearfix" style="height: 10px; clear: both;"></div>
        <div class="clearfix" style="height: 10px; clear: both;"></div>
        <div class="form-group">
            <label class="col-lg-2 control-label" for="txtsortcode">Sort Code: </label>
            <div class="col-lg-6">
                <asp:TextBox runat="server" type="text" class="form-control" ID="txtsortcode" Width="330px" placeholder="Sort Code(Optional)" value=""></asp:TextBox>

            </div>
        </div>

        <div class="clearfix" style="height: 10px; clear: both;"></div>

        <div class="form-group">
            <div class="col-lg-6">
                <asp:Button ID="btnbankinfo" class="btn-success" runat="server" Text="SAVE" Height="44px" Width="80px" Style="font-weight: bolder" />
                <span class="fa fa-arrow-right"></span>
                <%--<asp:Label ID="lblbankinfo" runat="server" Text="Label"></asp:Label>--%>
                <span id="bnkmsg"></span>

                <div style="color: #b94a48; font-weight: bold; font-size: 14px; background-color: #f2dede; border: #eed3d7 1px solid; padding: 10px; margin-top: 5px; margin-bottom: 5px;">
                    <p>
                        <b>Important Info:</b>Please ensure you SAVE each PAGE before clicking on the NEXT Button!
                    </p>
                </div>

            </div>
        </div>
        <div class="clearfix" style="height: 10px; clear: both;"></div>

        <div class="form-group">
            <div class="col-lg-10">
                <button class="btn btn-warning back6" type="button"><span class="fa fa-arrow-left"></span>Back</button>
                <button class="btn btn-primary open6" type="button" style="font-weight: bolder">Next <span class="fa fa-arrow-right"></span></button>
            </div>
        </div>


    </fieldset>
</div>

我的 JAVASCRIPT 文件：

$(document).ready(function () {
        $("#btnbankinfo").on('click', function (e) {
            e.preventDefault();
            var BankDetails = {};

            BankDetails.Bank = $("#ddlbankname").val();
            BankDetails.AccountNo = $("#txtaccno").val();
            BankDetails.SortCode = $("#txtsortcode").val();
            BankDetails.UserId = $("txtuserid").val();
            BankDetails.Email = $("#txtemail").val();

            var jsonData = JSON.stringify({
                BankDetails: BankDetails
            });

            $.ajax({
                type: "POST",
                url: "CustomWebService.asmx/addBank",
                data: jsonData,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                error: OnErrorCall
            });

            function OnSuccess(response) {
                var result = response.d;
                if (result == "success") {
                    $("#bnkmsg").html("Personal details addded successfully  :)").css("color", "green");
                }
                $("#ddlbankname").val("");
                $("#txtaccno").val("");
                $("#txtsortcode").val("");
                $("#txtuserid").val("");
                $("#txtemail").val("");

            }

            function OnErrorCall(response) {
                $("#bnkmsg").html("An Error has occurred. Please Try Again!").css("color", "red");
            }

        });

});

我的班级档案：

public class BankDetails
{
    public int BankID { get; set; }
    public string Bank { get; set; }
    public string AccountNo { get; set; }
    public string SortCode { get; set; }
    public Guid UserId { get; set; }
    public string Email { get; set; }    
}

我的网络方法：

[WebMethod]
public string addBank(BankDetails BankDetails)
{
    try
    {
        string CS = ConfigurationManager.ConnectionStrings["NNPC-ChevronScholarshipConnectionString"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(CS))  
        //using (SqlConnection conn = new SqlConnection(this.conn.ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "spAddBankDetails";
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Connection = conn;

                cmd.Parameters.AddWithValue("@Bank", BankDetails.Bank);
                cmd.Parameters.AddWithValue("@AccountNo", BankDetails.AccountNo);
                cmd.Parameters.AddWithValue("@SortCode", BankDetails.SortCode);
                cmd.Parameters.AddWithValue("@UserId", BankDetails.UserId);
                cmd.Parameters.AddWithValue("@Email", BankDetails.Email);
                conn.Open();
                cmd.ExecuteNonQuery();
            } conn.Close();
        }
        return "success";
    }
    catch (Exception ac)
    {
        return "Error";
    }
}

【问题讨论】：

错误是什么？
感谢戴尔的提问。它显示的错误消息是在不成功时显示的 JQuery 脚本文件中的错误消息。 function OnErrorCall(response) { $("#bnkmsg").html("发生错误，请重试！").css("color", "red");
response 对象的实际错误是什么？
@Chris Schaller，实际的错误是它返回了我之前发布的 JQuery 文件中的错误消息，而不是插入数据并发布成功消息。

标签： jquery asp.net sql-server ajax c#-4.0

【解决方案1】：

由于您没有将错误与源代码一起发布，因此我只能分析并查看其中一个问题，这将导致您面临的潜在错误，那就是您发送的 json。请注意，您正在构建您的 json 数据，如下所示：

var BankDetails = {};

BankDetails.Bank = $("#ddlbankname").val();
BankDetails.AccountNo = $("#txtaccno").val();
BankDetails.SortCode = $("#txtsortcode").val();
BankDetails.UserId = $("txtuserid").val();
BankDetails.Email = $("#txtemail").val();

var jsonData = JSON.stringify({
    BankDetails: BankDetails
});

这可能会生成此json 作为请求正文：

{
    "BankDetails" : 
    {
        "Bank": "Some Bank",
        "AccountNo": "Some Account #",
        "SortCode": "Sort Code",
        "UserId": "1234",
        "Email": "abc@gmail.com"
    }
}

从技术上讲，这不会映射到您拥有的类结构上。

要解决此问题，您可以有两种解决方案，最简单直接的方法是将 stringify 直接添加到 json 对象，而不是将对象添加到另一个 json 正文中，如下所示：

var BankDetails = {};

BankDetails.Bank = $("#ddlbankname").val();
BankDetails.AccountNo = $("#txtaccno").val();
BankDetails.SortCode = $("#txtsortcode").val();
BankDetails.UserId = $("txtuserid").val();
BankDetails.Email = $("#txtemail").val();

// This line
var jsonData = JSON.stringify(BankDetails);

第二种方法是自定义您的类结构并引入一个父类，该类将在其中保存对象BankDetails，如下所示：

public class BankDetails
{
    public int BankID { get; set; }
    public string Bank { get; set; }
    public string AccountNo { get; set; }
    public string SortCode { get; set; }
    public Guid UserId { get; set; }
    public string Email { get; set; }    
}
public class BankDetailsParent
{
    public BankDetails BankDetails { get; set;}
}

同样，这会修改您拥有的WebMethod 的参数：

[WebMethod]
public string addBank(BankDetailsParent BankDetailsParent)
{
    BankDetails BankDetails = BankDetailsParent.BankDetails; // get the bank details object.
    //  your logic here
    string doStuff = "doStuff";
    return doStuff;
}

更新

$(document).ready(function () {
        $("#btnbankinfo").on('click', function (e) {
            e.preventDefault();
            var BankDetails = {};

            BankDetails.Bank = $("#ddlbankname").val();
            BankDetails.AccountNo = $("#txtaccno").val();
            BankDetails.SortCode = $("#txtsortcode").val();
            BankDetails.UserId = $("txtuserid").val();
            BankDetails.Email = $("#txtemail").val();

            var jsonData = JSON.stringify(BankDetails);

            $.ajax({
                type: "POST",
                url: "CustomWebService.asmx/addBank",
                data: jsonData,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                error: OnErrorCall
            });

            function OnSuccess(response) {
                var result = response.d;
                if (result == "success") {
                    $("#bnkmsg").html("Personal details addded successfully  :)").css("color", "green");
                }
                $("#ddlbankname").val("");
                $("#txtaccno").val("");
                $("#txtsortcode").val("");
                $("#txtuserid").val("");
                $("#txtemail").val("");

            }

            function OnErrorCall(response) {
                $("#bnkmsg").html("An Error has occurred. Please Try Again!").css("color", "red");
                console.log(response); // this will contain the error you are facing.
            }
            /* Add this line here: */
            return false; // this will return false and the postback won't occur.

        });

});

【讨论】：

感谢 Jamshaid 提供答案。我使用了提供的第一个选项。但它会引发回发并且不会引发错误消息，但不会将数据插入数据库并且不会显示成功消息。我相信在使用 ajax 时不应该回发。您提供的第二个选项仍然抛出错误消息(function OnErrorCall(response) { $("#bnkmsg").html("An Error has occurred. Please Try Again!").css("color", "red") ; ) 提交而不是成功消息。请帮忙。
@Midtechltd 我怀疑是因为，你没有在你的函数中返回 false。请在您的方法末尾添加此语句return false; 请参阅我的答案中的更新。
我已经这样做了，但仍然得到相同的回发，没有响应和数据插入。
检查控制台是否有错误。