Hello,
Are there any small examples of starting a project in MVC 3 with the razor engine?
Cheers,
Timothy
Printable View
Hello,
Are there any small examples of starting a project in MVC 3 with the razor engine?
Cheers,
Timothy
Hi,
Here you are.
1. Visual Studio 2010, create an empty ASP.NET MVC3 Application.
2. Attach the Ext.Net.dll reference.
3. Add the following into Web.config:
Add to Web.config
4. The Global.asax should look like this:Code:<configuration>
<configSections>
<sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
<section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
</sectionGroup>
</configSections>
<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="Ext.Net" />
<add namespace="Ext.Net.MVC" />
</namespaces>
</pages>
</system.web.webPages.razor>
<system.web>
<httpHandlers>
<add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/>
</httpHandlers>
<httpModules>
<add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
</httpModules>
</system.web>
</configuration>
Global.asax
5. Create the Examples folder within the Views one and put the following sample razor view.Code:protected void Application_AuthenticateRequest(object sender, System.EventArgs e)
{
string url = HttpContext.Current.Request.FilePath;
if (url.EndsWith("ext.axd"))
{
HttpContext.Current.SkipAuthorization = true;
}
}
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
}
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.IgnoreRoute("{exclude}/{extnet}/ext.axd");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Examples", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RegisterGlobalFilters(GlobalFilters.Filters);
RegisterRoutes(RouteTable.Routes);
}
Views\Examples\Index.cshtml
6. Add the following ExamplesController.Code:<!DOCTYPE html>
<html>
<head>
<title>Infinite Scrolling - Ext.NET Examples</title>
</head>
<body>
@Html.X().ResourceManager()
<h1>Infinite Scrolling</h1>
<p>The brand new GridPanel supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
<p>The GridPanel uses a new virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
<br />
@(Html.X().GridPanel()
.Title("Stock Price")
.Height(500)
.Width(500)
.InvalidateScrollerOnRefresh(false)
.DisableSelection(true)
.Store(store => store.Add(Html.X().Store()
.PageSize(100)
.Buffered(true)
.AutoLoad(false)
.Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
.Url("/Data/GetData/")
.Reader(reader => reader.Add(Html.X().JsonReader()
.Root("data")
))
))
.Model(model => model.Add(Html.X().Model()
.Fields(fields => {
fields.Add(Html.X().ModelField().Name("Company"));
fields.Add(Html.X().ModelField().Name("Price"));
fields.Add(Html.X().ModelField().Name("LastUpdate").Type(ModelFieldType.Date));
})
))
))
.VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))
.ColumnModel(columnModel => {
columnModel.Columns.Add(Html.X().RowNumbererColumn().Width(50).Sortable(false));
columnModel.Columns.Add(Html.X().Column()
.Text("Company")
.DataIndex("Company")
.Flex(1));
columnModel.Columns.Add(Html.X().Column()
.Text("Price")
.DataIndex("Price")
.Width(70));
columnModel.Columns.Add(Html.X().DateColumn()
.Text("LastUpdate")
.DataIndex("LastUpdate")
.Width(140)
.Format("HH:mm:ss"));
})
.View(view => view.Add(Html.X().GridView().TrackOver(false)))
.Listeners(listeners => {
listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 99);";
listeners.AfterRender.Delay = 100;
})
)
</body>
</html>
ExamplesController.cs
7. Add the following DataController.Code:public class ExamplesController : Controller
{
public ActionResult Index()
{
return View();
}
}
DataController.cs
Hope this helps.Code:class StockQuotation
{
public string Company { get; set; }
public int Price { get; set; }
public DateTime LastUpdate { get; set; }
}
public class DataController : System.Web.Mvc.Controller
{
public AjaxStoreResult GetData(int start, int limit, int page)
{
AjaxStoreResult response = new AjaxStoreResult();
List<StockQuotation> data = new List<StockQuotation>();
Random randow = new Random();
DateTime now = DateTime.Now;
for (int i = start + 1; i <= start + limit; i++)
{
StockQuotation qoute = new StockQuotation()
{
Company = "Company " + i,
Price = randow.Next(0, 200),
LastUpdate = now
};
data.Add(qoute);
}
response.Data = data;
response.Total = 50000;
return response;
}
}
EDIT
AjaxStoreResult has been renamed to StoreResult.
Awesome thanks! That was a very big help in seeing some of the syntax expected with the controls :)
Cheers,
Timothy
Hi Daniil. I was trying to configure mvc 3 with ext.net a few days and this post was really most useful
thank you very much
Hi @silvio,
Thanks for the feedback. Welcome to Ext.NET!
Also very useful to me.
I was able to get your example to work with 2 minor tweaks:
1) Web.config I was able to minimize the razor settings to just this:
I *think* the rest get inherited but not quite sure (I'm still new to Razor)Code:<system.web.webPages.razor>
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="Ext.Net" />
<add namespace="Ext.Net.MVC" />
</namespaces>
</pages>
</system.web.webPages.razor>
2. I think AjaxStoreResult has since been renamed to StoreResult.
Thanks, Anup, for the review.
I think it might be removed for sure if it still work without it :) But I would keep it in mind for a case if something won't work further.Quote:
Originally Posted by anup
Yes, that is correct.Quote:
Originally Posted by anup
I want to use MVC 3 with Razor but these samples mention a change from AjaxStoreResult to StoreResult and the versions I have downloaded from svn don't have that.
So from where should I download the latest v 2.0 with MVC?
Mauricio,
I was working with the latest code from SVN. Perhaps between the time of the beta release and the latest code the class name has changed? If that is the case, you could either get latest from SVN (assuming you've got all that set up), or if you are using an earlier version you might have to stick with AjaxStoreResult I guess?