Question

我正在使用KnockOut JS和MVC。

如何将来自@ RAZOR视图的数据绑定到KO中的数据绑定。

我尝试过这样做，但没有在CONTROLLER上返回任何内容。

我想在这里实现的是Razorview渲染Step3（View）中的行。我想将这些行绑定到KNOCKOUT，以便我可以将这些数据传递给Step4（View）。

有更好的方法吗？

查看：

<tbody data-bind="foreach:ApprTable">
                @for (int i = 0; i < UserWRInfo.Count; i++)
                {
                    <tr>

                        <td style="text-align: center">
                            <button type="button" class="btn btn-primary" data-bind="click: $root.submit.bind($data,'@i')">Start</button>
                        </td>
                      <td style="text-align: center" data-bind="value: Appropriation">@UserWRInfo[i].AppropriationNumber</td>
                        <td style="text-align: center" data-bind="value: PriorityDate">@UserWRInfo[i].PriorityDate.ToString("MM/dd/yyyy")</td>
                        <td style="text-align: center" data-bind="value: Location">@UserWRInfo[i].Sect @UserWRInfo[i].Township @UserWRInfo[i].Range@UserWRInfo[i].RangeDirectionID</td>
                        <td style="text-align: center" data-bind="value: Source">@UserWRInfo[i].Source</td>
                        @if (UserWRInfo.Count == UserOwner.Count)
                        {
                            <td style="text-align: center" data-bind="value: Owner">@UserOwner[i].ToString()</td>
                        }
                        else
                        {
                            <td style="text-align: center" data-bind="value: Owner"></td>
                        }

                        <td style="text-align: center" data-bind="value: Use">@UserWRInfo[i].UseDescription</td>
                        <td style="text-align: center" data-bind="value: StartedBy"></td>
                        <td style="text-align: center" data-bind="value: RequiredReporting">@UserWRInfo[i].isAnnualReportRequired</td>
                    </tr>

                }

            </tbody>

JS：

function RowData(Appropriation, PriorityDate, Location, Source, Owner, Use, StartedBy, RequiredReporting) {
    var self = this;

    self.Appropriation = ko.observable(Appropriation);
    self.PriorityDate = ko.observable(PriorityDate);
    self.Location = ko.observable(Location);
    self.Source = ko.observable(Source);
    self.Owner = ko.observable(Owner);
    self.Use = ko.observable(Use);
    self.StartedBy = ko.observable(StartedBy);
    self.RequiredReporting = ko.observable(RequiredReporting);
}

function Step3ViewModel() {
    var self = this;

    self.ApprTable = ko.observableArray();
    self.ApprTable.push(RowData());
    self.submit = function (buttonid) {
        var ApprData = ko.toJSON(self.ApprTable());

        $.post("/Step/Step4", { "AD": ApprData }, function (data) {
        }, 'json');
    }

}

ko.applyBindings(new Step3ViewModel());

Answer 1

您通过调用RowData构造函数创建单个元素可观察数组，但您没有传递任何参数。

self.ApprTable = ko.observableArray([new RowData()]);

函数定义需要很多参数

function RowData(Appropriation, PriorityDate, Location, Source, Owner, Use, StartedBy, RequiredReporting)

您实际上并没有将任何数据放入可观察数据中。

Answer 2

你正在混合这些东西。如果要从剃刀数据初始化视图，可以通过两种方式完成：

首先，在控制器中生成JSON并使用“knockout-mapping”插件将其加载到淘汰视图模型，例如您的视图可能包含：

<script>
    $(function () {
        ko.mapping.fromJS(@Html.Raw(ViewBag.jmodel), null, viewModel);
    });
</script>

当然，您应该在控制器中准备ViewBag.jmodel，如下所示：

JsonSerializer js = JsonSerializer.Create(new JsonSerializerSettings());
var jw = new StringWriter();
js.Serialize(jw, <your object here>);
ViewBag.jmodel = jw.ToString();

其他方法是生成将按照您尝试的方式逐行添加数据的代码：

var viewModel=new Step3ViewModel();
ko.applyBindings(viewModel);

@for (int i = 0; i < UserWRInfo.Count; i++)
{
  viewModel.ApprTable.push(new RowData(@UserWRInfo[i].AppropriationNumber, /*other values here to create full row of data row*/)
}

这种方式会生成与数据集中一样多的viewModel.ApprTable.push(...)行。

当然，带有数据和敲除绑定的表格不应包含任何剃刀代码!!!

<tbody data-bind="foreach:ApprTable">
...
    <td style="text-align: center" data-bind="value: Appropriation"></td>
...
</tbody>

如何将数据从Razor绑定到Knockout？

2 个答案: