Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET Javascript SQL Ajax , +
I am working on a project and am struggling after a lot of googling to find the best way to do this without using third party libraries. I would love some advise on this as its critical do getting my program correct.
 
My program is a C# webforms application with a Html/javascript front end. The C# side runs Sql queries on a Sql compact database and is meant send the data over to the javascript to be taken a part and loaded 1 row at a time.
 
I have a table of shops which has ID, Name,Address and Category fields.
            DataSet ds = new DataSet();
            adapter.Fill(ds);
 
            List<Shop> shops = new List<Shop>();
 
            foreach (DataRow row in ds.Tables[0].Rows)
            {
 
                string ID = row["ShopID"].ToString();
                string Name = row["ShopName"].ToString();
                string Address = row["ShopAddress"].ToString();
                string Category = row["Category"].ToString();
 
                shops.Add(new Shop(ID, Name, Address, Category));
 
            }
 
    JavaScriptSerializer ser = new JavaScriptSerializer();
    hfData.Value = ser.Serialize(shops);
 
This part seems to work perfectly, the data is loaded correctly and put into a hiddenfield called hfData.
 
While on the front end I have this line which is supposed to read the hiddenfield
 
  var HiddenValue = document.getElementById("<%=hfData.Value%>").value;
alert(HiddenValue);

 
The HiddenValue alert comes back in this format.
"[{"ShopID":"1","ShopName":"PubName1","ShopAddress":"1 Example street, exampleTown, postcode","ShopCategory":"English"},{"ShopID":"2","ShopName":"PubName2","ShopAddress":"2 Example street, exampleTown, postcode","ShopCategory":"Irish"}]"
 
How do I then take that data and formatted so I can output the ShopName etc for the first shop separately so it can be displayed. The format seems to group a row in {} and the "FieldName" : "Data" although I don't have the experience to manipulate this so need advise.
 
The Text is meant to be converted to variables inside a for loop and displayed in a readable format. The address is meant to be separate string so I can send it to the google maps API to be displayed so its important to split them up
 
Assuming this is the best way I can pass data across, if there is a better way please tell me, although I would like to know the solution for this problem as well so It doesn't occur again
Posted 10-Jan-13 17:30pm
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

you can use the eval method to get the data in form of an object.
 
do it like this:
 
var myObject = eval('(' + document.getElementById("<%=hfData.Value%>").value + ')');
 
alert(myObject.ShopID);
alert(myObject.PubName1);
 
Similarly you can use all the properties of the javascript object which you have retrieved as JSON.
 
P.S. I suggest you read javascript eval documentation to get the complete understanding of it.
  Permalink  
Comments
Phoenix234 at 11-Jan-13 21:47pm
   
this was great to get the data out of the hiddenfield, I've added a loop to go through it but how do I now generate lines of html? like I want the output to be wrapped in a div for every row that comes out s
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

 $(document).ready(function () {
            var data = [{"ShopID":"1","ShopName":"PubName1","ShopAddress":"1 Example street, exampleTown, postcode","ShopCategory":"English"},{"ShopID":"2","ShopName":"PubName2","ShopAddress":"2 Example street, exampleTown, postcode","ShopCategory":"Irish"}];
 
            $.each(data, function (i, item) {
                document.write(item.ShopID + ", " + item.ShopName + ", " + item.ShopAddress + ", " + item.ShopCategory);
            });
});
 
As per your requirements,
you can replace document.write statement and store values in a array variable and then can be sent to GoogleMaps API
 

Note: This Code uses $.each() requires Jquery Library to be included in JS
 

Quote:
"[{"ShopID":"1","ShopName":"PubName1","ShopAddress":"1 Example street, exampleTown, postcode","ShopCategory":"English"},{"ShopID":"2","ShopName":"PubName2","ShopAddress":"2 Example street, exampleTown, postcode","ShopCategory":"Irish"}]"

this string is in JSON Format --> Key: Value, hence using jQuery is one of the easiest Method to Manipulate it.
  Permalink  
Comments
Phoenix234 at 11-Jan-13 12:28pm
   
I love your design although I have a few issues I need help on. I combined your code with the code of the solution above. I use the
 
var data = eval('(' + document.getElementById("<%=hfData.ClientID%>").value + ')');
 
and then the each from yours but it remakes the data on a blank page when its meant to be inside a list on my main page. I tried to use this code but it only makes the last row of the dataset put in instead of adding a new one.
 
var newcontent = document.createElement('li');
newcontent.appendChild(document.createTextNode(item.ShopName + "</br> " + item.ShopAddress + " </br></br>" + item.ShopCategory + "</br> Rating: 3 Stars </br></br>"));

 
Help?
ramukhsakarp at 14-Jan-13 23:13pm
   
var newcontent = document.createElement('li');
$.each(data, function (i, item) {
newcontent.appendChild(document.createTextNode(item.ShopName));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createTextNode(item.ShopAddress+" "));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createTextNode(item.ShopCategory));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createTextNode(" Rating: 3 Stars"));
newcontent.appendChild(document.createElement('br'));
newcontent.appendChild(document.createElement('br'));
});
then to display the result, create/use any div in your main page, like document.getElementById("anyDiv").appendChild(newcontent);
 
hope this works!!!
Phoenix234 at 15-Jan-13 10:09am
   
Thank you very much! everything works perfectly now :)
 
Accepted
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

  Permalink  

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

  Print Answers RSS
0 OriginalGriff 274
1 Sergey Alexandrovich Kryukov 255
2 Shweta N Mishra 216
3 PIEBALDconsult 200
4 BillWoodruff 174
0 OriginalGriff 7,630
1 Sergey Alexandrovich Kryukov 7,022
2 DamithSL 5,586
3 Manas Bhardwaj 4,946
4 Maciej Los 4,525


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 11 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100