Cannot pass list of objects from view to controller via Ajax[Answered] RSS

• • Reply
  eric.bryan

  Member

  3 Points

  39 Posts

  Cannot pass list of objects from view to controller via Ajax

  Nov 24, 2020 01:57 PM|eric.bryan|LINK

  Hello everybody,I cannot pass a list of objects to a controller via Ajax.

  However my code is simple :

  Here is the object class : 

  public class OptionDTO
      {
  
          public string ID_OPTION { get; set; }       
          public string LI_VALUE { get; set; }
  
      }

  Here is my view : 
  </div> <div>

  <div class="col-lg-12 col-md-12 col-xs-12" id="divOption">
  
      <table id="TableOption">
         @foreach (var item in Model)
         {
          <tr class="item">
              <td>@item.LI_OPTION</td>
              <td>
                      <input type="text" class="option-value" data-id="@item.ID_OPTION" />
              </td>
          </tr>
         }
      </table>
  </div>
  <input id="ButtonValidate" type="button" value="Validation" onclick="fctValidate()" />
  
      <script>
      
      function fctValidate() {
          var lstOption = [];
          try
          {
              $(".option-value").each(function(){
                  var oOption = new Object();
                  oOption.ID_OPTION = $(this).attr('data-id');
                  oOption.LI_VALUE = $(this).val();
                  lstOption.push(oOption);
              });
          } catch (error) {
              alert(error);
          }
  
          $.ajax({
              type: "POST",
              traditional: true,
              url: '@Url.Action("CreateOption", "CreateOption")',
              data: { "lstOption": lstOption },
              dataType: "json",
              error: function (xhr, status, error) {
                  var err = eval("(" + xhr.responseText + ")");
                  alert(err.Message);
              }
          });
      }
  </script>

  and here is the controller:

      [HttpPost]
      public void CreateOption(List<OptionDTO> lstOption)
      {
         string dd = "";
      }

  
  I fill the input "txt" with values (several rows in the table).

  I have checked in the javascript that the list contains several rows.
  And when I click on the Validation button the code goes to the controller but the parameter lstOption remains empty.
  Could you help me, please ?

  Thanks a lot in advance.

  Eric.

• • Reply
  mgebhard

  All-Star

  52151 Points

  23251 Posts

  Re: Cannot pass list of objects from view to controller via Ajax

  Nov 24, 2020 03:10 PM|mgebhard|LINK

  I built a test based on your code which works as expected.  Compare your code to the the following.

          [HttpGet]
          public IActionResult Index()
          {
              return View();
          }
  
         [HttpPost]
          public ActionResult CreateOption(List<OptionDTO> lstOption)
          {
              return Json(lstOption);
          }

  @{
      ViewData["Title"] = "Index";
  }
  
  <h1>Index</h1>
  
  <div>
      @for (int i = 0; i < 5; i++)
      {
          <input type="text" class="option-value" data-id="@i" value="value @i" />
      }
  
  </div>
  <div>
      <input id="ButtonValidate" type="button" value="Validation" onclick="fctValidate()" />
  </div>
  
  @section scripts {
      <script>
         function fctValidate() {
             var lstOption = [];
  
             $(".option-value").each(function () {
              lstOption.push({
                  ID_OPTION: $(this).data('id'),
                  LI_VALUE: $(this).val()
              });
          });
  
             console.log(lstOption);
             $.ajax({
                 type: "POST",
                 url: '@Url.Action("CreateOption")',
                 data: { 'lstOption': lstOption },
              dataType: "json",
              success: function (response) {
                  console.log(response);
              },
              error: function (xhr, status, error) {
                  console.log(err.Message);
              }
          });
      }
      </script>
  }

• • Reply
  bruce (sqlwo...

  All-Star

  57864 Points

  15493 Posts

  Re: Cannot pass list of objects from view to controller via Ajax

  Nov 24, 2020 03:34 PM|bruce (sqlwork.com)|LINK

  Your Ajax call is incorrect. You are doing a form post, which is name / value pairs. The to string of lstOptions is not what you want. Using the browsers network debugger would have shown this. Try sending as json

          $.ajax({
              type: "POST",
              traditional: true,
              url: '@Url.Action("CreateOption", "CreateOption")',
              data: JSON.stringify(lstOption),
              contentType: “application/json”,
              dataType: "json",
              error: function (xhr, status, error) {
                  var err = eval("(" + xhr.responseText + ")");
                  alert(err.Message);
              }
          });

  Also you should not use eval().

  bruce (sqlwork.com)
• • Reply
  eric.bryan

  Member

  3 Points

  39 Posts

  Re: Cannot pass list of objects from view to controller via Ajax

  Nov 24, 2020 08:46 PM|eric.bryan|LINK

  mgebhard, bruce :
  Thank you for your answers.
  I will check them and will let you know.
  Eric.

• • Reply
  YihuiSun

  Contributor

  2380 Points

  683 Posts

  Re: Cannot pass list of objects from view to controller via Ajax

  Nov 25, 2020 05:26 AM|YihuiSun|LINK

  Hi eric.bryan, 

  I have another solution, you can refer to it.

  Controller

      public class TestAjaxController : Controller
      {
          // GET: TestAjax
          public ActionResult Index()
          {
              //Here is the test data
              var data = new List<OptionDTO>
              {
                  new OptionDTO{ ID_OPTION="ID_OPTION1",LI_VALUE="LI_VALU1"},
                  new OptionDTO{ ID_OPTION="ID_OPTION2",LI_VALUE="LI_VALU2"},
                  new OptionDTO{ ID_OPTION="ID_OPTION3",LI_VALUE="LI_VALU3"},
                  new OptionDTO{ ID_OPTION="ID_OPTION4",LI_VALUE="LI_VALU4"}
              };
              return View(data);
          }
          [HttpPost]
          public void CreateOption(List<OptionDTO> lstOption)
          {
              string dd = "";
          }
      }

  View

  @model IEnumerable<DailyMVCDemo.Models.OptionDTO>
  <div class="col-lg-12 col-md-12 col-xs-12" id="divOption">
      <form id="testform">
          <table id="TableOption">
              @for (var i = 0; i <Model.ToList().Count(); i++)
              {
                  <tr class="item">
                      <td>
                          @Html.DisplayTextFor(m => Model.ToList()[i].ID_OPTION)
                          @Html.HiddenFor(m => Model.ToList()[i].ID_OPTION)
                      </td>
                      <td>
                          @Html.TextBoxFor(m => Model.ToList()[i].LI_VALUE)
                      </td>
                  </tr>
              }
          </table>
      </form>
  </div>
  <input id="ButtonValidate" type="button" value="Validation" onclick="fctValidate()" />
  @section scripts{
      <script>
          function fctValidate() {
              $.ajax({
              type: "POST",
              traditional: true,
              url: '@Url.Action("CreateOption", "TestAjax")',
              data: $("#testform").serialize(),
              dataType: "json",
              error: function (xhr, status, error) {
                  var err = eval("(" + xhr.responseText + ")");
                  alert(err.Message);
              }
          });
      }
      </script>
  }

  Here is the result. 

  

  Best Regards,

  YihuiSun

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  eric.bryan

  Member

  3 Points

  39 Posts

  Re: Cannot pass list of objects from view to controller via Ajax

  Nov 25, 2020 09:53 AM|eric.bryan|LINK

  Bruce, YihuiSun :
  Thank you very much for your answers.
  I have checked mgebhard answer and it works, it suits my needs.