Current filter:
                                You should refresh the page.
                                Support Center
                                0
                                  • In version 2010 volume 1, DevExpress introduces a set of the ASP.NET MVC framework dedicated controls - the DevExpress Extensions for ASP.NET MVC. These extensions are designed to conform to the primary MVC concepts. They are intended to operate seamlessly within Views - MVC components that display the application's user interface (UI).

                                You must  log in  or  register  to leave comments

                                1 Solution

                                0

                                The DevExpress Extensions for ASP.NET MVC are implemented using the capabilities of the ASP.NET MVC framework and the jQuery library, officially acknowledged by Microsoft. Wrapping our industry recognized ASP.NET controls, the DevExpress Extensions for ASP.NET MVC leverage their powerful functionality and well-grounded API. At the same time, our MVC Extensions behave in the native MVC manner, providing a lightweight semantic rendering, supporting the separation of concerns paradigm and maintaining ease of testing.

                                Details of Implementation

                                We extend the standard HTML Helper class (Html) with our own DevExpress() extension method. It returns an extensions factory object, which implements a set of HTML helper methods providing access directly to our MVC extensions. Each DevExpress MVC extension object accepts control specific settings as a parameter, and provides methods allowing you to data bind and render the control. Commonly, our settings objects are a type of our ASP.NET control specific API wrappers. They encapsulate the publicly available settings (properties and methods), allowing you to fine tune our MVC extension.

                                Syntactically, when calling our HTML helper method within a View, an extension's settings can be defined in the following two ways.

                                ************************************************
                                Using a Settings Delegate within a View

                                You can use a lambda expression, which is just a very concise way to construct the settings tree. This approach is compact, and it is well suited for customizing settings directly within a View.

                                <%
                                   Html.DevExpress().Menu(
                                       settings =>
                                           {
                                               settings.Name = "myMenu";
                                               settings.Orientation = Orientation.Vertical;
                                               settings.ShowPopOutImages = DefaultBoolean.True;
                                           })
                                       .Bind(Model)
                                       .Render();
                                %>

                                ************************************************

                                Passing a Settings Object from a Controller

                                You can create and initialize a settings object within a Controller, and pass this object to a View. This approach requires more coding. However, it might be helpful, when it's required to pass the same settings to different Views. For instance, you might want to have a Menu with the same look, behavior and item hierarchy within more than one View.

                                Controller Code:

                                public ActionResult Index(){
                                   MenuSettings settings = new MenuSettings();
                                   settings.Name = "myMenu";
                                   settings.Orientation = Orientation.Vertical;
                                   settings.ShowPopOutImages = DefaultBoolean.True;
                                   ViewData["MenuSettings"] = settings;
                                   return View();
                                }

                                View Code:

                                <%
                                   MenuSettings settings = (MenuSettings)ViewData["MenuSettings"];
                                   Html.DevExpress().Menu(settings)
                                       .Bind(Model)
                                       .Render();
                                %>

                                ************************************************

                                As the previous code illustrates, after defining settings, it might be required to bind an extension to data. For this purpose, the Bind method of extension objects can be used. This method allows you to bind an extension to a Model (your business data objects), which is passed to a View from the Controller. Note that our navigation extensions (such as Menu, NavBar, etc) also provide the BindToXml and BindToSiteMap methods, to easily bind them directly to XML or SITEMAP files.

                                Finally, the Render method of an extension object should always be called to render the HTML markup into a View. Note that calling the Render method is obligatory; otherwise, an extension will not produce any HTML output.

                                For your convenience, the table below shows the currently available DevExpress Extensions for ASP.NET MVC and lists the corresponding HTML helper methods, extension and settings objects, and the wrapped ASP.NET controls.

                                Demos Structure

                                To demonstrate the DevExpress Extensions for ASP.NET MVC in action, we've prepared a demo application, which can be accessed online at: http://mvc.devexpress.com/. Technically, this demo is implemented as a single MVC application.

                                In this application, the content, which is common to all demos (such as the heading, navigation panel, description and code viewer, footer), is implemented as a shared master page. Its code can be viewed by using the 'Master' tab within each demo. In this demo, the master page implements the logic of attaching the required CSS and JavaScript files by using our RenderStyleSheets and RenderScripts extension methods, respectively. The RenderStyleSheets method's overloads allow different themes and skins to be selectively linked to individual extensions. Calls to the RenderScripts method attach extension specific client scripts.

                                Control specific demos are visually combined into groups (such as the GridView, Menu, etc). They can be accessed via the left navigation panel. Technically, each control group is managed using a group specific Controller object, and each demo within a group is represented by an individual View. A Controller implements a set of Actions, which are used to redirect the response to the requested View within a group. The implementation of a group specific Controller can be reviewed via the 'Controller' tab within a demo page. To inspect the View code of the demo you are browsing, use the 'View' tab.

                                When a DevEpxress MVC extension works in the callback mode (it requests the server via its own callbacks), the corresponding View always uses a Partial View (.ascx) to render the extension. In this case, a Controller contains an additional Action to redirect callbacks directly to the Partial View. This allows the render of the extension to be conditionally updated in response to the end-user action performed. Callback routing logic is defined using the extension object's CallbackRouteValues property, which allows the names of callback handling Controller and Action to be specified. The markup of a demo's Partial View can be observed using the 'View(partial)' tab.

                                When an extension's client functionality is managed using custom written JavaScript within a demo, the script code can be browsed using the 'View(script)' tab.

                                -----------------------------------------------------------------------
                                See Also:
                                K18376

                                You must  log in  or  register  to leave comments

                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2014 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners