使用jQuery ajax将数据插入数据库而无需在ASP.NET C＃中进行回发

问题描述

我正在一个需要使用jQuery ajax将数据提交到SQL Server数据库的项目。我习惯于使用回发来提交数据。尝试提交时，提交过程中总是出现错误！在jQuery文件中，而不是成功的消息中，不会插入数据。请问我做错了什么？另外，请在我的aspx页面，jQuery脚本，asmx中的类和web方法下面找到：

我的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; }    
}

我的WEBFETHOD：

[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";
    }
}

解决方法

由于您没有将错误与源代码一起发布，因此我只能分析并查看其中的一个问题，该问题将导致您面临潜在的错误，即正在发送的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.

        });

});

asp.net c#-4.0 sql-server

使用jQuery ajax将数据插入数据库而无需在ASP.NET C＃中进行回发

问题描述

解决方法

相关问答