как привязать данные JSON к существующей модели представления - mvc5 - PullRequest
Новая
       35

как привязать данные JSON к существующей модели представления - mvc5

1 голос
/ 18 мая 2019

У меня есть длинная строго типизированная форма, входы которой связаны с viewmodel как помощники html, в то время как у меня есть таблица, которая не строго типизирована, она генерируется, когда пользователь нажимает кнопку Добавить, и я собираю данные в виде json.Как отобразить данные JSON в viewmodel и отправить как одно устройство для публикации действий в контроллере в вызове ajax?

view 

@model SIServices.ViewModels.SODViewModel
@using (Html.BeginForm("Initiate", "SOD", FormMethod.Post, new { id = 
  "initiateSOD" })) // enctype = "multipart/form-data"
 {
      @Html.AntiForgeryToken()

      ...

      @* form inputs as html helpers *@
      @* html table data is collected as json *@

javasctipt 

   var cols = [];
   cols.push("DIGITAL_FILE_TYPE_ID");
   cols.push("DOCUMENT_LAPI_ID");
   var DigitalMaps = [];
   $("table#digital-map-table tbody tr").each(function () {
   data = {};

   var selectedDigitalMapVal = $(this).data("selectedDigitalMapVal");
   data[cols[0]] = selectedDigitalMapVal;
   var documentId = $(this).data("documentID");
   data[cols[1]] = documentId.toString();                       
   DigitalMaps.push(data);
   data = {};

   });

    var headers = { __RequestVerificationToken: 
      $('input[name="__RequestVerificationToken"]').val() };

                if (DigitalMaps != null) {
                    $.ajax({
                        headers: headers,
                        url: "@Url.Action("Initiate")",
                        type: "POST",
                        cache: false,
                        contentType: "application/json; charset=utf-8",
                        data: DigitalMaps,
                        dataType: "json",
                        success: function (succ) {
                            console.log(succ);
                        },
                        error: function (err) {
                            console.log(err.statusText);
                        }
                    });
                }

viewmodel 

   namespace SIServices.ViewModels
   {
       public class SODViewModel
       {
          // a lot of properties - around 50
          public int? DigitalMapId { get; set; }
          public List<DIGITAL_MAPS> DigitalMaps { get; set; }

контроллер 

    [HttpPost]
    [ValidateHeaderAntiForgeryToken]
    public ActionResult Initiate(SODViewModel vm)
    {

1 Ответ

0 голосов
/ 19 мая 2019

У вас есть форма, поддерживаемая моделью представления, которую необходимо преобразовать в объект JavaScript, чтобы вы могли присоединить массив DigitalMaps.

Для решения первой проблемы вы можете использовать один из ответов здесь Преобразовать данные формы в объект JavaScript с помощью jQuery .

Ниже я использую функцию отсюда https://stackoverflow.com/a/22420377/2030565. Это работало в простой форме, но я не пытался найти крайние случаи. 

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Таким образом, мы можем захватить форму и преобразовать ее в объект JavaScript: 

var model = $("form").serializeObject();

Теперь мы можем прикрепить свойство для коллекции: 

var digitalMapRows = [];
model.DigitalMaps = digitalMapRows;

Тогда пост с ajax 

$.ajax({
    headers: headers,
    url: "@Url.Action("Initiate")",
    type: "POST",
    cache: false,
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(model),
    dataType: "json",
    success: function (succ) {
        console.log(succ);
    }        
});
...