首页 文章

来自JSON GET调用的Knockout和部分视图

提问于
浏览 次
0

我很新 KnockoutJS

我想用JSON GET retreieve部分视图和所有绑定验证 .

我的型号：

public class MyFormModel
    {
        [Required]
        [Range(typeof(Decimal), "1", "9999")]
        [Display(Name = Translations.WorkReport.PRICE_PER_UNIT)]
        //[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#,##}")] 
        public decimal Price { get; set; }

        [Required]
        [Range(typeof(Decimal), "1", "9999")]
        [Display(Name = Translations.WorkReport.QUANTITY)]
        //[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#,##}")]  
        public decimal Quantity { get; set; }
...

我的控制器：

[HttpGet]
        public virtual PartialViewResult GetDataByGroupId(int groupId)
        {
...
var view = PartialView("WorkReportResult", createWorkReportsListFormModel);
return view
}

我的部分观点：

@for (int i = 0; i < Model.WorksReportsFormModel.WorkReportViewModelList.Count; i++)
{
    <tr>
        <td class="center">
            @Html.ValidationMessageFor(modelItem => Model.WorksReportsFormModel.WorkReportViewModelList[i].WorkReportFormModel.Price)
            @Html.TextBoxFor(modelItem => Model.WorksReportsFormModel.WorkReportViewModelList[i].WorkReportFormModel.Price,
                new
                {
                    @Value = Model.WorksReportsFormModel.WorkReportViewModelList[i].WorkReportFormModel.Price != 0 ? Model.WorksReportsFormModel.WorkReportViewModelList[i].WorkReportFormModel.Price.ToString() : "",
                    id = @Html.RenderNumbers("Price", i),
                    @class = "input-small focused"
                })
        </td>
        <td class="center">
            @Html.ValidationMessageFor(modelItem => Model.WorksReportsFormModel.WorkReportViewModelList[i].WorkReportFormModel.Quantity)
            @Html.TextBoxFor(modelItem => Model.WorksReportsFormModel.WorkReportViewModelList[i].WorkReportFormModel.Quantity,
                new
                {
                    @Value = Model.WorksReportsFormModel.WorkReportViewModelList[i].WorkReportFormModel.Quantity != 0 ? Model.WorksReportsFormModel.WorkReportViewModelList[i].WorkReportFormModel.Quantity.ToString() : "",
                    id = @Html.RenderNumbers("Quantity", i),
                    @class = "input-small focused"
                })
        </td>

我的正常观点：

<table class="table table-striped table-bordered bootstrap-datatable datatable dataTable grid-table" id="students">
    <thead>
        <tr>
            <th class="grid-header"><div class="grid-header-title">Price</div></th>
            <th class="grid-header"><div class="grid-header-title">Wuantity</div></th>
        </tr>
    </thead>
    <tbody id="content">

    </tbody>
</table>

和我的JQUERY从这个视图调用来检索局部视图：

$.ajax({
                type: 'GET',
                timeout: 30000,
                url: '' + baseurl + '/CustomModel/ManageWorkReport/GetDataByGroupId',
                data: { groupId: value},
                cache: false,
                success: function (data) {
                    if (data) {
                        $("#content").html(data);
                        ...

但是不行，这里没有绑定 . 如何包含 KnockoutJS ？

我发现了这个但是没有用！ https://stevemgentile.wordpress.com/2012/10/07/knockoutjs-asp-net-mvc-partial-view-loading/

jquery asp.net asp.net-mvc knockout.js

1 回答

  • 0

    我正在使用这样的东西：

    var unmapped = ko.mapping.toJS(self.Model);
var unmappedJSON = ko.toJSON(unmapped);

$.ajax({
            url: ...,
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: unmappedJSON,
            success: function (data, textStatus, jqXHR) {
                //var mapping = self.Model.IgnoreMapping();
                var mapping = []
                var viewModel = ko.mapping.fromJS(data, mapping, self.Model);

                // TODO:  Show errors from the server's validation
            }

            error: ...
});

    在ViewModel中我做：

    var vm = new ViewModel();

    var d = @(Html.Raw(Json.Encode(Model))); 
    self.Model = ko.mapping.fromJS(d);

    ko.applyBindings(vm);

    在我的View.cshtml中：

    @Html.LabelFor(model => model.Description, "Description")
        @Html.TextAreaFor(model => model.Description, new { data_bind = "value: Model.Description" })
        @Html.ValidationMessageFor(model => model.Description)

    和模型（在c＃中）：

    [Required]
    public string Description { get; set; }

    我希望这对您的问题有所帮助 .

    回复于

相关问题