Handsontable Get Data MVC

Reply

Aliyilmaz

Member

22 Points

312 Posts

Handsontable Get Data MVC

Apr 03, 2019 05:05 PM|Aliyilmaz|LINK

Hi,

I am using https://handsontable.com . But how can I get data with MVC ? Can anyıne help me please.

HTML

<div id="hot"></div>

MVC CS

 public JsonResult Tables()
        {
            using (PortfoliosContext port = new PortfoliosContext())
            {
                var dil = port.TProjeCategory.AsQueryable().ToList();
                ViewBag.Cat = dil;

                return Json(dil);
            }
        }

JS

<script>
    (function ($) {
        if ($) {
            var hst = (function () {
                var $container = $("#hot");

                $container.handsontable({
                    startRows: 8,
                    startCols: 6,
                    rowHeaders: true,
                    colHeaders: true,
                    minSpareRows: 1,
                    contextMenu: true
                });

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

                var $dataLocker = $("#Tables").val();

                if ($dataLocker.length > 0) {
                    var data = JSON.parse($dataLocker);

                    hst.loadData(data);
                }
                return hst;
            })();

      
        }
    })(jQuery);
</script>

Software Developer
https://www.portakalahsap.com
https://www.portakalahsap.com/ofis-mobilyalari

Reply

Nan Yu

All-Star

18815 Points

3831 Posts

Re: Handsontable Get Data MVC

Apr 04, 2019 01:50 AM|Nan Yu|LINK

Hi Aliyilmaz,

The basic idea is to use Jquery Ajax to call server side function and return json data :

jQuery.ajax({
            url: '/Home/GetCar', //Controller to Get the 
            //JsonResult From -- Json(jsonData, JsonRequestBehavior.AllowGet);
            type: "GET",
            dataType: "json",
            contentType: 'application/json; 
            charset=utf-8', // dataType and contentType should be json
            async: true,
            processData: false,
            cache: false,
            success: function (data) {      // on Success send the Json data 
            					// to the table by using loaddata function""
                //alert(data);
                hot.loadData(data);
                exampleConsole.innerHTML = 'Data loaded';
            },
            error: function (xhr) {
                alert('error');
            }
        });

Please take a look at this example for more details on how to implement "Handsontable" with MVC

http://www.codeproject.com/Tips/1074230/Load-and-save-Handsontable-data-from-to-Controller

Best Regards,

Nan Yu

Reply

fatihbarut

Member

92 Points

534 Posts

Re: Handsontable Get Data MVC

Apr 06, 2019 11:08 AM|fatihbarut|LINK

Don't know handsontable but if you need to get data from an MVC controller just follow this technique.

Lets say you use Entity frame work and you simply need Turkiye'nin Illeri list. Make a controller like this.

    public IList<string> TumIllerListesi()
        {
            return _context.Set<Iller>().Select(u => u.Il).ToList();
        }

now use jquery $.get method to get that list as data

 $.get('/MyController/TumIllerListesi', function (data) {

//do what ever you want with that list in here
})

If you need data as json (probably you will need it for handsome one :) you need to convert It to json like below

       public IActionResult BenimAction(int EvrakId)
        {
            Evraklar EvrakBilgileri = _context.Set<Evraklar>().Find(EvrakId);

            return Json(EvrakBilgileri);
        }

and this time you need to use getJson instead of simple get

  $.getJSON("/MyController/MyAction" {EvrakId:document.getElementybyId('MyEvrakId').value}, function (data) {
//bla bla bla
})

Reply

Aliyilmaz

Member

22 Points

312 Posts

Re: Handsontable Get Data MVC

Apr 07, 2019 10:55 AM|Aliyilmaz|LINK

I try this but it doesnt work,

I get error below code. "Uncaught TypeError: Cannot read property 'addEventListener' of undefined"

Handsontable.Dom.addEvent(load, 'click', function () {

    <script type="text/javascript">

    // Variables declaration & to make our life easier we set our HTML tags to variables too
    var
        $$ = function(id) {return document.getElementById(id);},
        container = $$('example1'),
        exampleConsole = $$('example1console'),
        autosave = $$('autosave'),
        save = $$('save'),
        load = $$('load'),
        autosaveNotification,
        hot;

    hot = new Handsontable(container, {
        startRows: 8,
        startCols: 6,
        rowHeaders: true,
        colHeaders: true,
        // This is for the AutoSave func
        afterChange: function(change, source) {
            if (source === 'loadData') {
                return; //don't save this change
            }
            if (!autosave.checked) {
                return;
            }
            clearTimeout(autosaveNotification);
            jQuery.ajax({
                url: '@Url.Action("AddCar")',
                type: "POST",
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(hot.getData()),
                async: true,
                processData: false,
                cache: false,
                success: function (data) {
                    exampleConsole.innerHTML = 'Changes will be autosaved';
                    autosaveNotification = setTimeout(function () {
                        exampleConsole.innerHTML = 'Autosaved (' + change.length +
                        ' ' + 'cell' +
                        (change.length > 1 ? 's' : '') + ')';
                    }, 1000);
                    //alert(data);
                },
                error: function(xhr) {
                    exampleConsole.innerHTML = 'Autosave: No Response from Controller';
                    //alert('error');
                }
            });
        }
      // End of AutoSave func
    });

    // GET method gets data from the Controller
    Handsontable.Dom.addEvent(load, 'click', function () {
        jQuery.ajax({
            url: '/Home/GetData', //Controller to Get the
            			//JsonResult From -- Json(jsonData, JsonRequestBehavior.AllowGet);
            type: "GET",
            dataType: "json",
            contentType: 'application/json',          
            async: true,
            processData: false,
            cache: false,
            success: function (data) {      // on Success send the Json data
            					// to the table by using loaddata function""
                //alert(data);
                hot.loadData(data);
                exampleConsole.innerHTML = 'Data loaded';
            },
            error: function (xhr) {
                alert('error');
            }
        });

        // POST method gets data to the Controller
        Handsontable.Dom.addEvent(save, 'click', function () {
            jQuery.ajax({
                url: '/Home/AddCar',
                type: "POST",
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(hot.getSourceData()),
                async: true,
                processData: false,
                cache: false,
                success: function (data) {
                    exampleConsole.innerHTML = 'Data saved';
                    //alert(data);
                },
                error: function (xhr) {
                    exampleConsole.innerHTML = 'Save error';
                    //alert('error');
                }
            });
        });

        Handsontable.Dom.addEvent(autosave, 'click', function() {
            if (autosave.checked) {
                exampleConsole.innerHTML = 'Changes will be autosaved';
            }
            else {
                exampleConsole.innerHTML = 'Changes will not be autosaved';
            }
        });
    });

    </script>

Software Developer
https://www.portakalahsap.com
https://www.portakalahsap.com/ofis-mobilyalari