Click here to Skip to main content
11,480,502 members (41,518 online)
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 215
1 Richard MacCutchan 150
2 CHill60 90
3 CPallini 70
4 Dave Kreskowiak 70
0 Sergey Alexandrovich Kryukov 7,874
1 OriginalGriff 7,556
2 Sascha Lefèvre 3,074
3 Maciej Los 2,491
4 Richard Deeming 2,335


Advertise | Privacy | Mobile
Web01 | 2.8.150520.1 | Last Updated 11 Jan 2013
Copyright © CodeProject, 1999-2015
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