.NET Web API Generator Inline Editing

andyr

I used http://editor.datatables.net/manual/generator to make a Visual Studio 2013 Solution. I have inline editing turned on. If you double click a cell, make a change, then hit Enter, that calls the Controller method at the bottom.
The Controller method does not update/insert/delete from the "Avail" table. Do I need to add my own code for this to happen?

namespace EditorGenerator.Controllers
{
    public class AvailController : ApiController
    {
        [Route("api/Avail")]
        [HttpGet]
        [HttpPost]
        public IHttpActionResult Avail()
        {
   
            var request = HttpContext.Current.Request;
   
            var settings = Properties.Settings.Default;

            using (var db = new Database(dbType:settings.DbType, str:settings.DbConnection))
            {
                var response = new Editor(db:db,
                    table:"Avail",
                    pkey: "AvailID")
                    .Model<AvailModel>()
                    .Field(new Field("AvailID")                    
                    )
                    .Field(new Field("AvailLocationID")
                        .Validator(Validation.NotEmpty())
                    )
                   .Field(new Field("AvailName")
                        .Validator(Validation.NotEmpty())
                    )
                    .Process(request)      
                    .Data();

                return Json(response);
            }
        }
    
    }  // class
}  // namespace 

allan

Hi,

Could you show me the Javascript you are using please? Is the Ajax request being made (you should be able to see it in the Network tab in your browser's developer tools? If so, what parameters are being sent to the server?

Thanks,
Allan

andyr

The Javascript:

/*
 * Editor client script for DB table Avail
 * Created by http://editor.datatables.net/generator
 */
(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor({
        "ajax": "/api/Avail",
        "table": "#Avail",
        "fields": [
            {
                "label": "AvailID",
                "name": "AvailID"
            },
           {
          "label": "Location",
          "name": "TSSRAvailLocationID",
       },
       {
            "label": "Avail Name",
            "name": "AvailName"
        }
    ]
    } );

    // Activate an inline edit on click of a table cell.
    $('#TSSRAvail').on('click', 'tbody td',
        function (e) {
            editor.inline(this);
        }
    );

    $('#Avail').DataTable({
        "dom": "Tfrtip",
        "ajax": "/api/Avail",
        "columns": [
                 {
            "data": "AvailID"
          },
                 {
                       "data": "AvailLocationID"
            },
               {
                       "data": "AvailName"
        }
        ],
    "tableTools": {
        "sRowSelect": "os",
        "aButtons": [
        { "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor },
                { "sExtends": "editor_remove", "editor": editor }
            ]
        }
    } );
} );

}(jQuery));

andyr

Thanks Alan:

Hitting the Enter key when inline editing does call the AvailController Avail C# function.
Do I need additional code there to update the Avail table?

The Network tab in IE Developers shows me Request = POST /api/Avail HTTP/1.1. It also shows me action=edit&data%5 ...the table colums ... id =row_theguid.

The Javascript:

/*
 * Editor client script for DB table Avail
 * Created by http://editor.datatables.net/generator
 */
(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor({

        "ajax": "/api/Avail",

        "table": "#Avail",

        "fields": [
            {
                "label": "AvailID",
                "name": "AvailID"
            },
           {
          "label": "Location",
          "name": "AvailLocationID",
       },
       {
            "label": "Avail Name",
            "name": "AvailName"
        }
    ]
    } );

    // Activate an inline edit on click of a table cell.
    $('#Avail').on('click', 'tbody td',
        function (e) {
            editor.inline(this);
        }
    );

    $('#Avail').DataTable({
        "dom": "Tfrtip",
        "ajax": "/api/Avail",
        "columns": [
                 {
            "data": "AvailID"
          },
                 {
                       "data": "AvailLocationID"
            },
               {
                       "data": "AvailName"
        }
        ],
    "tableTools": {
        "sRowSelect": "os",
        "aButtons": [
                  { "sExtends": "editor_create", "editor": editor },
             { "sExtends": "editor_edit",   "editor": editor },
              { "sExtends": "editor_remove", "editor": editor }
        ]
        }
    } );
} );

}(jQuery));

allan

Hitting the Enter key when inline editing does call the AvailController Avail C# function

Ah - I see, you want it to always submit? The submitOnBlur option. can be used for that in Editor 1.4.

To use, simply change editor.inline(this); to be:

 editor.inline(this, {submitOnBlur: true} );

Does that then do what you are looking for?

Allan

andyr

I am okay with the Enter key calling the .NET Web API Controller. The problem is that nothing updates the database. Do I need to add some code to the Controller? Is so, how do I identify the field name for the cell the user was editing?
Thanks

allan

So when you press enter the Ajax request is made and the controller is called - is that correct?

You have AvailID defined in the Editor fields list for botht he Javascript and the C# controller (possibly also the model). Could you remove it please? Editor will automatically include that field as it is the primary key. In DataTables if you want the end user to see the primary key value you can use "data": "DT_RowId".

Beyond that, that looks like it should work!

Allan

andyr

Thanks. I removed AvailID from the Javascript, C# controller and the model. All the editing now works!
I have another question. The AvailName field is 4 characters. If you enter more chars. in the Edit button popup, when you hit Update you see the error message "String or binary data would be truncated. The statement has been terminated."
How to I display that and other error messages using inline editing?

allan

Good to hear that helped.

Regarding the max length of 4 characters, possibly a better solution would be to use a field validator for it:

                   .Field(new Field("AvailName")
                        .Validator(Validation.NotEmpty())
                        .Validator(Validation.MaxLen(4))

If you do want it just to truncate, then you could use a set formatter.

Allan

andyr

Thanks. That fixed the problem.