title: Passing JSON as a model object from my controller to a strongly typed view
body: <p>I am building an asp.net mvc 4 web application that calls a web service provider then i am displaying the json result that is returned from the web services call using java script. for example on the controller level I have the following action method:-</p>
  
  <pre><code>public ActionResult ListPackages()
          {            using (var client = new WebClient())
              {                try
                  {
                      var query = HttpUtility.ParseQueryString(string.Empty);
                      var url = new UriBuilder("http://localhost:8080/jw/web/json/workflow/package/list");
                      url.Query = query.ToString();
                      string json = client.DownloadString(url.ToString());
                      Thread.Sleep(500);
                      return Content(json, "application/json");
                  }
                  catch (System.Net.WebException) {
  
                     return Content("error", "application/json");
  
                  }           }        }
  </code></pre>
  
  <p>Then i am using a java script to display the JSON on the view:-</p>
  
  <pre><code>function getpackagelist(result) {
          $('#products').empty();
          $('#title').text("All Processes");
          $.each(result.data, function (key, val) {
              var str = val.packageName;
              $('&lt;li/&gt;', { text: str })
                  .appendTo($('#products'));
          });
          $('#tobehide').hide();
  </code></pre>
  
  <p>and finally on the view i have the following code which calls the above action method and the java script:-</p>
  
  <pre><code>@{
      ViewBag.Title = "Home Page";
  }
  @Ajax.ActionLink("Get Process List", "ListPackages", "Home",
  new AjaxOptions
      {    HttpMethod = "GET",
          LoadingElementId = "tobehide",
          OnBegin = "clear",
  
          OnFailure = "clear",
          OnSuccess = "getpackagelist"
      })
  &lt;div id= "geturl" data-url="@Url.Action("ListPackages", "Home")"&gt;
      &lt;img class="hide" id="tobehide" src="~/Content/ajax-loading2.gif" /&gt;
  &lt;h1 id ="title"&gt;&lt;/h1&gt;
  
  &lt;ul id="products"&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above is working well, but i find it difficult to do the whole staff using javascript, so i am thinking of passing the JSON as a model to a strongly-typed view instead of using java script, but i have the following questions:-</p>
  
  <ol>
  <li><p>what are the pros and cons of these two approaches (using javaScript versus passing the JSON to a strongly-typed view).</p></li>
  <li><p>how I can pass the JSON as a model to my strongly-typed view.</p></li>
  <li><p>which approach i should follow ??</p></li>
  </ol>
  
  <p>Thanks in advance for any help.</p>
  
  <p>Best Regards</p>