CODEWITHSUNDEEP
javascriptasp.net-mvc-4knockout.js
A NewBie
A NewBie

Reputation: 181

Deleting a record from a table having knockout binding

I am new to MVC and knockout. I have the following table in my view which is being bound using knockout.

  @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 code is as follows.

 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);
});

Controller action method is as shown.

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

The record is not getting deleted at all and I am getting the following error. The url is not found.Could you please guide me in the correct direction.Thanks.

Upvotes: 0

Views: 591

Answers (1)

A NewBie
A NewBie

Reputation: 181

I was not sending the ID of the row to be deleted url should have been url: "/Provider/Delete/" + Provider.ProviderID()

Its working fine now.

Although the redirect to the "Index" action method is not happening.I have to refresh the page to see the deleted record.

Any guidance would be helpful guys.Thanks.

Upvotes: 1

Related Questions