5.9. Views

Since we need only the View/Customer/Index.cshtml view out of the five created for the Customer controller, you can delete the others from the folder.

You can see that the entire view consists of the header, the jqg table and the jqg-pager block for displaying the navigation bar. The rest is occupied by the script for initiating the grid, the navigation bar and the dialog box for editing records.

@{
  ViewBag.Title = "Index";
}
<h2>Customers</h2>
<table id="jqg"></table>
<div id="jqg-pager"></div>
<script type="text/javascript">
  $(document).ready(function () {
    var dbGrid = $("#jqg").jqGrid({
      url: '@Url.Action("GetData")', // URL to retrieve data
      datatype: "json", // data format
      mtype: "GET", // http type request
      // model description
      colModel: [
      {
        label: 'Id',
        name: 'CUSTOMER_ID', // field name
        key: true,
        hidden: true
      },
      {
        label: 'Name',
        name: 'NAME',
        width: 250,
        sortable: true,
        editable: true,
        edittype: "text", // field type in the editor
        search: true,
        searchoptions: {
          sopt: ['eq', 'bw', 'cn'] // allowed search operators
        },
        // size and maximum length for the input field
        editoptions: { size: 30, maxlength: 60 },
        // mandatory field
        editrules: { required: true }
      },
      {
        label: 'Address',
        name: 'ADDRESS',
        width: 300,
        sortable: false, // prohibit sorting
        editable: true,
        search: false, // prohibit searching
        edittype: "textarea",
        editoptions: { maxlength: 250, cols: 30, rows: 4 }
      },
      {
        label: 'Zip Code',
        name: 'ZIPCODE',
        width: 30,
        sortable: false,
        editable: true,
        search: false,
        edittype: "text",
        editoptions: { size: 30, maxlength: 10 },
      },
      {
        label: 'Phone',
        name: 'PHONE',
        width: 80,
        sortable: false,
        editable: true,
        search: false,
        edittype: "text",
        editoptions: { size: 30, maxlength: 14 },
      }
      ],
      rowNum: 500, // number of rows displayed
      loadonce: false, // load only once
      sortname: 'NAME', // sort by default by NAME column
      sortorder: "asc",
      width: window.innerWidth - 80, // grid width
      height: 500, // grid height
      viewrecords: true, // display the number of records
      caption: "Customers",
      pager: 'jqg-pager' // navigation item id
    });
    dbGrid.jqGrid('navGrid', '#jqg-pager', {
        search: true,
        add: true,
        edit: true,
        del: true,
        view: true,
        refresh: true,
        // button labels
        searchtext: "Find",
        addtext: "Add",
        edittext: "Edit",
        deltext: "Delete",
        viewtext: "View",
        viewtitle: "Selected record",
        refreshtext: "Refresh"
      },
      update("edit"),
      update("add"),
      update("del")
    );
    // function that returns the settings of the editor
    function update(act) {
      return {
        closeAfterAdd: true,
        closeAfterEdit: true,
        width: 400, // editor width
        reloadAfterSubmit: true,
        drag: true,
        // handler for sending the form of editing / deleting / adding
        onclickSubmit: function (params, postdata) {
          // get row id
          var selectedRow = dbGrid.getGridParam("selrow");
          // set URL depending on the operation
          switch (act) {
            case "add":
              params.url = '@Url.Action("Create")';
              break;
            case "edit":
              params.url = '@Url.Action("Edit")';
              postdata.CUSTOMER_ID = selectedRow;
              break;
            case "del":
              params.url = '@Url.Action("Delete")';
              postdata.CUSTOMER_ID = selectedRow;
              break;
          }
        },
        // processing results of sending forms (operations)
        afterSubmit: function (response, postdata) {
          var responseData = response.responseJSON;
          // check the result for error messages
          if (responseData.hasOwnProperty("error")) {
            if (responseData.error.length) {
              return [false, responseData.error];
            }
          }
          else {
            // refresh grid
            $(this).jqGrid(
              'setGridParam',
              {
                datatype: 'json'
              }
            ).trigger('reloadGrid');
          }
          return [true, "", 0];
        }
      };
    };
  });
</script>

It is important to configure the model properties correctly in order to display the grid properly, position input items on the edit form, configure validation for input forms and configure the sorting and search options. This configuration is not simple and has a lot of parameters. In the comments I have tried to describe the parameters being used. The full description of the model parameters can be found in the documentation for the jqGrid library in the ColModel API section.

Note that jqGrid does not automatically add hidden grid columns to the input form, though I think it would make sense at least for key fields. Consequently, we have to add the customer identifier to the request parameters for editing and deleting:

case "edit":
  params.url = '@Url.Action("Edit")';
  postdata.CUSTOMER_ID = selectedRow;
  break;
case "del":
  params.url = '@Url.Action("Delete")';
  postdata.CUSTOMER_ID = selectedRow;
  break;

The working page with the list of customers will look like this:

Figure 39. Customer list view

Figure 40. A customer selected for editing

The controller and view for the product UI are implemented in a similar way. We will not describe them here in detail. You can either write them yourself or use the source code linked at the end of this chapter.