Ext.NET also supports ASP.NET MVC with both the default view template engine, as well as the popular Razor engine. Although the majority of this book will mostly show examples using ASP.NET Web Forms, there will be some examples showing MVC and Razor usage.
To get MVC support, there is a similar NuGet package, called Ext.Net.MVC. So, you can follow the earlier steps, but instead do the following:
The changes will be the same as before. Web.config will be updated for you as needed, and Global.asax will have an additional route registered to handle Ext.NET resources.
To get a feel of how Ext.NET looks in MVC/Razor, here is a similar example as earlier, but using the MVC/Razor syntax. First, the View:
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET Example</title>
</head>
<body>
@Html.X().ResourceManager().Theme(Theme.Gray)
@(Html.X().Window()
.Title("Welcome to Ext.NET 2.1")
.Height(215)
.Width(350)
.Layout(LayoutType.Fit)
.Items(Html.X().FormPanel()
.Layout(LayoutType.Anchor)
.DefaultAnchor("100%")
.Border(false)
.BodyPadding(5)
.Items(Html.X().TextArea()
.ID("message")
.EmptyText(">> Enter a Message Here <<")
.FieldLabel("Text Message")
.Height(85)
)
.Buttons(
Html.X().Button()
.Text("Submit")
.Icon(Icon.Accept)
.DirectClickAction("Notify", "ExtNET")
)
)
)
</body>
</html>And next, the Controller:
using System.Web.Mvc;
using Ext.Net;
using Ext.Net.MVC;
using Controller = System.Web.Mvc.Controller;
namespace ExtNet2Mvc.Controllers
{
public class DirectEventExampleController : Controller
{
//
// GET: /DirectEventExample/
public ActionResult Index()
{
return View();
}
//
// GET: /DirectEventExample/Notify/
public ActionResult Notify(string message)
{
var config = new NotificationConfig
{
Icon = Icon.Accept,
Title = "Working",
Html = message
};
X.Msg.Notify(config).Show();
return this.Direct();
}
}
}The code
does the same thing as the ASP.NET Web Forms example, earlier. We have defined two actions in the same controller. The Index, or default action when browsing /DirectEventExample/ will simply return the View. The View creates the same components as before, but using Razor syntax and Ext.NET's MVC helper methods.
The button's Click DirectEvent is slightly different; the associated controller action, Notify, takes a string parameter. To set that parameter, the Click DirectEvent adds it as an extra parameter getting the value via a small bit of client-side JavaScript code (which gets the value of the client-side representation of the text area).
To handle the event on the server side, the Notify action creates an Ext.NET Notification object and shows it. The Direct() method generates a DirectResult which is a subclass of ActionResult. It is a class created by Ext.NET and handles the script generation so that the Notification object appears on the user's browser.
These techniques will, of course, be expanded upon in this book, so don't worry about the inner workings in too much detail for now! The key points to take away for MVC Razor is that it generally follows the standard ASP.NET MVC Razor patterns and Ext.NET components come with their own helper methods to help configure the controls as needed. There will be additional features specific to MVC that Ext.NET is building even as this book goes to print so there will be more capabilities to expect that cannot be covered in this book, including Data Annotations support, Model Binding support, specialized Ext.NET action results, and more.