locked
Getting JSON as html in index.html page RRS feed

  • Question

  • User1519602350 posted

    I  have two pages on my site 1) Index.html 2)Loadpage.cshtml (i pasted all my code below). I would like to get data from Loadpage.cshtml and the same should be append into "displaycontent" as HTML. Kindly help me with the jquery code. I am struggling for some time, please.

    Index.html

    <!doctype html>
    <html>
    <head>
      <title>Hairy Hippo</title>
      <meta charset="utf-8">
     
     
        <script>
       
     
     
            </script>
     
    </head> 
    <body>
     
      <div data-role="page" id="home">
     
        <div data-role="header">
          <h1>Header</h1>
        </div>
     
        <div data-role="content" id="displaycontent">	
        </div>
     
      </div>
     
    </body>
    </html>
    


    Loadpage.cshtml

    @{
        
        var catIDS = Request.QueryString["catID"].IsInt() ? Request.QueryString["catID"].AsInt() : 0;
        Layout = null;
        var Skip = Request.QueryString["Skip"].IsInt() ? Request.QueryString["Skip"].AsInt() : 1;
        var Take = Request.QueryString["Take"].IsInt() ? Request.QueryString["Take"].AsInt() : 2;
        var db = Database.Open("vvs");
        var rows = db.Query(@"SELECT postingID, title, shortdescription, SUBSTRING(description, 1, 100) as description FROM Posting " +
                    "LEFT OUTER JOIN Categories ON Posting.category = Categories.categoryID " +
                    "WHERE Categories.categoryID = 1 ORDER BY Posting.postingID DESC OFFSET @1 ROWS FETCH NEXT @2 ROWS ONLY;",catIDS, Skip, Take);
     
     
                        var data = "";
                        foreach(var row in rows){
                
                         data +=
                            
                            "<li style='padding-left:2%;'><a href=PostingDetails.cshtml/" +row.postingID + ">"+
                            "<div style=color:#333;>" + @Posting.ShowTotalCounts(row.postingID.ToString()) + "</div></a>"+
                            "</li>"+
     
                        "</div>";
                            }
                        
                        Response.ContentType = "application/json";
                        Json.Write(data, Response.Output);
                    }
     
    

    Thursday, April 25, 2013 11:17 AM

All replies

  • User1336021323 posted

    Hi,

    I will suggest you to use Iframe instead of jquery code, This is because the jquery will return only the rendered html/json/xml not the code which have mentioned. Use iframe in your code and load the page "Loadpage" in iframe inside the div "displaycontent".

    Thanks

    Ritesh

    Friday, July 4, 2014 2:23 AM
  • User-1416423428 posted

    You don't need iframe. And why are you using JSON? 

    All you need to do is add this to your Index.html page. 

    <script>
      $('#displaycontent').load('/Loadpage.cshtml');
    </script>

    note: this will not append to displaycontent, but will replace the contents of #displaycontent in Index.html

    Remove response.contentype ="application/json" from your loadpage.cshtml. Just output plain html, which will go into #displaycontent. 

    Friday, July 4, 2014 3:06 AM
  • User2129316869 posted

    I  have two pages on my site 1) Index.html 2)Loadpage.cshtml (i pasted all my code below). I would like to get data from Loadpage.cshtml and the same should be append into "displaycontent" as HTML. Kindly help me with the jquery code. I am struggling for some time, please.

    Good Day Sir/Ma

    You will be using the .getJson() Method in Jquery just below the Index page and don't forget to attach Jquery in the <head> of your index.

    <script>
    $.getJSON('/Loadpage', function(data) { $('#displaycontent').prepend(data); });
    </script>

    Hope it helps.

    Monday, July 7, 2014 5:01 AM