Need some starting-help with ASP.Net MVC

Telefisch

Hi guys,
I'm developing a small Website with ASP.NET MVC and till now I used normal html-tables with iterating through my data.

Now I'd like to test the Editor but I have no idea how to get the data out of my model (better my datatables) into the table and back to the model, after editing. I'm even not really sure which paket to install, so till now I loaded the jscript/css Version.

Actually this is the way to give the data to the view:
ViewBag.Data = db.ProjectDetails.AsNoTracking()
.Where(a => a.ProjectId == id)
.OrderBy(a => a.ListPosition).ThenBy(a => a.Name).ToList();

The database is created by using codefirst with entity Framework on a SQL database.

Hope this Question is not too kiddy but at the Moment I am totally confused.

Thanks
Telefisch

Telefisch

Ok, let's try to start at the beginning.
I'm trying to solve the first Basic initialization.
The following References are set:

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script> <script src="~/Scripts/DataTables/dataTables.editor.min.js"></script>

I downloaded the Editor Trial, all other references are going to cdn destinations.

In JavaScript-Part I get the first Problem here:

editor = new $.fn.dataTable.Editor({

Visual Studio seems not to find dataTable (with lower case), only DataTable, which seems to be Method of Jquery.

So what the hell is wrong in my way?

kthorngren

What errors do you get?

I would probably start by making sure this is a valid path:
"~/Scripts/DataTables/dataTables.editor.min.js"

Use the browser's developer tools to verify it is loading dataTables.editor.min.js.

Kevin

Telefisch

Ok, I'll try it step by step.
First, this line should trigger the Controllers method in any way:

var editor = new $.fn.dataTable.Editor({
ajax: 'URL= "GetList"',...

I tried many different ways but Nothing. The Focus never Comes to GetList.

Then I tried the Getting Started from Editor but also here everything does Nothing!

So my first Question:
Which package of Editor do I have to install for ASP.NET MVC?
The Editor Net Framework download is NO installation but a demo Project.

Telefisch

In the devtools in my Edge, I can see that "datatables.min.js" and "dataTables.editor.min.js" are loaded.
If I write the following line: var Editor = new $.fn.dataTable.Editor, Visual Studio should automatically offer "Editor", when I type the last Point and an upper case E.
It does not do this, so I think the whole line is not working so ofcourse, the Action in the Controller is not triggered.

My actual call:

$(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                "ajax": {
                    "url": '@Url.Action("GetList")',
                    "dataType": "json",
                    "type": "GET",
                    "serverside": true,
                    "table": '#FunctionGroups',
                    "fields": [
                        {
                            "label": "Name:",
                            "name": "name"
                        },
                        {
                            "label": "Description:",
                            "name": "description"
                        },
                        {
                            "label": "ListPosition:",
                            "name": "listposition"
                        },
                        {
                            "label": "FunctionSign:",
                            "name": "functionsign"
                        },
                        {
                            "label": "LocationSign:",
                            "name": "locationsign"
                        }
                    ]
                }
            });
        });

allan

When you actually run the page, do you get an error stating that the Editor instance cannot be created? Or do you get a 404 error for the Editor script?

If intellisense in VS isn't picking it up, then there is a decent chance of a 404 error, but without being able to see the page it is impossible to say.

If you are getting either a 404 for the Editor script or there is some other issue stopping Editor from loading, then it will not hit the controller with the Editor configuration, since the Javascript will never get that far. It won't be able to execute the Ajax request.

Allan

Telefisch

Good Morning Allan,
I just ca capture some Minutes...

I installed the Editor by using Nuget Paket manager.
Before I downloaded the files, same result.

On top of my view, I link them the following way:

<link rel="stylesheet" type="text/css" href="~/Content/DataTables/datatables.min.css">
@*<script type="text/javascript" charset="utf-8" src="~/Scripts/DataTables/datatables.min.js"></script>*@

<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/bootstrap-treeview.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.editor.min.js"></script>

At the bottom of my page I try this:

<!-- FUNCTIONGROUPS TABLE -->
<script type="text/javascript">
    var editor;
    (function ($) {
        $(document).ready(function () {
            @*$.ajax({
                url: "/Projects/GetList",
                type: "GET",
                data: { 'projectId': @Model.Id },
                dataType: "json"
            });*@

            editor = new $.fn.dataTable.Editor({
                ajax:({
                    url: "/Projects/GetList",
                    dataType: "json",
                    type: "GET",
                    serverside: true,
                    table: '#FunctionGroups',
                    fields: [
                        { "label": "Name:", "name": "name" },
                        { "label": "Description:", "name": "description" },
                        { "label": "ListPosition:", "name": "listposition" },
                        { "label": "FunctionSign:", "name": "functionsign" },
                        { "label": "LocationSign:", "name": "locationsign" }
                    ]
                })
            });

            $('#Ausgabe').append("Hallo");

        });


        //$('#functionGroupsTable').DataTable({
        //    language: {
        //        decimal: ",",
        //        emptyTable: "Keine Datensätze gefunden",
        //        info: "Datensatz _START_ bis _END_ von _TOTAL_",
        //        infoEmpty: "Keine Datensätze",
        //        infoFiltered: "(gefiltert von insgesamt _MAX_ Datensätzen)",
        //        infoPostFix: "",
        //        thousands: ".",
        //        lengthMenu: "Zeige _MENU_ Zeilen",
        //        loadingRecords: "Daten lesen...",
        //        processing: "Datenverarbeitung...",
        //        search: "Suche:",
        //        zeroRecords: "Keine passenden Datensätze gefunden",
        //        paginate: {
        //            first: "Erste",
        //            last: "Letzte",
        //            next: "Nächste",
        //            previous: "Vorherige"
        //        }
        //    },
        //    columns: [
        //        { width: "25%" },
        //        { width: "55%" },
        //        { width: "5%" },
        //        { width: "5%" },
        //        { width: "5%" },
        //        { width: "5%" }
        //    ],
        //    pagingType: "numbers"
        //});

    }(jQuery));
</script>

The commented DataTable worked before but when initalizing the editor I even couldn't get the focus to the action and I also get no error-message and no 404.
Sorry about my stupid questions but I am not so familiar with debugging with edge-devtools.

With this line: $('#Ausgabe').append("Hallo"); I have a Response between initalizing the Editor and the commented datatable, so the script does not seem to stop or abort.

To offer the page is not that simple but I`ll try the next days.

Telefisch

...one more Thing, the commented Ajax call hits the Action as expected.

@*$.ajax({
                url: "/Projects/GetList",
                type: "GET",
                data: { 'projectId': @Model.Id },
                dataType: "json"
            });*@

Telefisch

So back at my desk, the Trial period is remaining 5 days and I have to get ot run today!
So could please someone help me with an example for the Editor, using ASP.NET MVC and SQL Database etc...?
I tried dozends of Hours in this but without success.
Thanks so much!

Telefisch

...I solved it without Editor and Datatables.
Thanks for trying