Log in to like this post! ASP.NET Core - Using Ignite UI components Ignite UI Team / Wednesday, November 2, 2016 ASP.NET Core 1.0 is here, providing some new and exciting features that we can’t wait to get our hands on! We’ll take a look at some of the key features and concepts that were introduced as part of the redesigned ASP.NET Core together with examples on how to incorporate them with a cool components toolkit for modern web development that will Ignite your UI. The Ignite UI is a complete HTML & JavaScript toolkit for building modern cross-browser experiences. It comes with MVC wrappers, which now take full advantage of the new ASP.NET Core 1.0 and all its new goodness. They wrap the client controls in a server-side set of MVC Extensions that allow the controls to be defined in ASPX or Razor syntax. They provide a compact and expressive syntax that will feel very familiar to C#/VB developers as well as great IntelliSense support. How does it get distributed? With the new ASP.NET most modules are now wrapped NuGet packages. This allows you to retrieve and use only the specific modules you need for your app, without having to depend on a common assembly (like the System.Web.dll in previous versions of ASP.NET). All dependencies of the specific module will be restored out the box. As such our new MVC wrappers built on top of ASP.NET Core will also ship as NuGet package. To include the package via Visual Studio’s UI simply open the “Manage NuGet Packages…” window type in “Infragistics.Web.Mvc” and install it. You can also directly edit the project.json file by adding a new entry for the assembly to the project’s dependencies: "dependencies": { … "Infragistics.Web.Mvc": "6.15.2.1" } Visual Studio will restore all packages and their dependencies and you’re ready to code. It is that easy! Run, build and distribute anywhere The new cross-platform support for Windows, Linux and Mac is by far the most anticipated improvement introduces with ASP.NET Core. With this addition we can now fully develop, build and run our web application on any of those environments. The whole process is made simpler by using Visual Studio Code, which is a nice lightweight text editor with plugins that support editing and debugging an ASP.NET Core applications. The cool new .NET Core Command Line Interface also provides a simple and unified way of creating, building, running, packing and publishing your web application. The tool is cross-platform and can be used the same way on each of the supported environments. Additionally, you can take advantage of a set of templates very similar to the ones available in Visual Studio 2015 via the Yeoman templates for ASP.NET. Let’s try those out! For this example, we’ll create a new web application utilizing the Ignite UI toolset on Mac, which we’ll then build and run. We’ll start by creating a new application from a Yeoman template: This will create a basic Web application similar to the Visual Studio default template. The application will be created in the current directory and can then be further modified via Visual Studio Code. We’ll then open and edit it, adding the Ignite UI toolset to display some tabular data. The assemblies used in the project can be modified by adding/removing them from the project.json file. In order to add the Ignite UI MVC wrappers to our project we can add the reference to “Infragistics.Web.Mvc” assembly in the dependencies list, for example: After all needed references are in place the “dotnet restore” command can be executed in the console in the directory of the project.json file in order for the related NuGet packages to be downloaded. Once the packages are restored we can continue modifying the solution using the additional UI components the Ignite UI toolset provides. We’ll add a simple grid that’s pulling data from a MVC controller action. There are two possible ways to define the control in the application: - By configuring a Model class and passing it as an argument in the grid extension method. Refer to the example below. Model definition: Passing it to the grid extension method in the view: - By defining the control in the View using chaining syntax. Defining the control in the view is achieved by exposing properties and methods through helper’s methods that always return the same object that called them. For example: Both configuration methods for defining the control will yield the same result. For the controller action that will return the data we’re just generating some data in a List and returning it to the View as Queryale. You can see that the Action is decorated with a GridDataSourceActionAttribute attribute. This is an Ignite UI Grid specific action filter which processes the passed IQueryable data, transforms it according to the request parameters and returns it as JsonResult. This allows remote features for the grid, like remote paging, filtering, sorting etc. to work out of the box when this attribute is set for the action returning the data, so that no additional coding is required to handle these remote scenarios. All necessary data processing will be handled by the Action filter. Once we’re done with the modifications we can then build and run the application via the console using the .NET Core Command Line Interface. We can then open the application and view the result in the browser: Handling file uploading with Middleware In the old ASP.NET in order to handle more robust file uploading capabilities as multiple file uploads, large file uploads and reporting of the progress of an upload you would have to implement an HttpModule and/or HttpHandler in order to plug into the into the HTTP Request process. ASP.NET Core introduces a new request pipeline built around a new middleware definition. The new request pipeline allows you full control over the order in which the requests are handled. You can also stop the process and return the response to the client at any stage, preventing the pipeline from continuing processing the request when not needed. The Ignite UI file upload fully utilizes the new middleware definition model and can be plugged into the pipeline. It’s important to remember that the request will be processed in the order in which the middleware components are added to the pipeline, so it’s important to plug the Ignite UI middleware at the correct time. The default template that ships with Visual Studio 2015 adds the following middleware components: - Error handling - Static file server - Authentication - MVC If we’d also like to plug the file uploading middleware, we should consider the order in which these modules will be called. The exception handling middleware should be the first one added to pipeline in order to catch any exceptions that occur in later call. Then the static file module in order to handle the serving of static file from under the wwwroot directory. Depending on whether or not we want the file uploading to go through Authentication we may decide whether to add it before or after the Authentication module. And lastly the MVC module can be added in order to process the remaining requests. Let’s look at the following example configuration with the igUpload’s two modules – one for handling uploads and one for receiving commands from the client and returning status feedback to the client. In order to add them to the pipeline we need to include them in the Configure method of the Startup.cs class. public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) { … app.UseUploadModuleMiddleware(); app.UseUploadHandlerMiddleware(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); We can then setup the control in the View And start it up, upload a file and see the result. And to wrap it all up… With the introduced cross-platform support, distribution model and request pipeline, ASP.NET Core has never been more tuned for modern web development. This gives you the opportunity to easily incorporate third party libraries that will boost your productivity and enhance your UI. The Ignite UI contains a full set of UI components to bring your user experience to the next level and enable you to build modern web experiences on any device. So if you’re looking for a performant and feature rich toolset that plays well with other popular client-side libraries and also has MVC wrappers for your ASP.NET Core application you may have found your perfect match. Check out Ignite UI’s website for more information and ASP.NET Core goodness with our released, fully integrated Tag Helpers!