using a DevExpress GridView in MVC

The stuff here, here, here, and here was a learning-how-to implementation for a DevExpress ASPxGridView. Yesterday I tried to do something similar for MVC. I made the default ASP.NET MVC Web API application in Visual Studio 2013. First, I recreated in the Models folder the Planet, PlanetType, and Measurements models I had in my web forms experiment and then I recreated the Utilities folder and again put CommonSource and PlanetFactory in it. Next, I erased all of the guts of Index.cshtml and then I right clicked in Index.cshtml where I picked an option for "Insert DevExpress MVC Extension" from the menu which appeared.

 
 

A wizard of sorts appeared. I went to the "Data" tab and picked "GridView" to make a GridView which seems to be the MVC counterpart to an ASPxGridView. This has more about the GridViews, I think. I found that I had to pick a model class, but I was frustrated that I could not pick just any class I wanted to use. I ended up just picking Antlr.Runtime.ICharStream. Whatever.

 
 

After I clicked the Insert button, Web.config was changed up quite a bit and Index.cshtml looked like this:

@Html.Action("GridViewPartial")

 
 

A partial it defered to looked like this:

@{
   var grid = Html.DevExpress().GridView(settings => {
      settings.Name = "GridView";
      settings.CallbackRouteValues = new { Controller = "Home",
            Action = "GridViewPartial" };
      
      settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Home",
            Action = "GridViewPartialAddNew" };
      settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Home",
            Action = "GridViewPartialUpdate" };
      settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Home",
            Action = "GridViewPartialDelete" };
      settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
      settings.SettingsBehavior.ConfirmDelete = true;
      
      settings.CommandColumn.Visible = true;
      settings.CommandColumn.NewButton.Visible = true;
      settings.CommandColumn.DeleteButton.Visible = true;
      settings.CommandColumn.EditButton.Visible = true;
      
      settings.KeyFieldName = "Line";
      
      settings.SettingsPager.Visible = true;
      settings.Settings.ShowGroupPanel = true;
      settings.Settings.ShowFilterRow = true;
      settings.SettingsBehavior.AllowSelectByRowClick = true;
      
      settings.Columns.Add("Line");
      settings.Columns.Add("CharPositionInLine");
   });
   if (ViewData["EditError"] != null){
      grid.SetEditErrorText((string)ViewData["EditError"]);
   }
}
@grid.Bind(Model).GetHtml()

 
 

HomeController looked like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DevExpress.Web.Mvc;
 
namespace DummyDevExpressApplication.Controllers
{
   public class HomeController : Controller
   {
      public ActionResult Index()
      {
         ViewBag.Title = "Home Page";
         
         return View();
      }
      
      
      [ValidateInput(false)]
      public ActionResult GridViewPartial()
      {
         var model = new object[0];
         return PartialView("_GridViewPartial", model);
      }
      
      [HttpPost, ValidateInput(false)]
      public ActionResult GridViewPartialAddNew([ModelBinder(typeof(
            DevExpressEditorsBinder))] Antlr.Runtime.ICharStream item)
      {
         var model = new object[0];
         if (ModelState.IsValid)
         {
            try
            {
               // Insert here a code to insert the new item in your model
            }
            catch (Exception e)
            {
               ViewData["EditError"] = e.Message;
            }
         }
         else
            ViewData["EditError"] = "Please, correct all errors.";
         return PartialView("_GridViewPartial", model);
      }
      [HttpPost, ValidateInput(false)]
      public ActionResult GridViewPartialUpdate([ModelBinder(typeof(
            DevExpressEditorsBinder))] Antlr.Runtime.ICharStream item)
      {
         var model = new object[0];
         if (ModelState.IsValid)
         {
            try
            {
               // Insert here a code to update the item in your model
            }
            catch (Exception e)
            {
               ViewData["EditError"] = e.Message;
            }
         }
         else
            ViewData["EditError"] = "Please, correct all errors.";
         return PartialView("_GridViewPartial", model);
      }
      [HttpPost, ValidateInput(false)]
      public ActionResult GridViewPartialDelete(System.Int32 Line)
      {
         var model = new object[0];
         if (Line != null)
         {
            try
            {
               // Insert here a code to delete the item from your model
            }
            catch (Exception e)
            {
               ViewData["EditError"] = e.Message;
            }
         }
         return PartialView("_GridViewPartial", model);
      }
   }
}

 
 

There is a lot to understand here and I didn't try to figure it out all at once. I just wanted to get something working. I changed GridViewPartial in HomeController like so:

[ValidateInput(false)]
public ActionResult GridViewPartial()
{
   var model = PlanetFactory.GetPlanets();
   return PartialView("_GridViewPartial", model);
}

 
 

In _GridViewPartial.cshtml which is the previously mentioned partial, I replaced the lines which started out with settings.KeyFieldName and settings.Columns.Add like this:

settings.KeyFieldName = "Name";

 
 

...and like this:

settings.Columns.Add("Name");
settings.Columns.Add("ClosestAstronomicalUnitDistanceFromSun");
settings.Columns.Add("PlanetType");
settings.Columns.Add("MilesInDiameter");
settings.Columns.Add("DiscoveryDate");

 
 

Now I may run the application and see something like this:

 
 

Clearly, I have a long way to go yet. My stylesheet styles could use some love, no?