locked
How can I send an array of my handsontable data to the controller? RRS feed

  • Question

  • User-1757935082 posted

    Hi, I’m trying to get the contents of my handsontable and post it to a controller action.  The table loads ok and the action is called but I get nothing in the in the object parameter of the action.  

    Here’s my view:

    <script src="../../Scripts/jquery.min.js" type="text/javascript"></script>

    <script src="../../Scripts/jquery-ui.custom.js" type="text/javascript"></script> 

    <script src="../../Scripts/jquery.handsontable.full.js" type="text/javascript"></script>

     

    <script src="../../Scripts/numeral.sv-se.js" type="text/javascript"></script>

     

    <link href="../../Content/themes/base/jquery-ui.custom.css" rel="stylesheet" type="text/css" />

    <link href="../../Content/themes/base/jquery.handsontable.full.css" rel="stylesheet" type="text/css" />

    <link href="../../Content/themes/base/demo-style.css" rel="stylesheet" type="text/css" />

     

    <script type="text/javascript">

        $(function () {

            var $container = $("#myHandsonTable");

            $container.handsontable({

                startRows: 15,

                startCols: 16,

                rowHeaders: true,

                colHeaders: true,

                useFormula: true,

                minSpareCols: 1,

                minSpareRows: 1,

                contextMenu: true,

     

                outsideClickDeselects: false,

                removeRowPlugin: true,

                useFormula: true

            });

     

            var data = [

      ["", "Kia", "Nissan", "<st1:city w:st="on"><st1:place w:st="on">Toyota</st1:place></st1:city>", "Honda"],

      ["2008", 10, 11, 12, 13],

      ["2009", 20, 11, 14, 13],

      ["2010", 30, 15, 12, 13]

    ];

     

            $container.handsontable("loadData", data);

     

           var handsontable = $container.data('handsontable');

     

            $("#save").click(function () {

     

                console.log(handsontable.getData())

                var myData = handsontable.getData();

                myData = JSON.stringify(myData)

                $.ajax({

                    url: "/Home/tableData",

                    type: "POST",

                    contentType: 'application/json',

                    data: myData,

                    dataType: 'json',

                    success: function (data) {

                        alert(data);

                    }

                });

            });

        });

    </script>

        <button id="save">Save</button>

     

    Here’s my controller:

    using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.Mvc;

     

    namespace HandsonTable.Controllers

    {

        public class HomeController : Controller

        {

            public ActionResult Index()

            {

                ViewBag.Message = "Welcome to ASP.NET MVC!";

     

                return View();

            }

     

         

            [HttpPost]

            public ActionResult tableData(Object data)

            {

                return View();

            }

        }

    }

     Why is the array of data not being sent to the controller action?  I appreciate any help with this solution.  Thanks!

     

     

     

    Monday, March 24, 2014 2:53 AM

Answers

  • User-417640953 posted

    Why is the array of data not being sent to the controller action?  I appreciate any help with this solution.  Thanks!

    Hi Alexander,

    Thank you post the issue to asp.net forum.

    If you want to set below array to action, please change your ajax code like below.

    var data = [
    
      ["", "Kia", "Nissan", "Toyota", "Honda"],
    
      ["2008", 10, 11, 12, 13],
    
      ["2009", 20, 11, 14, 13],
    
      ["2010", 30, 15, 12, 13]
    
    ];
    
         $.ajax({
    
                    url: "/Home/tableData",
    
                    type: "POST",
    
                    contentType: 'application/json',
    
                    data:JSON.stringify({ data: data }),,
    
                    dataType: 'json',
    
                    success: function (data) {
    
                        alert(data);
    
                    }
    
                });
    

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 25, 2014 5:06 AM

All replies

  • User-417640953 posted

    Why is the array of data not being sent to the controller action?  I appreciate any help with this solution.  Thanks!

    Hi Alexander,

    Thank you post the issue to asp.net forum.

    If you want to set below array to action, please change your ajax code like below.

    var data = [
    
      ["", "Kia", "Nissan", "Toyota", "Honda"],
    
      ["2008", 10, 11, 12, 13],
    
      ["2009", 20, 11, 14, 13],
    
      ["2010", 30, 15, 12, 13]
    
    ];
    
         $.ajax({
    
                    url: "/Home/tableData",
    
                    type: "POST",
    
                    contentType: 'application/json',
    
                    data:JSON.stringify({ data: data }),,
    
                    dataType: 'json',
    
                    success: function (data) {
    
                        alert(data);
    
                    }
    
                });
    

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 25, 2014 5:06 AM
  • User-1757935082 posted

    Hi Fuxiang.  It calls the action but nothing is sent.. Should I be soing something different in the controller to receive the data?

    Tuesday, March 25, 2014 11:07 AM
  • User-1757935082 posted

    Thanks Fuxiang.. It worked when i added contentType:. 'application/json, charset=UTF-8' .

    Tuesday, March 25, 2014 11:56 AM