Retrieval Of The Record Into An Array Using AJAX

This tip is deal with the retrieval of the data from the database by using the AJAX in a web method in an array.

Generally while retrieving the data from the database through the SQL query most of the times the database operations are time taken so the loading of the data takes slower. To reduce the time we can use the AJAX which will do that in a short period of time. And it will be admirable by the CLIENT and the END USERS.

Here is one simple example how to use the simple array in AJAX.

The form structure is as follows:

        
            
            
            
            
            
            
            
            
            
            
        
        
            
            
            
            
            
            
            
            
            
            
        
        
        
            

                Change Image

            
        
        
            
            
            

            
        
    

The WebMethod is given as follows:

[WebMethod]
       public static string[] editItems(string tableName, string productId)
       {

           SqlConnection myConnection = null;
           string[] myarray = null;
           DataSet ds = new DataSet();

           try
           {
               //Database connection is set here.
               myConnection = new SqlConnection(System.Configuration.ConfigurationManager.AppSettings["conn"]);
               myConnection.Open();
               string query = @"select productName,
                                       description,
                                       listPrice,
                                       discount,
                                       quantity,
                                       color,
                                       rating,
                                       OS,
                                       manufacturingdate,
                                       itemSold,
                                       pic
                                       from
                                       " + tableName
                                          + " where productId = '" +
                                          productId + "'";
               SqlDataAdapter adp = new SqlDataAdapter(query, myConnection);

               adp.Fill(ds);
               myarray = new string[11];

               //Assigning the values into the array.

               myarray[0] = ds.Tables[0].Rows[0]["productName"].ToString();
               myarray[1] = ds.Tables[0].Rows[0]["description"].ToString();
               myarray[2] = ds.Tables[0].Rows[0]["listPrice"].ToString();
               myarray[3] = ds.Tables[0].Rows[0]["discount"].ToString();
               myarray[4] = ds.Tables[0].Rows[0]["quantity"].ToString();
               myarray[5] = ds.Tables[0].Rows[0]["color"].ToString();
               myarray[6] = ds.Tables[0].Rows[0]["rating"].ToString();
               myarray[7] = ds.Tables[0].Rows[0]["OS"].ToString();
               myarray[8] = ds.Tables[0].Rows[0]["manufacturingdate"].ToString();
               myarray[9] = ds.Tables[0].Rows[0]["itemSold"].ToString();
               myarray[10] = ds.Tables[0].Rows[0]["pic"].ToString();

           }
           catch (Exception)
           {
               return null;
           }

           Finally
           {
                 MyConnection.Close();                  //closing the connection.
           }

           return myarray;
       }

The Ajax function is as follows:

function editItems() {

            var id = $("input[id*='hfProductId']").val();    //Assigning the hiddenfield value to the ID.
 
            $.ajax({
                type: "post",
                url: "HomePage.aspx/editItems",
                contentType: "application/json; charset=utf-8",
      data: "{tableName: 'productDetails' , productId: '" + id + "'}",    //Parameters are passed to the WebMethod.
                dataType: "json",
                beforeSend: function () {
                    $("[id$= 'spnReturnVal']").html(""); //Processing image.

                },
                success: function (msg) {

                    $("[id$='EditDiv']").css("display", 'block');         //Applying the css property to the div.
 
                    $("[id$='hiddenDiv']").css("display", 'inline');    //Hiding the div using the css property.
                   
                    $("[id$='upldImage']").css("display", 'none');
                    if (msg.d != null) {
 
                        //Assigning the data according to the control IDs.
 
                        $("[id$='txtProductName']").val(msg.d[0]);
                        $("[id$='txtProductdesc']").val(msg.d[1]);
                        $("[id$='txtPrice']").val(msg.d[2]);
                        $("[id$='txtDiscount']").val(msg.d[3]);
                        $("[id$='txtQuantity']").val(msg.d[4]);
                        $("[id$='txtColor']").val(msg.d[5]);
                        $("[id$='txtRating']").val(msg.d[6]);
                        $("[id$='txtOS']").val(msg.d[7]);
                        $("[id$='txtMFGDate']").val(msg.d[8]);
                        $("[id$='txtItemSold']").val(msg.d[9]);
                        $("[id$='image']").attr('src', msg.d[10]);
                        
                    }
                    
                    else {
                        alert("Null Value");
                    }
                    alert("Now You  Can Change The ItemProoerties...");
                },
 
                //Error Block.
                error: function (msg) {
                    alert("Sorry for the inconvinience. Please try again.");
                }                
            });
             return false;
         }

This above function returns the record from the database using the AJAX and fills it into the form. One can use this function for pre-population of the data from the database into a form.