title: using getJSON to display list of customers (name, address) in MVC
body: <p>I'm trying to get list of customers (name and address) when one types the country name in textbox and clicks the button.</p>
  
  <p>Here is the view:</p>
  
  <pre><code>&lt;p&gt;
      Enter country name @Html.TextBox("Country")
      &lt;input type="submit" id="GetCustomers" value="Submit"/&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>Here is the JSON call:</p>
  
  <pre><code>&lt;script type="text/jscript"&gt;
      $('#GetCustomers').click(function () {
  
          //var url = "/Home/CustomerList";
          //var Country = $('#Country').val();
          //$.getJSON(url, { input: Country }, function (data) {
  
          $.getJSON('/Home/CustomerList/' + $('#Country').val(), function (data) {
  
              var items = '&lt;table&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Address&lt;/th&gt;&lt;/tr&gt;';
              $.each(data, function (i, country) {
                  items += "&lt;tr&gt;&lt;td&gt;" + country.ContactName + "&lt;/td&gt;&lt;td&gt;" + country.Address + "&lt;/td&gt;&lt;/tr&gt;";
              });
              items += "&lt;/table&gt;";
  
              $('#rData').html(items);
          });
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the controller:</p>
  
  <pre><code>public JsonResult CustomerList(string Id)
  {
      var result = from r in db.Customers
                      where r.Country == Id
                      select r;
      return Json(result);
  }
  </code></pre>
  
  <p><em><strong>My problems are:</em></strong></p>
  
  <p><strong>i) When I'm using following</strong></p>
  
  <pre><code>var url = "/Home/CustomerList";
  
  var Country = $('#Country').val();
  
  $.getJSON(url, { input: Country }, function (data) {
  </code></pre>
  
  <p>It is not passing prameter to CustomerList method, however following works fine</p>
  
  <pre><code>$.getJSON('/Home/CustomerList/' + $('#Country').val(), function (data) {
  </code></pre>
  
  <p><strong>ii) When I'm using following JSON</strong></p>
  
  <pre><code>$.getJSON('/Home/CustomerList/' + $('#Country').val(), function (data) {
  </code></pre>
  
  <p>and then following CustomerList method</p>
  
  <pre><code>public JsonResult CustomerList(string Id)
  {
      var result = from r in db.Customers
                      where r.Country == Id
                      select r;
      return Json(result);
  }
  </code></pre>
  
  <p>It works fine when I use 'string Id' but when I use 'string country' and then 'where r.Country == country', not works.</p>
  
  <p><strong>iii) Is this correct way to work with response, not working</strong></p>
  
  <pre><code>var items = '&lt;table&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Address&lt;/th&gt;&lt;/tr&gt;';
  $.each(data, function (i, country) {
      items += "&lt;tr&gt;&lt;td&gt;" + country.ContactName + "&lt;/td&gt;&lt;td&gt;" + country.Address + "&lt;/td&gt;&lt;/tr&gt;";
  });
  items += "&lt;/table&gt;";
  
  $('#rData').html(items);
  </code></pre>
  
  <p>Any help appreciated.</p>