Power Of JSON/jQuery

This article shows you the power of jQuery. As you all know,  jQuery increases the developer's productivity by simplifying the DOM manipulation. DOM defines a standard to access the document. The DOM of the page acts as an interface between the document and the JavaScript. The main advantage of the jQuery is that it is easy to use, and developers can use various types of selectors like ID and class to perform different functions. Let's look at the power of jQuery by using jQuery selector to send all data fields by using two lines of code.

First start from the database structure. Let us make one employee table,

CREATE TABLE [dbo].[Employee_Personal](
[EP_id] [int] IDENTITY(1,1) NOT NULL,
[F_name] [nvarchar](100) NOT NULL,
[M_name] [nvarchar](100) NOT NULL,
[L_name] [nvarchar](100) NOT NULL,
[Age] [int] NOT NULL,
[Email_id] [nvarchar](max) NULL,

 CONSTRAINT [PK_Employee_Personal] PRIMARY KEY CLUSTERED
(
   [EP_id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

After this, we design our HTML Page. Keep in mind the ID of the textbox is the same as the database field. 

<table style="width: 70%">
    <tr>
        <td>
            <span class="formtxt2">First Name</span><span style="color: Red">*</span>
        </td>
        <td>
            <input type="text" class="form-control mndtry" id="F_name" maxlength="50" />
        </td>
        <td>
            <span class="formtxt2">Middle Name</span><span style="color: Red">*</span>
        </td>
        <td>
            <input type="text" class="form-control mndtry" id="M_name" maxlength="50" />
        </td>
        <td>
            <span class="formtxt2">Last Name</span><span style="color: Red">*</span>
        </td>
        <td>
            <input type="text" class="form-control mndtry" id="L_name" maxlength="50" />
        </td>
    </tr>
    <tr>
        <td>
            <span class="formtxt2">Age</span><span style="color: Red">*</span>
        </td>
        <td>
            <input type="text" class="form-control mndtry" id="Age" maxlength="50" />
        </td>
        <td>
            <span class="formtxt2">Email</span><span style="color: Red">*</span>
        </td>
        <td>
            <input type="text" class="form-control mndtry" id="Email_id" maxlength="50" />
        </td>
    </tr>
    <tr>
    </tr>
    <tr>
        <td>
            <span id="btnsave" class="submit" runat="server" clientidmode="Static" title="Save">Save</span>
            <span id="btnupd" runat="server" class="submit" clientidmode="Static" title="Save">Update</span>
            <span id="btnclear" class="submit" runat="server" clientidmode="Static" title="Reset">Reset</span>
        </td>
    </tr>
</table>

 

We set up the page, and now we have to get the values of all the text fields using AJAX.

 

In the Insertion method, an object is declared. The object is another data type which is stored in a series of name-value pairs. So here we hold all the input fields and their value in this object. On each of the text fields, we assign a common class form-control. What this class selector does is, it iterates all the text fields having this class name and sets the field ID into the object key and the value into object value.

$(document).ready(function() {
    $("#<%=btnsave.ClientID%>").click(function() {
        insertion();
    });
    $("#<%=btnclear.ClientID%>").click(function() {
        clear();
    });

    function clear() {
        $('.form-control').val('');
    }

    function insertion() {
        var obj = {};
        $('.form-control').each(function() {
            var id = $(this).attr('id');
            obj[id] = $('#' + id).val();
        });
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "employee.aspx/insertion",
            data: JSON.stringify({
                param: obj
            }),
            dataType: "json",
            success: function(response) {
                if (response.d === "1") {
                    alert("Saved Successfully !!!");
                    clear();
                } else if (response.d === "0") {
                    alert(response.d);
                }
            },
            error: function(response) {
                //
            }
        });
    }
});

Now, this object holds all the page data fields and their values into key-value pairs. See how easy it is now to get all the text fields and their values into an object by using these 2 lines of code only. You can see the power of jQuery -- we don't need to declare each variable again and again. Just iterate the whole page using each loop on the class name only.

 

Now, the next step is to insert this data into the database. For this, we make an AJAX call and send the data by converting the JavaScript object to JSON object using JSON.stringify method. For more information regarding AJAX calls refer to this article:

• CRUD Operations Using AJAX/JSON

Web Method For Insertion

[System.Web.Services.WebMethod(EnableSession = true), ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string insertion(Dictionary < string, string > param) {
    SqlConnection con = null;
    string key = "", value = "";
    con = (SqlConnection) HttpContext.Current.Session["conn"];
    con.Open();
    try {
        foreach(KeyValuePair < string, string > kv in param) {
            key += kv.Key + ",";
            value += "\'" + (kv.Value).Split('-')[0] + "\',";
        }
        key = key.Substring(0, key.Length - 1); // Remove The Last Comma from the key string
        value = value.Substring(0, value.Length - 1); // Remove The Last Comma from the value string
        using(SqlCommand cmd = new SqlCommand()) {
            cmd.CommandText = "insert into employee(" + key + ") values(" + value + ")";
            cmd.Connection = con;
            cmd.Transaction = transact;
            cmd.ExecuteNonQuery();
        }
        con.Close();
    } catch (Exception ex) {
        throw ex;
    } finally {
        con.Close();
    }
    return "1";
}

We see how we get all the fields and their value into an object and send it to web method which receives this parameter in a dictionary type. As the name suggests, a dictionary is a collection of words and their definition. Similarly, in  C# a dictionary is a collection of keys and values where a key is like a word and value is like a definition.

Earlier, I suggested that the ID of the field is the same as of the database column -- here is the trick. This dictionary holds the key of textbox ID now, when it iterates my dictionary using foreach loop and cements the key into a string key, it returns the database column separated by commas, which I pass into the query similarly with the fields value, then cement the key values into a string value, and pass this string into the query.

Now, if you have a bunch of columns, just iterate the foreach loop and your query is ready --  no need to pass the column names into the query and then pass their values. Just write two lines of code to get a column in jQuery, and then write two lines of code to run SQL query, and insert all the data of the page into the database  without postback.

 

Readers, jQuery is just like a game -- now it's up to you how you play with it. Keep playing and keep sharing.