来自 JSON GET 调用的淘汰赛和部分视图

Question

我对@9​​87654322@ 很陌生。我想用 JSON GET 检索部分视图和所有带有验证的绑定。

我的模特：

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/

Answer 1

我正在使用这样的东西：

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; }

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