Данные загрузки Ajax из нескольких источников JSON

Question

Я использую ASP MVC4 с Razor2. Я пытаюсь использовать Javascript для извлечения данных JSON и выбора того, какое свойство я хочу отобразить. Каждый поток имеет собственный JSON-файл, и я показываю 15 потоков за раз. Я не могу получить данные сразу, это замедляет время загрузки страницы. Поэтому я думаю, что клиентская сторона будет прекрасна, так как это не конфиденциальные данные.

Вот мой код:

public static PagedList<PiFDetailsModel> GetPagedThreads(int skip, int take) 
    { 
     using (var context = new PiFDbDataContext()) 
     { 
      // refactor consideration...make this a 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 this 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 is currently down or too busy, cannot retrieve information at this 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)) as HttpWebRequest; 

      connect.UserAgent = "r/playitforward site by /u/sevenalive"; 

      // Do the actual connection 
      WebResponse response = connect.GetResponse(); 

      string resp; 
      using (var reader = new StreamReader(response.GetResponseStream())) 
      { 
       resp = reader.ReadToEnd(); 
      } 

      return new JavaScriptSerializer().Deserialize<dynamic>(resp); 
     } 

индекс:

@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 by <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> 
} 

Я пытался делать некоторые поиски, но я не мог найти ни одного примера того, что я искал. Я думаю, что javascript, вероятно, JQuery, будет лучшим способом. Я новичок в веб-разработке, поэтому подробный пример будет высоко оценен. Вся база кода является открытым исходным кодом, и я мог бы использовать эту помощь, поэтому, если вы хотите, пожалуйста, вилку! https://github.com/sevenalive/PlayItForward

Answer 1

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>