The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[CLOSED] [2.0] MVC 3 Razor Example

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [2.0] MVC 3 Razor Example

    Hello,

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

    Cheers,
    Timothy
    Last edited by Daniil; Jan 16, 2012 at 9:56 AM. Reason: [CLOSED]
  2. #2
    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.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>
    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.
    Last edited by Daniil; Dec 18, 2012 at 6:50 AM.
  3. #3
    Awesome thanks! That was a very big help in seeing some of the syntax expected with the controls :)

    Cheers,
    Timothy
  4. #4
    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
  5. #5
    Hi @silvio,

    Thanks for the feedback. Welcome to Ext.NET!
  6. #6
    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.
  7. #7
    Thanks, Anup, for the review.

    Quote Originally Posted by anup View Post
    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.

    Quote Originally Posted by anup View Post
    2. I think AjaxStoreResult has since been renamed to StoreResult.
    Yes, that is correct.
  8. #8

    Where is the lastest Ext.NET.MVC that applies to this code samples?

    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?
  9. #9
    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?
  10. #10

    Foreach inside Razor

Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] [RAZOR] DraggablePanelConfig doesn't have StartDrag in Razor
    By UnifyEducation in forum 2.x Premium Help
    Replies: 2
    Last Post: Sep 28, 2012, 2:37 PM
  2. [CLOSED] [Razor] HyperLink Text in Razor
    By UnifyEducation in forum 2.x Premium Help
    Replies: 1
    Last Post: Jun 20, 2012, 12:16 PM
  3. [CLOSED] [Razor] Add GridView to GridPanel in razor
    By boris in forum 2.x Premium Help
    Replies: 3
    Last Post: May 09, 2012, 4:23 PM
  4. [CLOSED] [Razor] Setup Auto load panel in razor
    By UnifyEducation in forum 2.x Premium Help
    Replies: 1
    Last Post: Apr 27, 2012, 10:54 AM
  5. [CLOSED] Razor Example
    By jesperhp in forum 2.x Premium Help
    Replies: 1
    Last Post: Apr 27, 2012, 9:49 AM

Tags for this Thread

Posting Permissions