淘汰赛和 ASP.NET MVC 4

Knockout and ASP.NET MVC 4

本文关键字：MVC NET ASP 淘汰赛      更新时间：2023-09-26

我被告知使用MVC4，Bootstrap和KNOCKOUT构建Web应用程序。顺便说一下，我对这三个都是全新的。请耐心等待，因为这可能是很长的帖子。我有3个页面：一个创建页面，一个列表页面和一个编辑页面。创建页面工作正常，但列表页面是我面临大量问题的地方。列表页面列出了所有数据。我在这里面临的第一个问题是正在删除数据，但我必须刷新页面才能看到删除更新。其次，编辑按钮不会重定向到编辑页面。我仍然是列表页面本身。

我的控制器

    public ActionResult Index(int? page)
    {
        Provider providerList = new Provider();
        DAL DataAccess = new DAL();
        IList<Provider> providers = DataAccess.GetListofProviders();
        int pageSize = 5;
        int pageNumber = (page ?? 1);
        return View(providers.ToPagedList(pageNumber,pageSize));
    }
    [HttpPut]
    public ActionResult Edit(int id)
    {
        DAL dataAccess = new DAL();
        Provider provider = dataAccess.GetASingleProvider(id);
        return View(provider);
    } 
    [HttpPost]
    public ActionResult Delete(int id)
    {
        DAL DataAccess = new DAL();
        DataAccess.DeleteProvider(id);
        return RedirectToAction("Index");
    }

我的 JS 脚本用于删除和编辑

   self.Delete = function (Provider) {
    if (confirm('Are you sure you want to delete this row?')) {
        $.ajax({
            url: "/Provider/Delete/" + Provider.ProviderID(),
            cache: false,
            type: 'POST',
            async: false,
            contentType: 'application/json; charset=utf-8',
            data: ko.toJSON(Provider.ProviderID()),
            success: function (data) {
                self.Providers.remove(Provider);
            }
        }).fail(
             function (xhr, textStatus, err) {
                 alert(err);
             });
    }
}
  self.update = function (Provider) {
    $.ajax({
        url: "/Provider/Edit/"+ Provider.ProviderID(),
        cache: false,
        type: 'PUT',
        contentType: 'application/json; charset=utf-8',
        data: ko.toJSON(Provider),
        success: function (data) {
            //alert(data);
            self.Providers.removeAll();
            self.Providers(data);
            self.Provider(null);
           }
       })
   .fail(
       function (xhr, textStatus, err) {
          alert(err);
      };
   }

编辑页面

<head>
<title>EDIT PROVIDER</title>
</head>
<body>
<div class="container">    
    <h1 class="col-sm-offset-2">Edit Provider Details:</h1><br />
    <form class="form-horizontal" role="form" id="ProviderDetailsForm">
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
            <div class="col-sm-6">
               <input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value:FirstName" onkeypress="return onlyAlphabets(event);">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">CERTIFICATION:</label>
            <div class="col-sm-6">
                <select class="form-control" id="Certification" data-bind="value:SelectedCertification,options:Certification, optionsCaption: 'Select a Certification'">
                </select>
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_Certification">Choose a Certificaton</label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">SPECIALIZATION:</label>
            <div class="col-sm-6">
                <select class="form-control" id="Specialization" data-bind="value:Specialization">
                    <option>Select a Specialization</option>    
                </select>
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_Specialization">Choose a Specialization</label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">TAXONOMY CODE:</label>
            <div class="col-sm-6">
      <input type="text" class="form-control" placeholder="Taxonomy code" id="TaxonomyCode" data-bind="textInput:TaxonomyCode,valueUpdate:'blur'">
            </div>
        </div>
        <div class="form-group">
            <button type="button" id="Update" class="btn btn-primary col-sm-1 col-sm-offset-4">Update</button>
            <button type="reset" class="btn btn-primary col-sm-1">Reset</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>

提供程序视图模型。

      var Provider =
          {
              ProviderID: ko.observable(""),
              FirstName: ko.observable(""),
              LastName: ko.observable(""),
              Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]),
              SelectedCertification: ko.observable(""),
              Specialization: ko.observable(""),
              TaxonomyCode:ko.observable(""),
              SSN: ko.observable(""),
              ContactNumber: ko.observable(""),
              ContactEmail: ko.observable(""),
              FacilityName: ko.observable(""),
          }
             ko.applyBindings(Provider);

对不起长帖子的人。但是，我在Stackoverflow以及其他网站上搜索了很多关于这个问题的信息，但无法找到正确的答案。请在这里指导新手。多谢。

已编辑以添加列表页的 HTML。

@using PagedList;
@using PagedList.Mvc;
@model IPagedList<DEMO_JAN14.Models.Provider>
<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>First Name</th>
        <th>Last Name</th>
        <th>Certification</th>
        <th>Specialization</th>
        <th>Taxonomy Code</th>
        <th>SSN</th>
        <th>Facility Name</th>
        <th>Contact No</th>
        <th>Contact Email</th>  
    </tr>
    <tbody data-bind="foreach:viewModel.DataList">
        <tr>
            <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: TaxonomyCode"></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="Edit" class="btn btn-primary" data-bind="click:$root.update">Edit</button></td>
            <td><button type="button" id="Delete" class="btn btn-primary" data-bind="click:$root.Delete">Delete</button></td>
        </tr>
     </tbody>
  </table>
    Page @(Model.PageCount<Model.PageNumber? 0 : Model.PageNumber) of @Model.PageCount
    @Html.PagedListPager( Model, page => Url.Action("Index", new { page   }) )
  </div>   
  </body>
<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));
</script>

您遇到的第一个问题（删除），您必须将提供程序设置为可观察数组，如下所示：

  self.Provider =ko.observableArray(
      {
          ProviderID: ko.observable(""),
          FirstName: ko.observable(""),
          LastName: ko.observable(""),
          Certification: ko.observableArray(["M.B.B.S", "M.D.", "R.N.", "M.S.N."]),
          SelectedCertification: ko.observable(""),
          Specialization: ko.observable(""),
          TaxonomyCode:ko.observable(""),
          SSN: ko.observable(""),
          ContactNumber: ko.observable(""),
          ContactEmail: ko.observable(""),
          FacilityName: ko.observable(""),
      })

关于第二个问题，请尝试在 ajax 调用中将异步选项设置为 false，如果它不起作用，请尝试使用 JavaScript 重定向到该页面

相关文章：