从具有剔除绑定的表中删除记录答案

【问题标题】：Deleting a record from a table having knockout binding从具有剔除绑定的表中删除记录
【发布时间】：2015-03-15 01:00:37
【问题描述】：

我是 MVC 和淘汰赛的新手。我的视图中有下表，它是使用淘汰赛绑定的。

  @using PagedList;
  @using PagedList.Mvc;
  @model IPagedList<DEMO_JAN14.Models.Provider>
  @{
       Layout = "~/Views/Shared/_Layout.cshtml";
   }
 <head>
   <title>LIST OF PROVIDERS</title>
</head>
 <body>
    <div class="container">
        <h1>Providers List</h1><br/>
    <a class="btn btn-primary col-sm-1" href="/Provider/Create">Create</a>     <br/>

    <table class="table table-bordered" id="tblData">
    <tr>
        <th>Provider Type</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Certification</th>
        <th>Specialization</th>
        <th>SSN</th>
        <th>Facility Name</th>
        <th>Contact No</th>
        <th>Contact Email</th>
        <th>Delete</th>
    </tr>
    <tbody data-bind="foreach:viewModel.DataList">
        <tr>
            <td class="col-lg-2" data-bind="text: ProviderType"></td>
            <td class="col-lg-2" data-bind="text: FirstName"></td>
            <td class="col-lg-2" data-bind="text: LastName"></td>
            <td class="col-lg-2" data-bind="text: Certification"></td>
            <td class="col-lg-2" data-bind="text: Specialization"></td>
            <td class="col-lg-2" data-bind="text: SSN"></td>
            <td class="col-lg-2" data-bind="text: FacilityName"></td>
            <td class="col-lg-2" data-bind="text: ContactNumber"></td>
            <td class="col-lg-2" data-bind="text: ContactEmail"></td>
            <td><button type="button" id="Delete" class="btn btn-primary"       data-bind="click:$root.Delete">Delete</button></td>
        </tr>
     </tbody>
  </table>

      <script type="text/javascript" src="../../Scripts/knockout.mapping-latest.js"></script>
     <script type="text/javascript" src="~/Scripts/Index.js"></script>

    <script type="text/javascript">
    var data = @Html.Raw(Json.Encode(Model));
    //viewModel.DataList(ko.mapping.fromJS(data));
    //ko.applyBindings(viewModel2, $("#tblData")[0]);
    </script>

Index.js 代码如下。

 function ProviderViewModel() {
var self = this;
self.ProviderID = ko.observable("");
self.ProviderType = ko.observable("");
self.FirstName = ko.observable("");
self.LastName = ko.observable("");
self.Certification = ko.observable("");
self.Specialization = ko.observable("");
self.SSN = ko.observable("");
self.ContactNumber = ko.observable("");
self.ContactEmail = ko.observable("");
self.FacilityName = ko.observable("");
self.DataList = ko.observableArray([]);

 var Provider =
    {
        ProviderID: self.ProviderID,
        ProviderType: self.ProviderType,
        FirstName: self.FirstName,
        LastName: self.LastName,
        Certification: self.Certification,
        Specialization: self.Specialization,
        SSN: self.SSN,
        ContactNumber: self.ContactNumber,
        ContactEmail: self.ContactEmail,
        FacilityName: self.FacilityName,
    };

self.Provider = ko.observable();
self.Providers = ko.observableArray();

// Delete Provider
self.Delete = function (Provider) {
    if (confirm('Are you sure you want to delete this row?')) {
        var id = Provider.ProviderID();

        $.ajax({
            url: "/Provider/Delete",
            cache: false,
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: ko.toJSON(id),
            success: function (data) {
                self.Providers.remove(Provider);
                //   alert("Record Deleted Successfully");
            }
        }).fail(
             function (xhr, textStatus, err) {
                 alert(err);
             });
       }
    }  //Delete Provider

}

 var viewModel = new ProviderViewModel();

 $(document).ready(function () {
if (data)
    viewModel.DataList(ko.mapping.fromJS(data)());
ko.applyBindings(viewModel);
});

控制器动作方法如图。

  [HttpPost]
    public ActionResult Delete(int id)
    {
        DAL.DeleteProvider(id);
        return RedirectToAction("Index");
    }

该记录根本没有被删除，我收到以下错误。找不到网址。请您指导我正确的方向。谢谢。

【问题讨论】：

尝试将data: ko.toJSON(id),更改为data: ko.toJSON({id: id})
感谢您的回复。我没有发送带有 URL 的 ID，这导致了问题。关于如何重定向到“索引”操作方法的任何想法。就目前而言，重定向是没有发生。我必须刷新页面才能看到已删除的记录。

标签： javascript asp.net-mvc-4 knockout.js

【解决方案1】：

我没有发送要删除的行的 ID url 应该是 url: "/Provider/Delete/" + Provider.ProviderID()

它现在工作正常。

虽然重定向到“索引”操作方法没有发生。我必须刷新页面才能看到删除的记录。

任何指导都会有所帮助。谢谢。

【讨论】：