title: Dynamically add/remove table rows in a wizard
body: <p>I'm currently using this <a href="https://www.nuget.org/packages/MVC.Wizard.Sample/" rel="nofollow">Wizard</a> in my application.</p>
  
  <p>In one of my steps, I need to add and remove items from a table. Add functions works fine. But I can't make the Delete function work. I've searched SO and other resources online, can't find a solution. </p>
  
  <p>This is what I've so far:</p>
  
  <p>Wizard Step 2 Table:</p>
  
  <pre><code>  &lt;table id="LibList" class="table table-responsive table-striped"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;
                          @Html.DisplayNameFor(model =&gt; model.Step3.Liabilities[0].Types)
                      &lt;/th&gt;
                      &lt;th&gt;
                          @Html.DisplayNameFor(model =&gt; model.Step3.Liabilities[0].Name)
                      &lt;/th&gt;
                      &lt;th&gt;
                          @Html.DisplayNameFor(model =&gt; model.Step3.Liabilities[0].Teams)
                      &lt;/th&gt;
                      &lt;th&gt;
                          &lt;label&gt;Delete&lt;/label&gt;
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  @foreach (var item in Model.Step3.Liabilities) {
                      Html.RenderPartial("_LibListItem", item);
                  }
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>Partial View:</p>
  
  <pre><code>        &lt;tr&gt;
  &lt;td&gt;
      @Html.DropDownListFor(model =&gt; model.Type, Model.Types, new { @class = "selectpicker form-control", id = string.Format("{0}_{1}", "TYPE", Model.ID) })
  &lt;/td&gt;
  &lt;td&gt;
      @Html.TextBoxFor(model =&gt; model.Name, new { @class = "form-control", id = string.Format("{0}_{1}", "NAME", Model.ID) })
  &lt;/td&gt;
  &lt;td&gt;
      @Html.TextBoxFor(model =&gt; model.Teams, new { @class = "form-control", @type = "currency", id = string.Format("{0}_{1}", "TERMS", Model.ID) })
  &lt;/td&gt;
  &lt;td&gt;
      @Ajax.ActionLink("Delete", "Delete", "QuestionWizard", new { id = Model.ID },
      new AjaxOptions() {
          HttpMethod = "Delete",
          Confirm = "Are you sure you want to delete this record?",
          OnComplete = "function() { $(this).parent().parent().remove() }"
      },
      new { @class = "btn btn-primary" })
  &lt;/td&gt;
  </code></pre>
  
  <p></p>
  
  <p>Add and Delete Action:</p>
  
  <pre><code>    public ActionResult AddRow() {
          LiabilityModel lib = new LiabilityModel();
          try {
              if (LiabilitySessionState.Count == 0) {
                  lib.ID = 1;
              } else {
                  lib.ID = LiabilitySessionState.LastOrDefault().ID + 1;
              }
              LiabilitySessionState.Add(lib);
              return PartialView("_LibListItem", lib);
          } catch (Exception ex) {
              System.Web.HttpContext.Current.Application.Add("LASTERROR", ex);
              return RedirectToAction("Index", "Error");
          }
      }
  
      public void Delete(int Id) {
          try {
              if (LiabilitySessionState.Count &gt; 0) {
                  LiabilitySessionState.RemoveAll(item =&gt; item.ID == Id);
              }
          } catch (Exception ex) {
              System.Web.HttpContext.Current.Application.Add("LASTERROR", ex);
              RedirectToAction("Index", "Error");
          }
      }
  
      public List&lt;LiabilityModel&gt; LiabilitySessionState {
          get {
              if (Session["LiabilityModel"] == null) {
                  return LiabilitySessionState = new List&lt;LiabilityModel&gt;();
              } else {
                  return Session["LiabilityModel"] as List&lt;LiabilityModel&gt;;
              }
          }
          set {
              Session["LiabilityModel"] = value;
          }
      }
  </code></pre>
  
  <p>Script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function () {
      $('.add-button').click(function () {
          var action = "/QuestionWizard/AddRow";
          $.ajax({
              url: action,
              cache: false,
              success: function (result) {
                  $("#LibList tbody").append($(result));
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
  
              }
          });
      })
      $(".remove-button").click(function () {
          $(this).parents().parent().remove();
          return false;
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>Right now, the Delete Action returns a blank page, because I'm not returning a view. But, I'm not sure what view to return.</p>
  
  <p>Please help!</p>
  
  <p>Thanks in advance. </p>