title: Dynamic Add Delete of Partial View with Dropdownlist MVC
body: <p>Hi All I'm trying to create a view with Add and Delete buttons for rows in which a row is a partial view. Here's what I have so far.</p>
  
  <p>Main View</p>
  
  <pre><code>&lt;fieldset&gt;
      &lt;legend&gt;Add Associated Assessments&lt;/legend&gt;
      &lt;div id="divPartial"&gt;&lt;/div&gt;
      &lt;input type="button" id="addassessment" name="addassessment" value="Add Assessment" /&gt;
      &lt;br /&gt;
  
      @section Scripts
      {
          &lt;script type="text/javascript"&gt;
              $('#addassessment').on('click', function () {
                  $.ajax({
                      async: false,
                      url: '/PositionAssessments/AddNewAssessment'
                  }).success(function (partialView) {
                      $('#divPartial').append(partialView);
                  });
              });
  
              $("#deleteRow").on("click", function () {
                  $(this).parents("#assessmentRow:first").remove();
                  return false;
              });
          &lt;/script&gt;
      }
  &lt;/fieldset&gt; 
  </code></pre>
  
  <p>Partial View</p>
  
  <pre><code>@model MyApp.Models.AssessmentAddView
  @{
      Layout = null;
  }
  
  @using (Html.BeginCollectionItem("Assessments"))
  {
      &lt;div id="assessmentRow" class="assessmentRow"&gt;
          @Html.DropDownListFor(m =&gt; m.SelectedId, Model.Data, "Select Assessment", new { @class = "form-control", @style = "display: inline" })
          &lt;input type="button" id="deleteRow" name="deleteRow" value="Delete Row" /&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>AssessmentAddView Class</p>
  
  <pre><code>public class AssessmentAddView
  {
      public IEnumerable&lt;SelectListItem&gt; Data { get; set; }
      public string SelectedId { get; set; }
  }
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>public ActionResult AddNewAssessment()
  {
      return PartialView("_Assessment");//return your partial view here
  }
  
  public ActionResult _Assessment()
  {
      var model = new AssessmentAddView
      {
          Data = ViewBag.AssessmentList = new SelectList(db.tblAssessment.OrderBy(a =&gt; a.AssessmentName), "Id", "AssessmentName")
      };
      return View(model);
  }
  </code></pre>
  
  <p>Ok when I click Add Assessment I get an Internal Error (500) but if I take out the Drop down and put some basic text in, it works.</p>
  
  <p>If I leave it as basic text and the add works, the delete button does not work without any error.</p>
  
  <p>If I go to the partial view itself, it loads fine with a dropdown and all the assessments in.</p>
  
  <p>Any ideas on what I'm doing wrong?</p>