Dialog Template Not Work In Net Core 3.0

[luis]

I tried the solution from this thread (https://www.syncfusion.com/forums/141281/implement-dialog-template-under-grid-ejs-grid), but it didn't work. When I click on the Add or Edit button in dialog template.

What am I missing? (I'm using ASP.NET Core 3 EJ2, Views and Controllers, Razor pages, Entity Framework and sql server).

Index

<div>

    <h2> CARGOS</h2>

    <h6> DESCRIPCIÓN </h6>

 

    <ejs-grid id="Grid" locale="es" gridLines="Both" actionFailure="actionFailure" dataBound="dataBound" rowSelected="rowSelected" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Search"})" actionComplete="actionComplete">

        <e-data-manager url="/Cargos/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Cargos/Insert" updateUrl="/Cargos/Update" removeUrl="/Cargos/Delete"></e-data-manager>

        <e-grid-searchsettings fields="@(new string[] { "Codigo","Nombre"})"></e-grid-searchsettings>

        <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" showDeleteConfirmDialog="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>

        <e-grid-pagesettings pageCount="5 "></e-grid-pagesettings>

        <e-grid-columns>

            <e-grid-column field="id" isPrimaryKey="true" visible="false"></e-grid-column>

            <e-grid-column field="codigo" headerText="Código" validationRules="@(new { required=true})" width="20"></e-grid-column>

            <e-grid-column field="nombre" headerText="Nombre" validationRules="@(new { required=true})" width="80"></e-grid-column>

            <e-grid-column field="basico" headerText="Básico" validationRules="@(new { required=true})" width="40" textAlign="Right" editType="numericedit" format="N2"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

 

</div>

 

<script id='dialogtemplate' type="text/x-template">

    <div id="dialogTemp">

    </div>

</script>

….

 

function actionComplete(args) {

         if (args.requestType === 'beginEdit' || args.requestType === 'add') {

                if (args.requestType === 'beginEdit') {

                    // Called the partial view elements

                    var ajax = new ej.base.Ajax({

                        url: "@Url.Action("EditPartial", "Cargos")", //render the Edit partial view

                        type: "POST",

                        contentType: "application/json",

                        data: JSON.stringify({ value: args.rowData })

                    });

                    ajax.send().then(function (data) {

                        appendElement(data, args.form); //Render the edit form in newly created template with the selected record

                        args.form.elements.namedItem('Codigo').focus();

                    }).catch(function (xhr) {

                        console.log(xhr);

                    });

                }

                if (args.requestType === 'add') {

                    var ajax = new ej.base.Ajax({

                        url: "@Url.Action("AddPartial","Cargos")", //render the Add partial view

                        type: "POST",

                        contentType: "application/json",

                        data: JSON.stringify({ value: args.rowData })

                    });

                    ajax.send().then(function (data) {

                        appendElement(data, args.form); //Render the edit form with selected record

                        args.form.elements.namedItem('Codigo').focus();

                    }).catch(function (xhr) {

                        console.log(xhr);

                    });

                }

         }

    }

 

 

    function appendElement(elementString, form) {

        form.querySelector("#dialogTemp").innerHTML = elementString;

        var script = document.createElement('script');

        script.type = "text/javascript";

        var serverScript = form.querySelector("#dialogTemp").querySelector('script');

        script.textContent = serverScript.innerHTML;

        document.head.appendChild(script);

        serverScript.remove();

    }

Controller

Controler

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

using System.Collections;

using NominaNetCore1.Models;

using Syncfusion.EJ2.Base;

using Microsoft.EntityFrameworkCore;

 

namespace NominaNetCore1.Controllers

{

    public class CargosController : Controller

    {

        private readonly NominaNetCore1Context _context;

        public CargosController(NominaNetCore1Context context)

        {

            _context = context;

        }

        public IActionResult Insert([FromBody]CRUDModel<CargoSet> param)

        {

 

            var obj = _context.CargoSet.Where(o => o.Codigo == param.Value.Codigo).SingleOrDefault();

            if (obj != null) //Check already exisiting

            {

                throw new InvalidOperationException("Código de Cargo ya existe");//Exception thrown if exisiting    

            }

 

            // Usuario Adiciona

            param.Value.Created = DateTime.Now;

 

            _context.Add(param.Value);

            _context.SaveChanges();

 

            return Json(param.Value);

        }

 

        public IActionResult Update([FromBody]CRUDModel<CargoSet> param) // Update record

        {

            CargoSet data = _context.CargoSet.Single(o => o.Id == int.Parse(param.Key.ToString()));

 

            // Usuario Modifica

            param.Value.Modified = DateTime.Now;

 

            _context.Entry(data).CurrentValues.SetValues(param.Value);

            _context.Entry(data).State = EntityState.Modified;