title: MVC Partial View Updated Using Jquery & Ajax - Correct Approach?
body: <p>I have an MVC 5 web application and I wish to include a partial view within one of the views which is updated using JQuery and Ajax. I have used a bit of JQuery, Ajax and Partial Views before, but never to do a real time update.</p>
  
  <p>I have checked stackoverflow and whilst I can find a lot of posts on this topic, I am still struggling a bit to understand how it might work. If I show you my intended code below it would be great if someone could advice me if I'm on the correct track.</p>
  
  <p><strong>1</strong> - User hits Index method in Controller which get's user details, puts user data into ViewModel and passes ViewModel to View. </p>
  
  <pre><code>public ActionResult Index(int id)
  {
          DashboardViewModel model = new DashboardViewModel();
  
          User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId()));
          model.SelectedUser = user;
  
          return View(model);
  }
  </code></pre>
  
  <p><strong>2</strong> - View accepts ViewModel, and also contains Partial View which accepts data from the ViewModel. Partial view then displays the users email address.</p>
  
  <p><strong>View</strong></p>
  
  <pre><code>@model STAR.UI.ViewModels.DashboardViewModel
  
  &lt;div class="row"&gt;
      &lt;div class="col-lg-10" id="myPartial"&gt;
          @Html.Partial("_UserEmailPartial", Model.SelectedUser)
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Partial</strong> (_UserEmailPartial)</p>
  
  <pre><code>@model STAR.DomainClasses.User
  
  &lt;h1 class="page-header text-danger"&gt;@Model.email&lt;/h1&gt;
  </code></pre>
  
  <p><strong>3</strong> - View also contains drop down list which user can select other users from. </p>
  
  <pre><code>&lt;select id="UserID" class="form-control"&gt;
     &lt;option&gt;1&lt;/option&gt;
     &lt;option&gt;2&lt;/option&gt;
     &lt;option&gt;3&lt;/option&gt;
     &lt;option&gt;4&lt;/option&gt;
     &lt;option&gt;5&lt;/option&gt;
   &lt;/select&gt;
  </code></pre>
  
  <p>When user selects item from drop down list, a JQuery function which contains an AJAX method calls the Index action in the Controller.</p>
  
  <pre><code>$(document).ready(function () {
  
  $("#UserID").change(ChangeEventOfDDL);
  
  function ChangeEventOfDDL() {
  
      $.ajax({
          type: "GET",
          url: '/Dashboard/Index/',
          data: { id: $(this).val() },
          error: function () {
              alert("An error occurred.");
          },
          success: function (data) {
              $("#myPartial").html(data);
          }
      });
      }
  
  });
  </code></pre>
  
  <p><strong>4</strong> - The Index method accepts the ID from the drop down list, gets the selected users details, populates the ViewModel and passes to the View. </p>
  
  <p>Next is where I'm not sure. I know I need to pass the data into the DIV "myPartial", but how do I only pass in the data, not the entire View?</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks.</p>