Datatables Editor in C# MVC website

FrChFGo

I'am trying to include an editing function on a Datatables (single line) in c# MVC environment.

in my controller, I want to receive two vars: action (edit on this case) and the data fields.
When I update a data, my action in controller is called, and It works for "action". Unfortunately, data it always null. I already tried array, string, I also tried to create one var by field...

Could you help me? What the type of the data var? Have I to add anythiong on ma jquery code?

My code follow

Controller Action called when uddate:

        public ActionResult UpdateData(string action, object data)
        {
            ....

        }

_**
code in View file**_

@using CASSIOPEE.Resources;
@{

    ViewBag.Title = "Listing";
}



<h2>Résultat de la recherche</h2>

<table class="display" id="myTable">
    <thead>
        <tr>
            <th></th>
            <th>Id</th>
            <th>Numero</th>
            <th>Nom</th>
    <th>Bailleur</th>
    <th>Type Aff</th>
    <th>Pays</th>
    <th>Date OEI</th>
        </tr>
    </thead>
</table>

@*Chargement de Datatable*@



<script>
        $(document).ready(function () {
            console.log("@Url.Action("loadData")");


            editor = new $.fn.dataTable.Editor({
                "ajax": "@Url.RouteUrl(AppSharedValues.AjaxRouteName, new { controller="Recherche", action= "UpdateData" })",

                "idSrc": "id",
                "table": "#myTable",
                "fields": [{
                    "label": "Id:",
                    "name": "id"
                }, {
                    "label": "numAffaire:",
                    "name": "numAffaire"
                }, {
                        "label": "numProjet:",
                        "name": "numProjet"
                }, {
                        "label": "bailleurProcede:",
                        "name": "bailleurProcede"
                }, {
                        "label": "typeAffaire:",
                       "name": "typeAffaire"
                }, {
                        "label": "pays:",
                        "name": "pays"
                }, {
                       "label": "dateOEI:",
                        "name": "dateOEI",
                      "type": "datetime"
                }
                ]
            });



      $('#myTable').dataTable({
          "dom": "Bfrtip",
          "ajax": {
              "url": "@Url.RouteUrl(AppSharedValues.AjaxRouteName, new { controller="Recherche", action= "loadDataNew" })",
              @*"url": "@Url.Action("loadData")",*@
              "type": "GET",
              "datatype":"json"
          },
          "oSearch": {"sSearch": "@ViewBag.defaultSearchField"},
          "columns": [
              {
                  "data": null,
                  "defaultContent": "",
                  "className": "select-checkbox",
                  "orderable": false
              },
            { "data": "id", "autoWidth": true },
            { "data": "numAffaire", "autoWidth": true },
            { "data": "numProjet", "autoWidth": true },
            { "data": "bailleurProcede", "autoWidth": true },
            { "data": "typeAffaire", "autoWidth": true },
            { "data": "pays", "autoWidth": true },
            { "data": "dateOEI", "autoWidth": true }
          ],
          "select": true,
          "buttons": [
              { extend: "create", editor: editor },
              { extend: "edit", editor: editor },
              { extend: "remove", editor: editor }
          ],
          "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
          "iDisplayLength": 25

      });
  });


</script>

Thanks

Florian

allan

jQuery submits it as an array of objects. You could parse it yourself, or use the DtRequest class from the DataTables.dll which will convert it for you (you don't need to use any other aspect of the library if you don't want to).

Another option might be to add traditional: true to your ajax object which changes how jQuery submits the data, and you might find that easier to parse.

Allan

HPB

I have been using Datatables in an C# MVC environment myself, without using the library.

All the data is in HttpContext.Request.Form and I use a helper function that I can pass the form to from my controller.

        public static Dictionary<string, Dictionary<string, string>> getDatatablesModel(System.Collections.Specialized.NameValueCollection form)
        {
            Dictionary<string, Dictionary<string, string>> list = new Dictionary<string, Dictionary<string, string>>();

            if (!form.AllKeys.Contains("action"))
                return null;

            foreach (string key in form.AllKeys)
            {
                Regex regex = new Regex(@"^data\[.+\]\[.+\](\[\]){0,1}$"); //matches 2 and 3 dimensional arrays
                if (regex.Match(key).Success)
                {
                    string pattern = @"\[(.*?)\]"; //matches strings between brackets
                    MatchCollection matches = Regex.Matches(key, pattern);
                    if (matches.Count == 2 || matches.Count == 3) //Id en Property
                    {
                        //Trim brackets
                        string DT_RowId = matches[0].ToString().Substring(1, matches[0].ToString().Length - 2);
                        string PropertyName = matches[1].ToString().Substring(1, matches[1].ToString().Length - 2);
                        if (!list.Any(a => a.Key == DT_RowId))
                            list.Add(DT_RowId, new Dictionary<string, string>());
                        list.First(a => a.Key == DT_RowId).Value.Add(PropertyName, form[key]);
                    }
                }
            }
            return list;
        }

FrChFGo

Thanks for your help.

My trial version has expired (I was on vacation the last three weeks) . I asked for another trial period trough the contact form (my manager ask to see that it works before buying the license). I hope to get it quickly.

Meantime, I build my code following your indications.

Thanks again

allan

Oddly I don't think I got your message - sorry about that. I've reset your trial now and you'll be able to download it again.

Regards,
Allan

FrChFGo

Hello,
Now, datatables.dll is referenced in my project..

I had update my controller to use DtRequest... Actually, it don't works. In fact, the object is null...

My code:

        public ActionResult UpdateData(string action, IEnumerable<KeyValuePair<string,string>> data)
        {
            DtRequest request = new DtRequest(data);
            ....}

What can I change?

Thanks

allan

What is your data object?

Allan

FrChFGo

action is the action send by the form (contain 'edit' in my case)

'data' is the table with data send by the editor form when I update a value... It always null... (data are send by Ajax, checked with chrome debugger)

May I use another way to receive the data object?

allan

The DtRequest constructor expects something like HttpContext.Current.Request.Form to be passed into it. If you are passing in null, then it won't be able to get the data from the form.

Allan

FrChFGo

Thanks Allan, I just found the solution

NameValueCollection data = Request.Form;

I have another question... Is it possible to exclude column or replace it content before sending? I have a column with a link inside...

FrChFGo

OK, I Found the solution.

To exclude a column of the editor, I have to delete mi column of the field lisst of the editor...

"fields":

FrChFGo

Last question for today... In my table, I think "spaces" are erased when editor is activate...

Look at the image attached, In "standard mode, a space exist between "Rihyad" and Stripper... But when I active the inline edit mode, the space missing..

allan

I haven't been able to reproduce that here. Can you link to a test case showing the issue please?

Allan

FrChFGo

Sorry, but I can't link to a test case, besause we work on intranet only... But I can give you hand to my PC if you want...

I'll try to publish my project on the "prod" server, maybe this problem is only with my dev environment...

allan

At what point does the strip happen? When you click the field - is it immediately removed? Is the space actually   perhaps?

Allan

FrChFGo

I have the solution... I have replace the "space" direct in my db by another "space" and it works.

It should be a bad char before. Data in my sqlserver Db was integrated from an old excel file...

Now, I wood like to update my data in DataTables after an update in my database. I need to send a new Json object or just a success state from my controller? Maybe an example is online...

allan

The client / server data interchange for Editor is documented here.

Allan

raja_mohamed

how to install trial editor plugin within my mvc4 application?

raja_mohamed

i didi not see complete documentation to install and work within editor,is there anything?

colin

Hi @raja_mohamed ,

The documentation is here. It would be worth raising a new thread if you're having issues.

Cheers,

Colin