Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » Howto » Downloads
 
Add your own
alternative version
Go to top

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.
SavingDataWithjQueryAjaxAndJSON_Article.zip
SavingDataWithjQueryAjaxAndJSON_Source.zip
CodeProjects
Properties
bin
CodeProjects.dll
Newtonsoft.Json.dll
App_Data
SavingDataWithjQueryAjaxAndJSON.csproj.user
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataForm.aspx.cs" Inherits="CodeProjects._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<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) {

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

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


                }


            });



        });
    
    
    
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <div id="divMsg">
            
        
        </div>
        <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>
    
    </div>
    </form>
</body>
</html>

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.

License

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

Share

About the Author

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 27 Oct 2009
Article Copyright 2009 by Steve S. Yang
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid