Click here to Skip to main content
13,143,985 members (35,411 online)
Click here to Skip to main content
Articles » Web Development » ASP.NET » Howto » Downloads


67 bookmarked
Posted 27 Oct 2009

Saving ASP.NET Form Data with jQuery AJAX and JSON Parser

, 27 Oct 2009
Using jQuery AJAX and the JSON.Net parser to process ASP.NET webform data and avoid page post back.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataForm.aspx.cs" Inherits="CodeProjects._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >
<head runat="server">
    <title>Sample - Saving form data with JQuery AJAX and JSON Parser </title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            var item = $("[id$='txtItemName']");
            var category = $("[id$='ddlCategories']");
            var record = $("[id$='txtRecordID']");

            $("#btnSave").click(function() {

                if (item.val().length == 0) {
                    alert("Please enter item name first.");
                    return false;

                if (category.val().length == 0) {
                    alert("Please select a category.");
                    return false;


                var json = "{'ItemName':'" + escape(item.val()) + "','CategoryID':'" + category.val() + "','RecordID':'" + record.val() + "'}";
                var ajaxPage = "DataProcessor.aspx?Save=1"; //this page is where data is to be retrieved and processed
                var options = {
                    type: "POST",
                    url: ajaxPage, 
                    data: json,
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    async: false,
                    success: function(response) {
                        //alert("success: " + response);
                    error: function(msg) { alert("failed: " + msg); }

                //execute the ajax call and get a response
                var returnText = $.ajax(options).responseText;
                if (returnText == 1) {

                    $("#divMsg").html("<font color=blue>Record saved successfully.</font>");

                else {
                    $("#divMsg").html("<font color=red>Record not saved successfully.</font>");



    <form id="form1" runat="server">
        <div id="divMsg">
        <b>Item Name:</b><br />
        <asp:TextBox ID="txtItemName" runat="server" Width="200"></asp:TextBox><br />
        <b>Category:</b><br /><asp:DropDownList ID="ddlCategories" runat="server" Height="25px" Width="200px">
            <asp:ListItem Text="[Select a category]" Value=""></asp:ListItem>
            <asp:ListItem Text="Success Category" Value="1"></asp:ListItem>
            <asp:ListItem Text="Fail Category" Value="-1"></asp:ListItem>
        </asp:DropDownList><br />
        <b>Record ID:</b><br /><asp:Label ID="txtRecordID" runat="server" Text="0"></asp:Label>
        <hr />
        <button id="btnSave" type="button">Save Data</button>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Steve S. Yang
Web Developer Bisk Education, Inc
United States United States
No Biography provided

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170915.1 | Last Updated 27 Oct 2009
Article Copyright 2009 by Steve S. Yang
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid