title: Show partial view on button click mvc
body: <p>I'm trying to figure out mvc, so I have problem...
  I have this model:</p>
  
  <pre><code>public class Company
      {
          public string ID { get; set; }
          public string Symbol { get; set; }
          public string Description { get; set; }
  }
  </code></pre>
  
  <p>and controller:</p>
  
  <pre><code>public ActionResult EditCompany()
          {
              ViewBag.Message = "Edit Company Page";
              return View();
          }
  
          public ActionResult PartialEditCompany()
          {
              DataSet dataSet = client.SelectCompanies();
              ObservableCollection&lt;Company&gt; inventoryList = new ObservableCollection&lt;Company&gt;();
              foreach (DataRow dataRow in dataSet.Tables[0].Rows)
              {
                  inventoryList.Add(new Company
                  {
                      ID = (String)dataRow["ID"],
                      Symbol = (String)dataRow["Symbol"],
                      Description = (String)dataRow["Description"]
                  });
              }
              return PartialView(inventoryList);
          }
  </code></pre>
  
  <p>and view EditCompany:</p>
  
  <pre><code>@model Test.Models.Company
  
  @{
      ViewBag.Title = "EditCompany";
      }
  
  &lt;link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;link href="~/Content/mycss.css" rel="stylesheet" /&gt;
  
  &lt;script&gt;
  
      $('#loadData').click(function () {
          $('#partial').load('/HomeController/PartialEditCompany/');
      });
  
  &lt;/script&gt;
  
  &lt;div id="stylized2" class="myform"&gt;
      @using (Html.BeginForm("SaveCompany", "Home", FormMethod.Post, new { @class = "insertcompanyform" }))
      {
          @Html.ValidationSummary(true)
          &lt;table&gt;
              &lt;tr&gt;
              &lt;td class="first"&gt;@Html.Label("ID:")
              &lt;/td&gt;
              &lt;td class="second"&gt;@Html.TextBoxFor(m =&gt; m.ID)&lt;/td&gt;
          &lt;/tr&gt;
              &lt;tr&gt;
              &lt;td class="first"&gt;
                  @Html.Label("Symbol:")
              &lt;/td&gt;
              &lt;td class="second"&gt;@Html.TextBoxFor(m =&gt; m.Symbol)&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td class="first"&gt;
                  @Html.Label("Description:")
              &lt;/td&gt;
              &lt;td class="second"&gt;@Html.TextBoxFor(m =&gt; m.Description)&lt;/td&gt;
          &lt;/tr&gt;
  &lt;tr&gt;
                      &lt;td class="third"&gt;&lt;input type="button" value="Traži" id="loadData" /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
      &lt;tr&gt;
                      &lt;td&gt;
                          &lt;div id="partial"&gt;&lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>
  
  <p>and finnaly partialview PartialEditCompany:</p>
  
  <pre><code>@using System.Web.Helpers
  
  @{
      var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
      selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
      grid.Pager(WebGridPagerModes.NextPrevious);
  }
  
  &lt;link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"&gt;
  &lt;script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;link href="~/Content/mycss.css" rel="stylesheet" /&gt;
  
  @Html.WebGrid()
  </code></pre>
  
  <p>What I want to do is on button click (with id=loadData) to call partial view that will put grid into div tag (with id=parital). Please help! What am I doing wrong?</p>