Save (Insert) RadioButton, ListBox, CheckBox and DropDownList values to database using jQuery AJAX in ASP.Net

Last Reply on Oct 26, 2015 06:23 AM By Shashikant

Posted on Oct 26, 2015 05:07 AM

hi to all 

  This is sam.how to save data from html controls(radio button,dropdownlist,listbox,checkbox) to database by using jquery ajax.

 

regards

-----------

sam

Posted on Oct 26, 2015 06:23 AM

Here I have created sample that will full-fill your requirement.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnSave]").bind("click", function () {
                debugger;
                var user = {};
                user.Username = $("[id*=txtUsername]").val();
                user.Password = $("[id*=txtPassword]").val();
                user.Gender = $("[id*=ddlGender]").val();
                user.Member = $("[id*=chkDeclartion]").is(':checked');
                user.Declaration = $("[id*=chkDeclartion]").is(':checked');
                $.ajax({
                    type: "POST",
                    url: "CS.aspx/SaveUser",
                    data: '{user: ' + JSON.stringify(user) + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("User has been added successfully.");
                        window.location.reload();
                    }
                });
                return false;
            });
        });
    </script>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Username:
            </td>
            <td>
                <input id="txtUsername" type="text" value=" " />
            </td>
        </tr>
        <tr>
            <td>
                Password:
            </td>
            <td>
                <input id="txtPassword" type="text" value=" " />
            </td>
        </tr>
        <tr>
            <td>
                Gender:
            </td>
            <td>
                <select name="ddlGender" id="ddlGender">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Member:
            </td>
            <td>
                <input id="rbMember" type="radio" name="rbMember" value="rbMember" /><label for="rbMember">Member</label>
            </td>
        </tr>
        <tr>
            <td>
                Declaration :
            </td>
            <td>
                <input id="chkDeclartion" type="checkbox" name="ctl02" /><label for="ctl02">chkTerms</label>
                I accecpt terms. I accecpt terms.
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <asp:Button ID="btnSave" Text="Save" runat="server" />
            </td>
        </tr>
    </table>
</div>

Code

[WebMethod]
[ScriptMethod]
public static void SaveUser(User user)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO Users VALUES(@Username, @Password,@Gender, @Member,@Declaration)"))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Parameters.AddWithValue("@Username", user.Username);
            cmd.Parameters.AddWithValue("@Password", user.Password);
            cmd.Parameters.AddWithValue("@Gender", user.Gender);
            cmd.Parameters.AddWithValue("@Member", user.Member);
            cmd.Parameters.AddWithValue("@Declaration", user.Declaration);
            cmd.Connection = con;
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}

User Class

public class User
{
    public string Username { get; set; }
    public string Password { get; set; }
    public string Gender { get; set; }
    public bool Member { get; set; }
    public bool Declaration { get; set; }
}

I hope this will help you out.