title: MVC5 Razor pass parameter to partial view for modal dialog display
body: <p>When a user is in a Create view I have a requirement to show them some previous data recorded for comparison. The ID of the previous data is being passed into the view with ViewBag. I need to have either a button or an ActionLink which the user can click to open a modal dialog which will display the previous data. I've set up a partial view which accepts an int ID and returns a model, but I haven't been able to pass the ID successfully, at most getting the dialog to open with the fields from the model but without the data, other attempts not even getting the modal to open. What is the best way to get a details view within a modal dialog using a parameter stored in ViewBag.PrimaryGradingID?</p>
  
  <p>In Controller:</p>
  
  <pre><code>public ActionResult Details(int id)
  {
     Grading grading = db.Gradings.Find(id);
     if (grading == null)
     {
        return HttpNotFound();
     }
     return PartialView(grading);
  }
  </code></pre>
  
  <p>Details partial view:</p>
  
  <pre><code>@model Models.Grading
  @{
      Layout = null;
  }
  
  &lt;div class="primary" title="Primary Grading"&gt;
      &lt;dl class="dl-horizontal"&gt;
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.L_COL_Available)
          &lt;/dt&gt;
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.L_COL_Available)
          &lt;/dd&gt;
          ...
      &lt;/dl&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
  #primary { display: none; }
  *&lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          dialog = $("#primary").dialog({
              autoOpen: false,
              height: 400,
              width: 400,
              resizable: false,
              modal: true,
              buttons: {
                  Cancel: function () {
                      dialog.dialog("close");
                  }
              },
              close: function () {
              }
          });
      });
      $('#detailsButton').button().on("click", function (event) {
          dialog.dialog("open");
      });
  &lt;/script&gt;*
  </code></pre>
  
  <p>Within parent view:</p>
  
  <pre><code>&lt;input type="button" class="btn btn-primary" id="detailsButton" value="View primary grading data" /&gt; 
  </code></pre>