0
私は問題に直面して解決できません。たぶん誰かがこれで私を助けるだろう。ノックアウトJSバインディングとAjaxテーブル
私は、AJAXページネーションを持つテーブルを持つMVCパーシャルビューを持っています。
<div id="mainTable">
@using (Ajax.BeginForm("OrganizationMemberList", "Team", new AjaxOptions()
{
InsertionMode = InsertionMode.ReplaceWith,
UpdateTargetId = "mainTable",
HttpMethod = "POST",
Url = @Url.Action("OrganizationMemberList", "Team")
}))
{
<div class="widget">
<div class="widget-body">
<div class="table-responsive">
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">@ResourceMain.Search</button>
</span>
@Html.TextBoxFor(x => x.SearchString, new { @class = "form-control", @autocomplete = "off" })
</div>
</div>
<table class="table table-hover">
<thead>
<tr>
<th>@Html.DisplayNameFor(x => x.Source.FirstOrDefault().Name)</th>
</tr>
</thead>
<tbody>
@foreach (var employee in Model.Source)
{
<tr>
<td class="hidden">
@employee.Upn
</td>
<td>
@employee.Name
</td>
<td>
<i class="pointerSelect glyphicon glyphicon-plus" data-bind="click: function(name, upn){ AddUser('@employee.Name', '@employee.Upn') }"></i>
</td>
<td>
<i class="pointerSelect glyphicon glyphicon-king" data-bind="click: function(name, upn){ AddLeader('@employee.Name', '@employee.Upn') }"></i>
</td>
</tr>
}
</tbody>
</table>
@Html.Pagination(Model, "OrganizationMemberList", "mainTable")
</div>
</div>
</div>
}
</div>
と私は<i>タグをクリックしています。 この部分がすべてロードされたメインページが動作しているとき。問題は、テーブルのリロードバインディングが機能していないと、ページを変更したときに発生します。 私のメインページ：
<div class="row">
<div id="something" class="col-md-3">
@Html.Action("OrganizationMemberList", "Team")
</div>
<div class="col-md-9">
<div class="widget">
<div class="widget-body">
@using (Html.BeginForm(null,null,null,FormMethod.Post, new {@class = "form-horizontal" }))
{
@Html.AntiForgeryToken()
<div class="form-group">
@Html.LabelFor(x => x.Name)
@Html.ValidationMessageFor(x => x.Name)
@Html.TextBoxFor(x => x.Name, new {@class = "form-control"})
</div>
<div class="form-group">
@Html.LabelFor(x => x.Leader)
<i class="glyphicon glyphicon-king"></i>
<div data-bind="with: team">
<div style="max-width: 160px;" class="input-group">
<div class="input-group-addon">
<span data-bind="text: Leader().FullName"></span>
</div>
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(x => x.User)
<i class="glyphicon glyphicon-user"></i>
<div data-bind="foreach: users">
<div style="max-width: 160px;" class="input-group">
<div class="input-group-addon">
<span data-bind="text: FullName"></span>
</div>
<div class="input-group-addon">
<i class="pointerSelect glyphicon glyphicon-remove" data-bind="click: $root.RemoveUser"></i>
</div>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<script src="~/Scripts/models/TeamViewModel.js"></script>
そして、私のノックのViewModelは次のようになります。
$(function() {
var teamModel = function(team) {
var self = this;
self.id = ko.observable(team ? team.Id : 0);
self.User = ko.observableArray(team ? team.User : []);
self.Name = ko.observable(team ? team.Name : "");
self.Leader = ko.observable(team ? team.Leader : "");
};
var userModel = function (user) {
var self = this;
self.Id = ko.observable(user ? user.Id : 0);
self.FullName = ko.observable(user ? user.FullName : "");
self.UserUpn = ko.observable(user ? user.UserUpn : "");
};
var teamManagement = function() {
var self = this;
self.team = ko.observable(new teamModel());
self.users = ko.observableArray([]);
self.AddUser = function (name, upn) {
var user = { FullName: name, UserUpn: upn };
var obj = new userModel(user);
self.users.push(obj);
};
self.RemoveUser = function (user) {
self.users.remove(user);
};
self.AddLeader = function (name, upn) {
var user = { FullName: name, UserUpn: upn };
var obj = new userModel(user);
self.team().Leader(obj);
};
};
ko.applyBindings(new teamManagement());
});
誰もが手掛かりを持っていますか？