{"id":12355,"date":"2018-03-01T10:00:26","date_gmt":"2018-03-01T18:00:26","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/?p=12355"},"modified":"2018-03-01T10:00:26","modified_gmt":"2018-03-01T18:00:26","slug":"asp-net-core-2-1-razor-ui-in-class-libraries","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/asp-net-core-2-1-razor-ui-in-class-libraries\/","title":{"rendered":"ASP.NET Core 2.1.0-preview1: Razor UI in class libraries"},"content":{"rendered":"

One frequently requested scenario that ASP.NET Core 2.1 improves is building UI in reusable class libraries. With ASP.NET Core 2.1 you can package your Razor views and pages (.cshtml files) along with your controllers, page models, and data models in reusable class libraries that can be packaged and shared. Apps can then include pre-built UI components by referencing these packages and customize the UI by overriding specific views and pages.<\/p>\n

To try out building Razor UI in a class library first install the .NET Core SDK for 2.1.0-preview1<\/a>.<\/p>\n

Create an ASP.NET Core Web Application by running dotnet new razor<\/code> or selecting the corresponding template in Visual Studio. The default template has fivestandard pages: Home, About, Contact, Error, and Privacy. Let’s move the Contact page into a class library. Add a .NET Standard class library to the solution and reference it from the ASP.NET Core Web Application.<\/p>\n

We need to make some modifications to the class library .csproj file to enable Razor compilation. We need to set the RazorCompileOnBuild<\/code>, IncludeContentInPack<\/code>, and ResolvedRazorCompileToolset<\/code> MSBuild properties as well as add the .cshtml files as content and also a package reference to Microsoft.AspNetCore.Mvc<\/a>. Your class library project file should look like this:<\/p>\n

ClassLibrary1.csproj<\/strong><\/p>\n

<Project<\/span> Sdk<\/span>=\"Microsoft.NET.Sdk\"<\/span>><\/span>\n\n  <PropertyGroup<\/span>><\/span>\n    <TargetFramework<\/span>><\/span>netstandard2.0<\/TargetFramework<\/span>><\/span>\n    <ResolvedRazorCompileToolset<\/span>><\/span>RazorSdk<\/ResolvedRazorCompileToolset<\/span>><\/span>\n    <RazorCompileOnBuild<\/span>><\/span>true<\/RazorCompileOnBuild<\/span>><\/span>\n    <IncludeContentInPack<\/span>><\/span>false<\/IncludeContentInPack<\/span>><\/span>\n  <\/PropertyGroup<\/span>><\/span>\n\n  <ItemGroup<\/span>><\/span>\n    <Content<\/span> Include<\/span>=\"Pages***.cshtml\"<\/span> \/><\/span>\n  <\/ItemGroup<\/span>><\/span>\n\n  <ItemGroup<\/span>><\/span>\n    <PackageReference<\/span> Include<\/span>=\"Microsoft.AspNetCore.Mvc\"<\/span> Version<\/span>=\"2.1.0-preview1-final\"<\/span> \/><\/span>\n  <\/ItemGroup<\/span>><\/span>\n\n<\/Project<\/span>><\/span>\n<\/code><\/pre>\n
For Preview1 making these project file modifications is a manual step, but in future previews we will provide a Razor MSBuild SDK (Microsoft.NET.Sdk.Razor) as well as project templates to handle these details for you.<\/p>\n
Now we can add some Razor files to our class library. Add a Pages<\/code> directory to the class library project and move over the Contact page along with its page model (Contact.cshtml<\/code>, Contact.cshtml.cs<\/code>) from the web app project. You’ll also need to move over _ViewImports.cshtml<\/code> to get the necessary using statements.<\/p>\n
\"Class<\/p>\n
Add some content to the Contact.cshtml<\/code> file so you can tell it’s being used.<\/p>\n
@page<\/span>\n@model<\/span> ContactModel\n@{<\/span>\n    ViewData[\"Title\"<\/span>] = \"Contact\"<\/span>;\n}\n<h2><\/span>@ViewData[\"Title\"]<\/h2><\/span>\n<h3><\/span>@Model.Message<\/h3><\/span>\n\n<h2><\/span>BTW, this is from a Class Library!<\/h2><\/span>\n<\/code><\/pre>\n
Run the app and browse to the Contact page.<\/p>\n
\"Contact<\/p>\n
You can override views and pages from a class library in your app by putting the page or view at the same path in your app. For example, let’s add a _Message.cshtml<\/code> partial view that gets called from the contact page.<\/p>\n
In the class library project add a Shared<\/code> folder under the Pages<\/code> folder and add the following partial view:<\/p>\n
_Message.cshtml<\/strong><\/p>\n
<h2<\/span>><\/span>You can override me!<\/h2<\/span>><\/span>\n<\/code><\/pre>\n
Then call the _Message<\/code> partial from the contact page using the new partial tag helper.<\/p>\n
Contact.cshtml<\/strong><\/p>\n
@page<\/span>\n@model<\/span> ContactModel\n@{<\/span>\n    ViewData[\"Title\"<\/span>] = \"Contact\"<\/span>;\n}\n<h2><\/span>@ViewData[\"Title\"]<\/h2><\/span>\n<h3><\/span>@Model.Message<\/h3><\/span>\n\n<h2><\/span>BTW, this is from a Class Library!<\/h2><\/span>\n\n<partial name=\"_Message\" \/><\/span>\n<\/code><\/pre>\n
Run the app to see that the partial is now rendered.<\/p>\n
\"Contact<\/p>\n
Now override the partial by adding a _Message.cshtml<\/code> file to the web app under the \/Pages\/Shared<\/code> folder.<\/p>\n
_Message.cshtml<\/strong><\/p>\n
<h2<\/span>><\/span>Overridden!<\/h2<\/span>><\/span>\n<\/code><\/pre>\n
Rebuild and run the app to see the update.<\/p>\n
\"Overridden<\/p>\n
Summary<\/h3>\n
By compiling Razor views and pages into shareable libraries you can reuse existing UI with minimal effort. Please give this feature a try and let us know what you think on GitHub<\/a>. Thanks!<\/p>\n","protected":false},"excerpt":{"rendered":"
One frequently requested scenario that ASP.NET Core 2.1 improves is building UI in reusable class libraries. With ASP.NET Core 2.1 you can package your Razor views and pages (.cshtml files) along with your controllers, page models, and data models in reusable class libraries that can be packaged and shared. Apps can then include pre-built UI […]<\/p>\n","protected":false},"author":417,"featured_media":21391,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197,7509],"tags":[7542,7547,7384,7548],"class_list":["post-12355","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","category-aspnetcore","tag-asp-net-core-2-1-0-preview1","tag-libraries","tag-razor","tag-ui"],"acf":[],"blog_post_summary":"
One frequently requested scenario that ASP.NET Core 2.1 improves is building UI in reusable class libraries. With ASP.NET Core 2.1 you can package your Razor views and pages (.cshtml files) along with your controllers, page models, and data models in reusable class libraries that can be packaged and shared. Apps can then include pre-built UI […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/12355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/417"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=12355"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/12355\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/21391"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=12355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=12355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=12355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}