Datatables Editor in C# MVC website

Datatables Editor in C# MVC website

FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

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

Replies

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • HPBHPB Posts: 73Questions: 2Answers: 18

    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;
            }
    
  • FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

    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

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

    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

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    What is your data object?

    Allan

  • FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

    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?

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

    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...

  • FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

    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":
    
    
  • FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

    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..

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

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

    Allan

  • FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

    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...

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

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

    Allan

  • FrChFGoFrChFGo Posts: 22Questions: 5Answers: 0

    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...

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

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

    Allan

  • raja_mohamedraja_mohamed Posts: 2Questions: 0Answers: 0

    how to install trial editor plugin within my mvc4 application?

  • raja_mohamedraja_mohamed Posts: 2Questions: 0Answers: 0

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @raja_mohamed ,

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

    Cheers,

    Colin

This discussion has been closed.