javascriptc#jqueryasp.net

DataSet Value in Jquery C#


I have one page in which, URL contains Querystring Value.

QSecID=164&QTempId=55&QSecName=New%20Temp%20Bt

When the page loads them and tries to get the value it works fine.

$(document).ready(function() {

      function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
      };
      var urlName = getUrlParameter('QSecName');
      alert(urlName);
      getImageData(urlName); //Pass Query String Value to Function
      });   

Now I am passing this value to C#, ASPX.CS page and try to fetch the data based on QSecName. But i got error. Here is my Jquery function.

function getImageData(name) {

  // alert(nextDay);
  $.ajax({

    type: "POST",

    url: "Section.aspx/GetImageData",

    //data: '',
    data: JSON.stringify({
      "dataSecName": name
    }),

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    success: function(data) {
      alert("Success");
      alert(JSON.parse(data.d));

    }

  });
}

My C# Page returns the DataSet in Jquery.

[WebMethod()]
public static string GetImageData(string dataSecName)
//public static string GetRole()
{
  clsSection objSectNew = new clsSection();
  DataSet DS = new DataSet();
  DS = objSectNew.GetImageDataByJQ(dataSecName);
  return JsonConvert.SerializeObject(DS);
}

Edit Code 1 Here is my SQL Statement Which is get executed when i run the page and

DS = objSectNew.GetImageDataByJQ(dataSecName);

this method pass the query string value in to execute the Stored Procedure.

select mhp.ImageName,mhp.HotSpotID,imgdetail.XCordinate,imgdetail.YCordinate
        from tbl_SOAPDetailsInfo e inner join  M_ImageHotSpot mhp on e.ImgHotSpotName=mhp.ImgHotSpotNameByUser 
        inner join M_ImageHotSpotDetail imgdetail on mhp.HotSpotID=imgdetail.HotspotIDFK where e.SOAP_D_Name='New Temp Bt'

I want to use my XCordinate, YCordinate and ImageName to display image using jquery. but Inside the alert BOX

**[object] [object]**

error display. How can i get and assign this value X AND Y value and display in DIV.
Edit Code 2

ImageName               XCordinate  YCordinate
$parent in angularjs.png    1146    590
$parent in angularjs.png    1216    588
$parent in angularjs.png    1188    626
$parent in angularjs.png    1162    582
$parent in angularjs.png    1193    586

The Database Value. JSON FORMAT DATA

{"d":"{\"Table\":[{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1146\",\"YCordinate\":\"590\"},{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1216\",\"YCordinate\":\"588\"},{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1188\",\"YCordinate\":\"626\"},{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1162\",\"YCordinate\":\"582\"},{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1193\",\"YCordinate\":\"586\"}]}"}

Solution

  • Per your question, [object] [object] is not an error. It means you cannot fetch it in a correct manner.

    Though I am not sure what kind of data you are sending from your back-end code in data But you could try following way,

         var data = "{\"Table\":[{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1146\",\"YCordinate\":\"590\"},{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1216\",\"YCordinate\":\"588\"},{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1188\",\"YCordinate\":\"626\"},{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1162\",\"YCordinate\":\"582\"},{\"ImageName\":\"$parent in angularjs.png\",\"ImagePath\":\"~/Administration/imageHotspot/$parent in angularjs.png\",\"HotSpotID\":11,\"XCordinate\":\"1193\",\"YCordinate\":\"586\"}]}"
    
                var obj = JSON.parse(data);
    
                console.log(obj.Table);
                var tableObj = obj.Table
    
                console.log(obj.Table);
    
                var arrayLength = tableObj.length;
    
                for (var i = 0; i < arrayLength; i++) {
                    console.log(tableObj[i].ImageName);
                    console.log(tableObj[i].XCordinate);
                    console.log(tableObj[i].YCordinate);
                    alert(tableObj[i].YCordinate);
                   }
    

    So now if you replace your code with above sample your code should look like below:

     function getImageData(name) {
                // alert(nextDay);
                $.ajax({
                    type: "POST",
                    url: "Section.aspx/GetImageData",
                    data: JSON.stringify({
                        "dataSecName": name
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        var obj = JSON.parse(data);
                        
            console.log(obj.Table);
            var tableObj = obj.Table
    
            console.log(obj.Table);
    
            var arrayLength = tableObj.length;
    
            for (var i = 0; i < arrayLength; i++) {
                console.log(tableObj[i].ImageName);
                console.log(tableObj[i].XCordinate);
                console.log(tableObj[i].YCordinate);
                alert(tableObj[i].YCordinate);
                    }
    
                });
            }
    

    Note: Try to debug in browser console, so you would understand object notation in more detail.

    See the screen shot how would you do that

    enter image description here