将值从 Footable 传递到 MVC 5 中的 SQL 数据库

Question

我有一个相当简单的 MVC 应用程序，它从 SQL 数据库中提取数据，并使用 footable 进行显示。一切正常，footable 按预期工作。当我对 table 进行更改时，修改后的内容显示在 table 视图中；但是，数据没有被发送回数据库。我对编程比较陌生，所以我不确定我要找的是不是 ajax、反序列化器等。我已经阅读了几篇试图解决这个问题的帖子，但他们没有似乎是我正在寻找的东西，或者我不了解如何实现它们。我也不确定代码的哪些部分是帮助解决这个问题所必需的，所以我将包括一些基础知识，但如果您需要更多代码，请告知。

JS 和 View/Index

< script >

  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 && !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');
});

@model IEnumerable
<STAD_DEV.Models.STAD_CNTC>

  @{ ViewBag.Title = "Index"; }

  <h2>Index</h2>

  <p>
    @Html.ActionLink("Create New", "Create")
  </p>
  <table id="editing-example" class="table footable table-striped" data-paging="true" data-filtering="true" data-sorting="true" data-editing="true">
    <thead>
      <tr>
        <th data-name="CNTC_ID">ID</th>
        <th data-name="CNTC_NM" data-breakpoint="xs">Name</th>
        <th data-name="WorkPhone">Work Phone</th>
        <th data-name="CellPhone">Cell Phone</th>
        <th data-name="Email">Email</th>
        <th data-name="Fax">Fax</th>
        <th data-type="html" data-name="IsFedContact">Is Fed Contact</th>
        <th data-name="ENTY_NM">Department</th>
        <th data-name="TRBL_GOV_NM">Tribe</th>
        <th></th>
      </tr>
    </thead>

    @foreach (var item in Model) {
    <tr>
      <td>
        @Html.DisplayFor(modelItem => item.CNTC_ID)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.CNTC_NM)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.WorkPhone)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.CellPhone)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.Email)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.Fax)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.IsFedContact)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.GAIN_ST_GOV_ENTY.ENTY_NM)
      </td>
      <td>
        @Html.DisplayFor(modelItem => item.GAIN_TRBL_GOV.TRBL_GOV_NM)
      </td>
      <td></td>
    </tr>
    }
  </table>



  <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
    <div class="modal-dialog" role="document">
      <form class="modal-content form-horizontal" id="editor">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title" id="editor-title">Add Row</h4>
        </div>
        <div class="modal-body">
          @*@<input type="number" id="CNTC_ID" name="CNTC_ID" class="hidden" />*@

          <div class="form-group">
            <label for="CNTC_ID" class="col-sm-3 control-label">CNTC_ID</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="CNTC_ID" name="CNTC_ID" placeholder="ID">
            </div>
          </div>

          <div class="form-group required">
            <label for="CNTC_NM" class="col-sm-3 control-label">Name</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="CNTC_NM" name="CNTC_NM" placeholder="Name" value="" required /> @*
              <input type="text" class="form-control" id="CNTC_NM" name="CNTC_NM" placeholder="Name" required>*@
            </div>
          </div>
          <div class="form-group">
            <label for="WorkPhone" class="col-sm-3 control-label">WorkPhone</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="WorkPhone" name="WorkPhone" placeholder="Work Phone">
            </div>
          </div>
          <div class="form-group">
            <label for="CellPhone" class="col-sm-3 control-label">Cell Phone</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="CellPhone" name="CellPhone" placeholder="Cell Phone">
            </div>
          </div>

          <div class="form-group">
            <label for="Email" class="col-sm-3 control-label">Email</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="Email" name="Email" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="Fax" class="col-sm-3 control-label">Fax</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="Fax" name="Fax" placeholder="Fax">
            </div>
          </div>
          <div class="form-group">
            <label for="IsFedContact" class="col-sm-3 control-label">Is Fed Contact</label>
            <div class="col-sm-9">
              <select class="form-control" id="IsFedContact" name="IsFedContact">
                            <option value="True">yes</option>
                            <option value="False">no</option>
                        </select> @*
              <input type="text" class="form-control" id="IsFedContact" name="IsFedContact" placeholder="Is Fed Contact">*@
            </div>
          </div>
          <div class="form-group">
            <label for="ENTY_NM" class="col-sm-3 control-label">Department</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="ENTY_NM" name="ENTY_NM" placeholder="">
            </div>
          </div>
          <div class="form-group">
            <label for="TRBL_GOV_NM" class="col-sm-3 control-label">Tribe</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="TRBL_GOV_NM" name="TRBL_GOV_NM" placeholder="">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" data-trigger="ProcessData">Save changes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        </div>
        <div class="form-group">
          <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
          </div>
        </div>
      </form>
    </div>
  </div>

我没有编辑后面的代码，不确定是否需要，所以它只是自动生成的代码。我确定我放入的代码片段不会运行，但我仍在学习 Whosebug 问题的正确格式。希望这一切都有意义。

Answer 1

这个问题是由两件事引起的，首先是 ajax 调用没有指向正确的位置。第二个（在 post 中实际上没有解决）是由 HTML 将空格传递到 table 引起的。此处找到了此问题的解决方案：HTML Rendering Spaces

将值从 Footable 传递到 MVC 5 中的 SQL 数据库

Passing values from Footable to SQL database in MVC 5

javascript

asp.net-mvc

jquery

footable