Как вы представляете массив JSON в виде HTML - PullRequest
0 голосов
/ 16 января 2019

Примечание: я также использую шаблон AspNetBoilerplate и Mecons тегов помощников, поэтому bc- атрибуты и form-group теги действительны.

Я пытаюсь опубликовать модель в одной из своих служб приложений. Но я получаю следующие ошибки

"Во время проверки были обнаружены следующие ошибки. ↵ - Невозможно десериализовать текущий объект JSON (например, {"name": "value"}) в тип 'System.Collections.Generic.IList`1 [App.Stores.StoreWalk.Dtos.CreateOrEditStoreWalkCategoryDto]', поскольку тип требует JSON массив (например, [1,2,3]) для правильной десериализации. FixЧтобы исправить эту ошибку, либо измените JSON на массив JSON (например, [1,2,3]), либо измените десериализованный тип так, чтобы это был нормальный тип .NET (например, не примитивный тип, такой как целое число, а не тип коллекции). как массив или список), который может быть десериализован из объекта JSON. JsonObjectAttribute также можно добавить к типу, чтобы заставить его десериализоваться из объекта JSON. AthPath «category.0», строка 1, позиция 84. Message "message:" Ваш запрос недействителен! "ValidationErrors: [{…}] proto : Объект

Я понимаю, что означает ошибка, я просто не знаю, как исправить мой код.

Из 2 рекомендаций To fix this error either change the JSON to a JSON array (e.g. [1,2,3]) будет тем путем, по которому я должен идти.

Возможно, неуместно, но я играл со своим кодом и заметил, что когда я удаляю @i и @j из моего атрибута name, я могу опубликовать сообщение успешно, но мои радиокнопки утратили все функциональные возможности (изменение второй строки) первая строка из-за конфликта имен), я также думаю, что индекс будет необходим, чтобы сохранить их уникальность (я все еще учусь, поправьте меня, если я ошибаюсь).

Строка json, которую я отправляю обратно, создается путем вызова $('form[name=StoreWalkForm]').serializeFormToObject(), который выглядит как показано ниже и использует https://github.com/marioizquierdo/jquery.serializeJSON

$.fn.serializeFormToObject = function() {
    var $form = $(this);
    var fields = $form.find('[disabled]');
    fields.prop('disabled', false);
    var json = $form.serializeJSON();
    fields.prop('disabled', true);
    return json;
};

JSON

{
  "version": "2",
  "department": {
    "id": "8",
    "name": "ISF"
  },
  "store": "001",
  "categories": {
    "0": {
      "category": {
        "id": "4"
      },
      "questions": {
        "0": {
          "question": {
            "question": "SIGNAGE",
            "id": "233"
          },
          "answer": {
            "boolValue": "false",
            "comments": "1"
          }
        },
        "1": {
          "question": {
            "question": "PARKING LOT BLACKTOP",
            "id": "234"
          },
          "answer": {
            "boolValue": "true",
            "comments": "2"
          }
        }
      }
    }
  },
  "comments": "123",
  "signature": ""
}

Модель класса

public class CreateOrEditStoreWalkDto : EntityDto<int?>
{
    [Required]
    public string Store { get; set; }

    public string Comments { get; set; }

    public byte[] Signature { get; set; }

    public int Version { get; set; }

    public DepartmentsDto Department { get; set; }

    public IList<CreateOrEditStoreWalkCategoryDto> Categories { get; set; } = new List<CreateOrEditStoreWalkCategoryDto>();
}

public class CreateOrEditStoreWalkCategoryDto
{
    public CategoriesDto Category { get; set; }
    public IList<CreateOrEditStoreWalkQuestionDto> Questions { get; set; } = new List<CreateOrEditStoreWalkQuestionDto>();
}

public class CreateOrEditStoreWalkQuestionDto
{
    public QuestionsDto Question { get; set; }
    public AnswersDto Answer { get; set; }
}
CSHtml
    <form name="StoreWalkInformationsForm" role="form" enctype="multipart/form-data" novalidate class="form-validation">

        @if (Model.IsEditMode)
        {
            <input type="hidden" name="id" value="@Model.StoreWalk.Id" />
        }

        <input type="hidden" name="version" value="@Model.StoreWalk.Version" />
        <input type="hidden" name="department[id]" value="@Model.StoreWalk.Department.Id" />
        <input type="hidden" name="department[name]" value="@Model.StoreWalk.Department.Name" />

        <form-group>
            <select id="StoreWalk_Store" name="store" bc-label="@L("Store")" required="required" bc-required="true" bc-validation="true" value="@Model.StoreWalk.Store" maxlength="@App.Stores.StoreWalk.EntriesConsts.MaxStoreLength" minlength="@App.Stores.StoreWalk.EntriesConsts.MinStoreLength">
                @if (!Model.IsEditMode)
                {
                    <option value="" selected="selected"></option>
                }
            </select>
        </form-group>

        <br /><br />

        @for (var i = 0; i < Model.StoreWalk.Categories.Count; i++)
        {
            <h5 class="m--font-primary">@Model.StoreWalk.Categories[i].Category.Name</h5>
            <input type="hidden" name="categories[@i][category][id]" value="@Model.StoreWalk.Categories[i].Category.Id" />

            <table bc-responsive="true">
                <thead>
                    <tr>
                        <th>#</th>
                        <th scope="col">Question</th>
                        <th scope="col"></th>
                        <th scope="col">Comments</th>
                    </tr>
                </thead>

                <tbody>
                    @*@for (var j = 0; j < Model.StoreWalk.Categories[i].Questions.Count; j++)*@
                        @for (var j = 0; j < 2; j++)
                        {
                            <tr>
                                <td>@(q.Next()).</td>
                                <td scope="row">
                                    <form-group>
                                        <input type="hidden" name="categories[@i][questions][@j][question][question]" value="@Model.StoreWalk.Categories[i].Questions[j].Question.Question" bc-label="@Model.StoreWalk.Categories[i].Questions[j].Question.Question" />
                                        <input type="hidden" name="categories[@i][questions][@j][question][id]" value="@Model.StoreWalk.Categories[i].Questions[j].Question.Id" />
                                        <br />
                                        @Html.TextBoxFor(m => m.StoreWalk.Categories[i].Questions[j].S3Files, new { type = "file", multiple = "multiple" })
                                    </form-group>
                                </td>
                                <td>
                                    <form-group>
                                        <radio-list bc-required="true" bc-validation="true" id="categories[@i][questions][@j][answer][boolValue]">
                                            <input type="radio" name="categories[@i][questions][@j][answer][boolValue]" value="true" bc-label="@L("Yes")" required="required" />
                                            <input type="radio" name="categories[@i][questions][@j][answer][boolValue]" value="false" bc-label="@L("No")" required="required" />
                                        </radio-list>
                                    </form-group>
                                </td>
                                <td>
                                    <form-group>
                                        <textarea name="categories[@i][questions][@j][answer][comments]" rows="3">@Model.StoreWalk.Categories[i].Questions[j].Answer.Comments</textarea>
                                    </form-group>
                                </td>
                            </tr>
                        }
                </tbody>
            </table>
        }


        <form-group>
            <textarea class="form-control" id="StoreWalk_Comments" type="text" name="comments" bc-label="@L("Comments")" rows="4">@Model.StoreWalk.Comments</textarea>
        </form-group>

        <form-group>
            <label for="signature">@L("Signature")</label>
            @Html.Partial("~/Areas/Shared/Views/Shared/SignaturePad/Edit.cshtml", new SignaturePadModel()
            {
                Id = "signature",
                Data = Model.StoreWalk.Signature,
                FooterText = L("Signature"),
                Required = true
            })
        </form-group>
    </form>

1 Ответ

0 голосов
/ 16 января 2019

Pass {useIntKeysAsArrayIndex: true} в $form.serializeJSON().

$.fn.serializeFormToObject = function() {
    var $form = $(this);
    var fields = $form.find('[disabled]');
    fields.prop('disabled', false);

 // var json = $form.serializeJSON();
    var json = $form.serializeJSON({useIntKeysAsArrayIndex: true});

    fields.prop('disabled', true);
    return json;
};

С https://github.com/marioizquierdo/jquery.serializeJSON ссылка на вопрос:

? Использование целочисленных ключей в качестве индексов массива

<form>
  <input type="text" name="arr[0]" value="foo"/>
  <input type="text" name="arr[1]" value="var"/>
  <input type="text" name="arr[5]" value="inn"/>
</form>
$('form').serializeJSON();

// arr is an object =>
{'arr': {'0': 'foo', '1': 'var', '5': 'inn' }}
$('form').serializeJSON({useIntKeysAsArrayIndex: true});

// arr is an array =>
{'arr': ['foo', 'var', undefined, undefined, undefined, 'inn']}
...