Question

我是MVC和Knockout的新手。我有一个带有编辑和删除按钮的页面。删除记录正常。当单击编辑按钮时，我想填充相关字段。但编辑视图本身没有加载，我总是显示列表页面

我的列表页面如图所示

 @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></th>
        <th></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: 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>
    </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>

MVC控制器

   [HttpPut]
    public ActionResult Edit(int id)
    {
        DAL dataAccess = new DAL();
        Provider provider = dataAccess.GetASingleProvider(id);
        return View(provider);
    }

修改视图

 @model DEMO_JAN14.Models.Provider

 <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">LAST NAME:</label>
            <div class="col-sm-6">
          <input type="text" class="form-control" placeholder="Enter the Last Name" id="LastName" data-bind="value:LastName" onkeypress="return onlyAlphabets(event);">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_LastName">Enter the last 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">CONTACT NUMBER:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value:ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" onkeypress="return onlyNumbers(event);" maxlength="10">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">EMAIL ADDRESS:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value:ContactEmail" placeholder="Enter your email address" id="EmailAddress">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
        </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">Cancel</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../Scripts/Create_Script.js"></script>

编辑脚本

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

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

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

     self.update = function (Provider) {
            //var Provider = self.Provider();
            //alert(Provider.ProviderID);
            $.ajax({
                url: "/Provider/Edit/"+ Provider.ProviderID(),
                cache: false,
                type: 'PUT',
                contentType: 'application/json; charset=utf-8',
                async:false,
                data: ko.toJSON(Provider),
                success: function (data) {
                    //alert(data);
                    self.Providers.removeAll();
                    self.Providers(data); 
                    self.Provider(null);
                    //alert("Record Updated Successfully");
                }
            })
        .fail(
        function (xhr, textStatus, err) {
            alert(err);
        });
        }
  }
   var viewModel = new ProviderViewModel();

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

我很抱歉这篇长篇大论。我想我会尽可能多地提供一些信息。如果你能告诉我我做错了什么并指导我，我会非常感激。如果可以的话，我会感激不尽。谢谢。家伙。

使用knockout在ASP.NET MVC中编辑表单

0 个答案: