problem passing Model for TagHelper Asp.Net Core grid project

[nagostoniParticipant]

Hi,
i’m triying to use jqgrid control in Asp.NetCore Project using newly TagHelper version

I referenced all css / js / styles files and if i do not pass ‘Model’ i see an empty grid. This seems to me that all elements are correctly referenced.
The problem grow passing model data to che control.
i’m reading data from a sample MySql Db and even it seems to me to have correctly performed all steps as sample code it doesnt show as soon as i add “source” ref.

Here are my model + view + control code:

====================================================================================================================================================
MODEL FILE:

using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

 public class RisultatoRicercaBranoDB
    {
        public string TitoloBrano { get; set; }
        public int IDautore { get; set; }
        public string NomeAutore { get; set; }
               
        [Key]
        public int IDbrano { get; set; }
    }

======================================================================================================================================================
CONTROLLER FILE :

public IActionResult MyRicercadb()
        {
            List<RisultatoRicercaBranoDB> vm = new List<RisultatoRicercaBranoDB>();

            string connectionString = "Server = localhost; Port = 3306; Database = myDB; Uid = root; Pwd = ''";
            MySqlConnection conn2DB = new MySqlConnection(connectionString);
            conn2DB.Open();
            string sql = "SELECT nFALDONE, Titolo, Autore , IDparte FROM parti ";
            MySqlCommand cmd = new MySqlCommand(sql, conn2DB);
            MySqlDataReader reader = cmd.ExecuteReader();

            if (reader.HasRows)
            {
                while (reader.Read())
                {
                    vm.Add(new RisultatoRicercaBranoDB()
                    {
                        IDautore = System.Convert.ToInt32(reader["Nfaldone"]),
                        NomeAutore = reader["Autore"].ToString(),
                        TitoloBrano = reader["Titolo"].ToString(),
                        IDbrano = System.Convert.ToInt32(reader["IDparte"])
                    });
                }
                ViewBag.caso = "conRecords";
            }
            else
            {
                ViewBag.caso = "senzaRecords";
            }
            conn2DB.Close();
            ViewBag.tema = "energyblue";
            return View("MyRicercaDB", vm.ToList());
        }

========================================================================================================================================================
VIEW FILE :

<script src="~/lib/jqwidgets/jqxbuttons.js"></script>
<script src="~/lib/jqwidgets/jqxscrollbar.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.edit.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.filter.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.selection.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.sort.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.pager.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.aggregates.js"></script>
<script src="~/lib/jqwidgets/jqxgrid.grouping.js"></script>
<script src="~/lib/jqwidgets/jqxmenu.js"></script>
<script src="~/lib/jqwidgets/jqxlistbox.js"></script>
<script src="~/lib/jqwidgets/jqxdropdownlist.js"></script>
<link href="~/lib/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet" />

@model IEnumerable<MyFirstMVCapp.Models.RisultatoRicercaBranoDB>

@using jQWidgets.AspNetCore.Mvc.TagHelpers;
@{
    ViewData["Title"] = "My Ricerca DB";
}

<h1> @ViewBag.caso </h1>

<jqx-grid id="griglia" alt-rows="true" show-header="true" show-status-bar="true" pageable="true" sortable="true" filterable="true"
          auto-height="true" width="850"
          source="Model"  server-processing="true">
    <jqx-grid-columns>
        <jqx-grid-column datafield="TitoloBrano" width="150"></jqx-grid-column>
        <jqx-grid-column datafield="IDautore" width="150"></jqx-grid-column>
        <jqx-grid-column datafield="NomeAutore" width="200"></jqx-grid-column>
        <jqx-grid-column datafield="IDbrano" width="150"></jqx-grid-column>
    </jqx-grid-columns>
</jqx-grid>

=====================================================================================================================================================
RESULT: Grid doesn’t show but lookin inside the result page code we have:

…
<h1> conRecords </h1>

<jqx-grid><div alt-rows=”True” auto-height=”True” filterable=”True” id=”griglia” pageable=”True” server-processing=”True” show-header=”True” show-status-bar=”True” sortable=”True” source=”System.Collections.Generic.List`

1[MyFirstMVCapp.Models.RisultatoRicercaBranoDB]” width=”850″></div>
<script type=’text/javascript’>$(function () {var source = { dataFields: [ { name: ‘TitoloBrano’, type: ‘string’}, { name: ‘IDautore’, type: ‘number’}, { name: ‘NomeAutore’, type: ‘string’}, { name: ‘IDbrano’, type: ‘number’}], dataType: ‘array’, localData: [{ ‘TitoloBrano’: ‘WE ARE THE CHAMPIONS’, ‘IDautore’: 8, ‘NomeAutore’: ‘FREDDY MERCURY’, ‘IDbrano’: 1 }, { ‘TitoloBrano’: ‘THE SHOW MUST GO ON’, ‘IDautore’: 12, ‘NomeAutore’: ‘QUEEN’, ‘IDbrano’: 3 }], beforeprocessing: function(data) { source.totalrecords = data.;}, sort: function(data) { $(‘#griglia’).jqxGrid(‘updatebounddata’, ‘sort’); }, filter: function(data) { $(‘#griglia’).jqxGrid(‘updatebounddata’, ‘filter’); }}; var adapter = new $.jqx.dataAdapter(source);var griglia= new jqxGrid($(‘#griglia’), { altRows: true, showHeader: true, showStatusBar: true, pageable: true, sortable: true, filterable: true, autoHeight: true, width: 850, columns: [{ dataField: ‘TitoloBrano’, width: 150 }, { dataField: ‘IDautore’, width: 150 }, { dataField: ‘NomeAutore’, width: 200 }, { dataField: ‘IDbrano’, width: 150 }], virtualMode: true, renderGridRows: function(obj) {return obj.data;}, source: adapter });});</script></jqx-grid>

where am i wrong ?
thank you in advance.
Nicola

[HristoParticipant]

Hello Nicola,

Is there any error message?
I saw your case and it looks fine.
Please, take a look at this tutorial.
Also, I would like to suggest you try the demons that we provide with the download package.
The demos related to TagHelpers could be found in the “demos” folder inside the “ASP.NET Tag Helpers” sub-folder.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts