PDA

View Full Version : [CLOSED] [2.0] MVC 3 Razor Example



Timothy
Jan 14, 2012, 3:05 PM
Hello,

Are there any small examples of starting a project in MVC 3 with the razor engine?

Cheers,
Timothy

Daniil
Jan 15, 2012, 7:34 AM
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


<configuration>
<configSections>
<sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSe ctionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="host" type="System.Web.WebPages.Razor.Configuration.HostSectio n, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
<section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPages Section, 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>

4. The Global.asax should look like this:

Global.asax

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);
}

5. Create the Examples folder within the Views one and put the following sample razor view.

Views\Examples\Index.cshtml


<!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>

6. Add the following ExamplesController.

ExamplesController.cs

public class ExamplesController : Controller
{
public ActionResult Index()
{
return View();
}
}

7. Add the following DataController.

DataController.cs

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;
}
}


Hope this helps.

EDIT

AjaxStoreResult has been renamed to StoreResult.

Timothy
Jan 15, 2012, 3:23 PM
Awesome thanks! That was a very big help in seeing some of the syntax expected with the controls :)

Cheers,
Timothy

silvio
Apr 24, 2012, 3:32 PM
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

Daniil
Apr 24, 2012, 4:36 PM
Hi @silvio,

Thanks for the feedback. Welcome to Ext.NET!

anup
May 11, 2012, 1:09 PM
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:



<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>


I *think* the rest get inherited but not quite sure (I'm still new to Razor)

2. I think AjaxStoreResult has since been renamed to StoreResult.

Daniil
May 11, 2012, 1:59 PM
Thanks, Anup, for the review.



1) Web.config I was able to minimize the razor settings to just this:



<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>


I *think* the rest get inherited but not quite sure (I'm still new to Razor)


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.


2. I think AjaxStoreResult has since been renamed to StoreResult.

Yes, that is correct.

Mauricio Rojas
May 11, 2012, 9:11 PM
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?

anup
May 11, 2012, 9:45 PM
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?

mcfromero
Aug 08, 2012, 7:40 PM

Daniil
Aug 08, 2012, 7:45 PM
Hi @mcfromero,

Please start a new forum thread.