Return an additional string field from the controller

Carneno

Hello,

I'm using Visual Studio 2017 Community in an ASP.NET,MVC 5, EF6, .NET 4.5 web application environment(Contoso University).

I added my own entities to maintain mailboxes and display emails for any of the mailboxes. I display both entities in grids using DataTables.

It works and the emails DataTable, that is initialised with the ajax option, returns the viewdata from the controller using this statement:

return DataTablesHelper.GetQuery(param, totalRecords, email.AsQueryable());

This is what the emails Datatables coding looks like:

var detailsTableOpt = {
     'serverSide': true,
     'processing': true,
     'select': true,
     "paging": false,
     "searching": false,
     'ajax': {
          'url': '/Mailbox/GetEmailsData',
          'data': function (d) {
               d.MailboxID = selected;
          }
     },
     'destroy': true,
     'columns': [
          { 'data': 'From' },
          { 'data': 'To' },
          { 'data': 'Subject', 'defaultContent': "(no subject)" },
          { 'data': 'EmailDate' },
          { 'data': 'Size' }
     ],
     columnDefs: [
          { targets: [0, 1], "width": "20%", render: $.fn.dataTable.render.ellipsis(20, false, true) },
          { targets: 2, "width": "33%", render: $.fn.dataTable.render.ellipsis(40, false, true) },
          { targets: 3, "width": "16%", render: function (data) { return moment(data).format('MM/DD/YYYY h:mm:ss A'); } },
          { targets: 4, "width": "11%", render: $.fn.dataTable.render.number(',', '.', 0) }
     ]
};

I would like to return an additional string field from the controller so that the emails datatable can display it in the Mailboxes datatable(not display it in the emails datatable).

So, I think I need to know two things
1. How to return the string field from the controller in addition to what is already being returned.
2. How to access the additional string field in the email datatables.

I have already tried doing this to the return from the controller:

var queryStatus = "This is a server extra field!!!";
return DataTablesHelper.GetQuery(param, totalRecords, email.AsQueryable())+queryStatus;

and adding this to the ajax option:

'dataSrc': function (data) {
     var return_data = data.queryStatus;
     return return_data;
}

That didn't work and I have read numerous articles on using XHR, ajax dataSrc and callbacks and have tried many options, but I can't figure how to make this work.

Any help that anyone can provide to accomplish this would be gratefully appreciated.

Thanks,
Tony

Carneno

I managed to append an additional field to the end of the json data returned to datatables javascript from the MVC controller. The json data now looks like this:

{"draw":2,
"data":[
    {"EmailID":0,
    "MailboxID":3,
    "From":"\"AOL Member Services\" <AOL_MemberServices@dc2.aol.com>",
    "To":"emailuser@verizon.net",
    "Subject":"Customize Your AOL Mail",
    "EmailDate":"2017-05-07T11:51:14-04:00",
    "Size":8726,
    "Mailbox":null},
    {"EmailID":0,
    "MailboxID":3,
    "From":"\"Progressive\" <customerservice@e.progressive.com>",
    "To":"emailuser@verizon.net",
    "Subject":"We didn't forget about you.  Retrieve your quote here.",
    "EmailDate":"2017-05-25T14:42:55-04:00",
    "Size":16925,
    "Mailbox":null}],
"recordsTotal":2,
"recordsFiltered":2,
"queryStatus":"This is a server extra field!!!"}

.
The queryStatus is the additional field that I would like to parse in my javascript code and display it in a column of the Mailbox table.

If I don't make any other changes to the datatables javascript, the application works without a problem.

If I add this:

     'dataSrc': function (json) {
          var return_data = json.data.queryStatus;
          alert("emails - mailboxid = " + json.data.MailboxID.toString() + " return_data = " + return_data.toString());
          return json.data;
     }

.
Or this:

     on('xhr.dt', function (e, settings, json, xhr) {
          var return_data = json.data.queryStatus;
          alert("emails - mailboxid = " + json.data.MailboxID.toString() + " return_data = " + return_data.toString());
          }).

.
to the javascript code for the table, it just displays the "Processing" message for the table and does nothing else.

Does anybody have any idea of why I can't access this json data using the Ajax dataSrc option or the Ajax XHR event?

Thanks,
Tony

gyrocode

Your queryStatus property should be accessible via json.queryStatus and not json.data.queryStatus.

$('#example').on('xhr.dt', function (e, settings, json, xhr) {
     var return_data = json.queryStatus;
     alert("emails - mailboxid = " + json.data.MailboxID.toString() + " return_data = " + return_data.toString());
});

---

See more articles about jQuery DataTables on gyrocode.com.

Carneno

gyrocode,

Thanks for your help.

Using your suggestion, I still get the same results.

Thanks,
Tony

tangerine

@gyrocode: it's not really ethical to be touting for business in here.

gyrocode

Please see this example for demonstration that my solution works.

Disregard mockjax part, it's used for emulation of server-side processing mode.

@tangerine: Forum rules do not have any restrictions of that kind. Besides I'm providing a value for users at no cost. I've modified my tagline a little based on your suggestion.

---

See more articles about jQuery DataTables on gyrocode.com.

Carneno

gyrocode,

Thanks for that example.

I noticed that your example code uses the XHR as a standalone event. I interpreted this example: XHR Event as being part of the datatable initialization and that's how I coded it.

I tried it the way you did in your example and it still gives the same results, which is nothing happens.

Thanks,
Tony

Carneno

I noticed that If I take the alert out of the xhr event, the application displays the emails table as it should.

Also, I used the Mozilla Developer tools window to watch json.queryStatus and it shows it as undefined.

The xhr event json parameter contains an array of:
two emails,
draw:1,
recordsFiltered:2,
recordsTotal:2
and something named "proto".(with an underscore on each side of the word)

It does not contain jqueryStatus;

It is executing the xhr event, it's just not giving me the expected data and it does not execute the alert because jqueryStatus is undefined.

So, I don't understand if the json data is being passed from the MVC Controller as I showed above, why is it not containing the same data when watched in the developer tools?

Thanks,
Tony

allan

Server-side processing complicates things slightly. DataTables needs more than just the source array of data - it also needs the recordsFiltered, etc, parameters.

I'm not quite clear on what you want to do with the extra queryStatus parameter. Do you want the same text to show in every row? It sounds like that, but I'm not sure I've understood correctly as I'm not sure I see the benefit of that?

If you want to access it to show it somewhere else the xhr event is the perfect place to do it.

Allan

Carneno

allan,

Thanks for your help.

I did finally get this to work using the XHR event. I found that I was not passing the right information back from the mvc controller.

I simply want queryStatus(a mailkit communication message) as a string to be displayed for the current emails retrieved. I did accomplish that.

Thanks,
Tony