c# - Ajax load data from multiple JSON sources -

i using asp mvc4 razor2. trying use javascript retrieve json data , select property want display. each thread has it's own json file , displaying 15 threads @ time. can't data @ once, slows down page load time. thinking client side fine since since it's not sensitive data.

here code:

 public static pagedlist<pifdetailsmodel> getpagedthreads(int skip, int take)     {         using (var context = new pifdbdatacontext())         {             // refactor consideration...make pre-compiled query             var threads = context.threads               .orderby(c => c.createddate).skip(skip).take(take).tolist();              var threadscount = threads.count();              var details = new list<pifdetailsmodel>();             foreach (thread thread in threads)             {                 var model = new pifdetailsmodel();                  var games = new list<game>();                 // make ajax instead.                 string text;                 try                 {                     text = utilities.getthreadinfo(thread.thingid)[0].data.children[0].data.selftext_html;                     text = text.replace("\n\n", "<br /><br />").replace("\n", "<br />");                 }                 catch                 {                     // todo handle exceptions better.                     text = "reddit down or busy, cannot retrieve information @ time";                 }                  foreach (threadgame game in thread.threadgames)                 {                     if (games.any(x => x.name == game.game.name))                     {                         games.find(x => x.name == game.game.name).count += 1;                     }                     else                     {                         var simplegame = game.game;                         simplegame.count = 1;                         games.add(simplegame);                     }                 }                  model.games = games;                 model.gamecount = thread.threadgames.count;                 model.threadtitle = thread.title;                 model.username = thread.user.username;                 model.createddate = thread.createddate;                 model.threadid = thread.thingid;                //  model.selftext = new htmlstring(text);                  details.add(model);             }              return new pagedlist<pifdetailsmodel>             {                 entities = details,                 hasnext = skip + 10 < threadscount,                 hasprevious = skip > 0             };         }     }  [outputcache(duration = 60 * 5)]         public static dynamic getthreadinfo(string thingid)         {             string uri = string.format("http://www.reddit.com/{0}/.json", thingid);             var connect = webrequest.create(new uri(uri)) httpwebrequest;              connect.useragent = "r/playitforward site /u/sevenalive";              // actual connection             webresponse response = connect.getresponse();              string resp;             using (var reader = new streamreader(response.getresponsestream()))             {                 resp = reader.readtoend();             }              return new javascriptserializer().deserialize<dynamic>(resp);         } 

index:

@foreach (var item in model) {     <div class="pif">         <div class="left">             <div class="title"><a href="/pif/@item.threadid">@item.threadtitle</a></div>             <div class="description">                 <div class="expandable">                     <p>@item.selftext</p>                 </div>             </div>             <div class="createdtime">                 <strong>@html.timeago(@item.createddate)</strong>             </div>             <div class="createdby">                 @if (item.games.count() == 1)                 {                    @item.games.single().name                 }                 else                 {                     <text>@item.gamecount games</text>                 }                 being given <a href="@string.format("http://reddit.com/u/{0}", item.username)">@item.username</a>             </div>         </div>         <div class="left">             <ul class="games">                       @foreach (var game in item.games)                       {                           <li>                               <a href="@game.storeurl" title="@game.name">@game.name</a> <span style="color:#b5b8be; font-weight:600">@string.format("({0}p)", game.pointworth)</span>                               @if (game.count > 1)                               {                                   <span style="color:#b5b8be; font-weight:600">(@game.count copies)</span>                               }                           </li>                       }                   </ul>         </div>         <div class="clearboth"></div>     </div> } 

i tried doing searching couldn't find examples of looking for. think javascript, jquery, best way go. i'm new @ web development detailed example highly appreciated. entire codebase open source , use help, if want please fork! https://github.com/sevenalive/playitforward

function getselftext(thingid) {     $.getjson("http://www.reddit.com/r/playitforward/comments/" + thingid + "/.json?jsonp=?", { id: thingid }, function (data) {         var temphtml = $('<div/>').html(data[0].data.children[0].data.selftext_html).text();         $("#selftext-" + thingid).html(temphtml);     }) }  <div class="description" id="selftext-@item.threadid">                         <script type="text/javascript">                             $(document).ready(function () { getselftext('@item.threadid'); });                         </script>             </div>