WebForms / ASPX

ASP.NET WebForms and plain ASPX pages are a popular way to create dynamic web-sites. Providing separate code files for the HTML page and the Code behind (i.e. server-side code), while allowing easy information exchange between the two makes implementing Editor in a WebForm straightforward.

Installation

The first step to using the Editor libraries in your WebForm project is to include a reference to the DataTables-Editor-Server.dll, which provides all the classes and methods required. If you haven't already please follow the Installation instructions to include the DLL and also set up the database connection.

ASPX

To use Editor in an aspx file for your WebForm application, create a new WebForm file (not from a master template) - typically this should go in a directory such as api or feeds to group all files which the end user will not directly view themselves. The key thing to keep in mind with this file is that if the browser requests it it will process the request and return JSON information - e.g. a data load request for the DataTable, or an edit request from Editor. It will not respond with HTML, Javascript, CSS or anything else - just JSON. The HTML for your page should be in a separate HTML file.

Main aspx file

Visual Studio will automatically fill the aspx file in with a template such as:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="staff.aspx.cs" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Delete everything apart from the first line! The CodeBehind file will output JSON, so we don't want anything else to be returned to the client, which would render the JSON invalid. You should be left with just:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="staff.aspx.cs" %>

Code behind

As well as providing a template structure for the client view aspx file, Visual Studio will also provide template code for the aspx.cs code behind file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace EditorGenerator.api
{
    public partial class staff : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Here we need to make use of the Editor class to make requests to the database and then return JSON

using System;
using System.Web;
using DataTables;
using EditorGenerator.Models;
using Newtonsoft.Json;

namespace EditorGenerator.api
{
    public partial class staff : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            var request = HttpContext.Current.Request;
            var settings = Properties.Settings.Default;

            using (var db = new Database(settings.DbType, settings.DbConnection))
            {
                var response = new Editor(db, "staff", "id")
                    .Model<StaffModel>()
                    .Process(request)
                    .Data();

                Response.ContentType = "text/json";
                Response.Write(JsonConvert.SerializeObject(response));
            }
        }
    }
}

Line by line:

Lines 1-5: using statements have been added for DataTables, Newtonsoft.Json and our models, which are in the EditorGenerator.Models namespace in this example (for use with the Editor.Model() method, although that is optional).
Line 11: The Page_Load event is the only event we need to use - when the page is loaded, it should process the request and then return JSON to the client-side.
Line 14: Create variable to easily access database connection properties - this is not required, you can access this information from any other location that you might have it in your application.
Line 16: Create a new Database instance in an using statement
Line 18: Created a new Editor instance using the database staff.
Line 19: Uses the StaffModel to define the fields
Line 20: Process the data from the current HTTP request
Line 23: Set the content-type header to be text/json to explicitly tell the browser that it is JSON data being returned.
Line 24: Use the JSON.NET library from Newtonsoft to convert the Editor data to JSON and Response.Write() to send it to the client (optionally, if you prefer, it could be assigned to a variable that that variable echoed back to the client from the aspx page.

Please note that the Page_Load() method defined above will process all four CRUD actions (Create, Read, Update and Delete). As such the ajax and ajax options for DataTables and Editor would both be set to point at this method (i.e. /api/staff.aspx). If you prefer to use REST URLs, that is also possible using the ajax option.

Models

For information about the models used for the Model() method, please refer to the getting started model documentation.

Next steps

There is of course a lot more that you can do with the Editor libraries, although you will typically apply the basics shown in this article every time. To expand your use of Editor, consider the following topics: