title: Passing values from Footable to SQL database in MVC 5
body: <p>I have a fairly simple MVC application that is pulling data from a SQL database, and is using footable for the display. Everything is working fine, and the footable is working as expected. When I make a change to the table, the modified content shows up in the table view; however, the data is not being sent back to the database.
  I am relatively new to programming, so I'm not sure if what I'm looking for is some ajax, a deserializer, etc. I've read several posts trying to solve this issue, but they don't seem to be what I am looking for, or I'm not understanding how to implement them.
  I am also not sure what portions of the code are necessary to help resolve this issue, so I will include a few of the basics, but if you need more code, please advise.</p>
  
  <p>JS and View/Index</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt; script &gt;
  
    var $modal = $('#editor-modal'),
      $editor = $('form#editor'),
      $editorTitle = $('#editor-title'),
      ft = FooTable.init('#editing-example', {
        editing: {
          enabled: true,
          addRow: function() {
            $modal.removeData('row');
            $editor[0].reset();
            $editorTitle.text('Add a new row');
            $modal.modal('show');
          },
          editRow: function(row) {
            var values = row.val();
            //$editor.find('CNTC_ID').val(parseInt(values.CNTC_ID));
            $editor.find('#CNTC_ID').val(parseInt(values.CNTC_ID));
            $editor.find('#CNTC_NM').val(values.CNTC_NM);
            $editor.find('#WorkPhone').val(values.WorkPhone);
            $editor.find('#CellPhone').val(values.CellPhone);
            $editor.find('#Email').val(values.Email);
            $editor.find('#Fax').val(values.Fax);
            $editor.find('#IsFedContact').val(values.IsFedContact);
            $editor.find('#ENTY_NM').val(values.ENTY_NM);
            $editor.find('#TRBL_GOV_NM').val(values.TRBL_GOV_NM);
  
  
            $modal.data('row', row);
            $editorTitle.text('Edit row #' + parseInt(values.CNTC_ID));
            $modal.modal('show');
          },
          deleteRow: function(row) {
            if (confirm('Are you sure you want to delete the row?')) {
              row.delete();
            }
          }
        }
      }),
      uid = 10;
  
  $editor.on('submit', function(e) {
    if (this.checkValidity &amp;&amp; !this.checkValidity()) return;
    e.preventDefault();
  
    var row = $modal.data('row'),
      values = {
        CNTC_ID: $editor.find('#CNTC_ID').val(),
        CNTC_NM: $editor.find('#CNTC_NM').val(),
        WorkPhone: $editor.find('#WorkPhone').val(),
        CellPhone: $editor.find('#CellPhone').val(),
        Email: $editor.find('#Email').val(),
        Fax: $editor.find('#Fax').val(),
        IsFedContact: $editor.find('#IsFedContact').val(),
        ENTY_NM: $editor.find('#ENTY_NM').val(),
        TRBL_GOV_NM: $editor.find('#TRBL_GOV_NM').val()
  
      };
  
  
    if (row instanceof FooTable.Row) {
      row.val(values);
    } else {
      values.CNTC_ID = uid++;
      ft.rows.add(values);
    }
    $modal.modal('hide');
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@model IEnumerable
  &lt;STAD_DEV.Models.STAD_CNTC&gt;
  
    @{ ViewBag.Title = "Index"; }
  
    &lt;h2&gt;Index&lt;/h2&gt;
  
    &lt;p&gt;
      @Html.ActionLink("Create New", "Create")
    &lt;/p&gt;
    &lt;table id="editing-example" class="table footable table-striped" data-paging="true" data-filtering="true" data-sorting="true" data-editing="true"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th data-name="CNTC_ID"&gt;ID&lt;/th&gt;
          &lt;th data-name="CNTC_NM" data-breakpoint="xs"&gt;Name&lt;/th&gt;
          &lt;th data-name="WorkPhone"&gt;Work Phone&lt;/th&gt;
          &lt;th data-name="CellPhone"&gt;Cell Phone&lt;/th&gt;
          &lt;th data-name="Email"&gt;Email&lt;/th&gt;
          &lt;th data-name="Fax"&gt;Fax&lt;/th&gt;
          &lt;th data-type="html" data-name="IsFedContact"&gt;Is Fed Contact&lt;/th&gt;
          &lt;th data-name="ENTY_NM"&gt;Department&lt;/th&gt;
          &lt;th data-name="TRBL_GOV_NM"&gt;Tribe&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  
      @foreach (var item in Model) {
      &lt;tr&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.CNTC_ID)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.CNTC_NM)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.WorkPhone)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.CellPhone)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.Email)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.Fax)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.IsFedContact)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.GAIN_ST_GOV_ENTY.ENTY_NM)
        &lt;/td&gt;
        &lt;td&gt;
          @Html.DisplayFor(modelItem =&gt; item.GAIN_TRBL_GOV.TRBL_GOV_NM)
        &lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      }
    &lt;/table&gt;
  
  
  
    &lt;div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
        &lt;form class="modal-content form-horizontal" id="editor"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
            &lt;h4 class="modal-title" id="editor-title"&gt;Add Row&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            @*@&lt;input type="number" id="CNTC_ID" name="CNTC_ID" class="hidden" /&gt;*@
  
            &lt;div class="form-group"&gt;
              &lt;label for="CNTC_ID" class="col-sm-3 control-label"&gt;CNTC_ID&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;input type="text" class="form-control" id="CNTC_ID" name="CNTC_ID" placeholder="ID"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group required"&gt;
              &lt;label for="CNTC_NM" class="col-sm-3 control-label"&gt;Name&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;input type="text" class="form-control" id="CNTC_NM" name="CNTC_NM" placeholder="Name" value="" required /&gt; @*
                &lt;input type="text" class="form-control" id="CNTC_NM" name="CNTC_NM" placeholder="Name" required&gt;*@
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="WorkPhone" class="col-sm-3 control-label"&gt;WorkPhone&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;input type="text" class="form-control" id="WorkPhone" name="WorkPhone" placeholder="Work Phone"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="CellPhone" class="col-sm-3 control-label"&gt;Cell Phone&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;input type="text" class="form-control" id="CellPhone" name="CellPhone" placeholder="Cell Phone"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
              &lt;label for="Email" class="col-sm-3 control-label"&gt;Email&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;input type="text" class="form-control" id="Email" name="Email" placeholder="Email"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="Fax" class="col-sm-3 control-label"&gt;Fax&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;input type="text" class="form-control" id="Fax" name="Fax" placeholder="Fax"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="IsFedContact" class="col-sm-3 control-label"&gt;Is Fed Contact&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;select class="form-control" id="IsFedContact" name="IsFedContact"&gt;
                              &lt;option value="True"&gt;yes&lt;/option&gt;
                              &lt;option value="False"&gt;no&lt;/option&gt;
                          &lt;/select&gt; @*
                &lt;input type="text" class="form-control" id="IsFedContact" name="IsFedContact" placeholder="Is Fed Contact"&gt;*@
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="ENTY_NM" class="col-sm-3 control-label"&gt;Department&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;input type="text" class="form-control" id="ENTY_NM" name="ENTY_NM" placeholder=""&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="TRBL_GOV_NM" class="col-sm-3 control-label"&gt;Tribe&lt;/label&gt;
              &lt;div class="col-sm-9"&gt;
                &lt;input type="text" class="form-control" id="TRBL_GOV_NM" name="TRBL_GOV_NM" placeholder=""&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="submit" class="btn btn-primary" data-trigger="ProcessData"&gt;Save changes&lt;/button&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;div class="col-md-offset-2 col-md-10"&gt;
              &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have not edited the code behind, and was not sure if I needed to, so it's just auto-generated code. I'm sure that the code snippet that I put in won't run, but I'm still learning the proper formatting for stackoverflow questions.
  Hope this all makes sense.</p>