Knockout.js モデル関数の 1 つから AJAX 呼び出しを送信しているときに問題に直面しています。
これは私には非常に奇妙に思えます。私のノックアウトスクリプトは次のようになります
<script type="text/javascript">
var userinfoViewModel = function () {
var self = this;
self.ID = ko.observable("0");
self.First_Name = ko.observable("");
self.Last_Name = ko.observable("");
self.Login_Id = Ko.observable("");
self.Password = ko.observable("");
self.Role = ko.observable("");
var user = {
ID: self.ID,
First_Name: self.First_Name,
Last_Name: self.Last_Name,
Login_Id: self.Login_Id,
Password: self.Password,
Role: self.Role
};
//Declare an ObservableArray for Storing the JSON Response
self.Users = ko.observableArray([]);
//Function to Read All Users
function GetUsers() {
//Ajax Call Get All Employee Records
$.ajax({
type: "GET",
url: "/api/user",
contentType: "application/json",
dataType: "json",
success: function (data) {
self.Users(data); //Put the response in ObservableArray
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
//Ends Here
}
//call GetUsers Ajax call.
GetUsers();
//CRUD Operations
//Function to perform POST (insert User) operation
self.Create = function () {
//Ajax call to Insert the User
$.ajax({
type: "POST",
url: "/api/user",
data: ko.toJSON(User), //Convert the Observable Data into JSON
contentType: "application/json",
success: function (data) {
alert("Record Added Successfully");
self.EmpNo(data.EmpNo);
alert("The New Employee Id :" + self.EmpNo());
GetEmployees();
},
error: function () {
alert("Failed");
}
});
//Ends Here
};
self.update = function () {
var url = "/api/user/" + self.EmpNo();
alert(url);
$.ajax({
type: "PUT",
url: url,
data: ko.toJSON(EmpData),
contentType: "application/json",
success: function (data) {
alert("Record Updated Successfully");
GetEmployees();
},
error: function (error) {
alert(error.status + "<!----!>" + error.statusText);
}
});
};
//Function to perform DELETE Operation
self.deleterec = function (user) {
$.ajax({
type: "DELETE",
url: "/api/EmployeeInfoAPI/" + employee.EmpNo,
success: function (data) {
alert("Record Deleted Successfully");
GetUser();//Refresh the Table
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
// alert("Clicked" + employee.EmpNo)
};
//Function to Display record to be updated
self.getselecteduser = function (user) {
self.ID(user.ID),
self.First_Name(user.First_Name),
self.Last_Name(user.Last_Name),
self.Login_Id(user.Login_Id),
self.Password(user.Password),
self.Role(user.Role)
};
};
ko.applyBindings(new userinfoViewModel());
</script>
}
そして、ページで使用している基になるHTMLは次のようになります-
<form>
<table>
<tr>
<td>
<!--Bind the TextBoxes in the Table to the observable properties defined into the ViewModel -->
<table id="tbldml">
<tr>
<td>ID</td>
<td>
<input type="text" id="ID" data-bind="value: $root.ID" /></td>
</tr>
<tr>
<td>First_Name</td>
<td>
<input type="text" id="First_Name" data-bind="value: $root.First_Name" /></td>
</tr>
<tr>
<td>Last_Name</td>
<td>
<input type="text" id="Last_Name" data-bind="value: $root.Last_Name" /></td>
</tr>
<tr>
<td>Login_Id</td>
<td>
<input type="text" id="Login_Id" data-bind="value: $root.Login_Id" /></td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="text" id="Password" data-bind="value: $root.Password" />
</td>
</tr>
<tr>
<td>Role</td>
<td>
<input type="text" id="Role" data-bind="value: $root.Role" />
</td>
</tr>
<tr>
<!--The click binding has the JavaScirpt methods passed to it-->
<td>
<button data-bind="click :$root.save">Save</button></td>
<td>
<button data-bind="click: $root.update">Update</button></td>
</tr>
</table>
</td>
<td>
<div class="FixedContainer">
<!--If the lenght of the Users is greater than 0 then visible the Table-->
<table data-bind="visible: Users().length>0">
<thead>
<tr>
<td>ID</td>
<td>First_Name</td>
<td>Last_Name</td>
<td>Login_Id</td>
<td>Role</td>
<td></td>
</tr>
</thead>
<!--Iterate through an observableArray using foreach-->
<tbody data-bind="foreach: Users">
<tr data-bind="click: $root.getselecteduser" id="updtr">
<td><span data-bind="text: ID"></span></td>
<td><span data-bind="text: First_Name"></span></td>
<td><span data-bind="text: Last_Name"></span></td>
<td><span data-bind="text: Login_Id"></span></td>
<td><span data-bind="text: Role"></span></td>
<td>
<button data-bind="click: $root.deleterec">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</form>
</section>
問題は非常に奇妙に思えますが、バインディングは非常に適切だと思います。私の API 呼び出し URL は次のようなものです - Http://localhost:1234/api/user
Fiddler トラック: Fiddler を介して呼び出しをキャプチャしようとしましたが、スクリプトからのGetUsers()呼び出しが最初に発生しないようです。問題を見つけることができませんでした。助けていただければ幸いです。