vs2019:devExpress设置blazor工程

2021-02-03 10:15:16 浏览数 (1)

原文：

https://docs.devexpress.com/Blazor/401986/getting-started/install-components-and-create-an-application/without-devexpress-installer/microsoft-templates#2-obtain-your-devexpress-nuget-feed

This topic describes how to:

  • Use Microsoft templates to create a Blazor project
  • Install the DevExpress.Blazor NuGet package that includes DevExpress components
  • Add DevExpress components to a project
NOTE

These instructions are also available in the following videos:

  • Get Started with Blazor Server
  • Get Started with Blazor WebAssembly

1. Create a New Project

The steps below describe how to create a new Blazor project. If you want to add DevExpress Blazor components to an existing application, go to Step 2.

  1. Click Create a new project on Visual Studio's start page, select the Blazor App template, and click Next.
  1. Specify the project name and location, and click Create.
  1. Select a template and click Create. Blazor Server App

2. Obtain Your DevExpress NuGet Feed

You need to obtain your personal NuGet feed URL to access the DevExpress.Blazor NuGet package from your project.

  1. Make sure your DevExpress.com account has access to Blazor UI Components. This product line is available as part of the Universal, DXperience, or ASP.NET subscription. Refer to the subscription comparison matrix for more information.
  2. Use your DevExpress credentials to log into nuget.devexpress.com .
  3. Obtain your NuGet feed URL and copy it to the clipboard. You can find the same URL in the Download Manager .

3. Install the DevExpress Blazor NuGet Package

  1. In Visual Studio, select Tools -> NuGet Package Manager -> Package Manager Settings.
  1. Navigate to NuGet Package Manager -> Package Sources. Click the plus sign at the top right corner to add a new NuGet package source. Use the following package settings: Click OK. NOTE Make sure the nuget.org package source is also enabled.
  • Name - DevExpress
  • Source - the obtained NuGet Feed URL (https://nuget.devexpress.com/{your feed authorization key}/api)
  1. Select Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution.
  2. In the invoked dialog, open the Browse tab, select the created DevExpress package source, and install the DevExpress.Blazor NuGet package.
  1. Build the project.

4. Register DevExpress Resources

Blazor Server

Add the following line to the Pages/_Host.cshtml file's HEAD section:

代码语言：javascript复制
<head>
    <!--...-->
    <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
</head>

Register the DevExpress.Blazor namespace in the _Imports.razor file:

代码语言：javascript复制
@using DevExpress.Blazor

Blazor WebAssembly

Add the following line to the wwwroot/index.html file's HEAD section:

代码语言：javascript复制
<head>
    <!--...-->
    <link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />
</head>

Call the AddDevExpressBlazor(IServiceCollection, Action<GlobalOptions>) method from your project's Program.Main() method:

代码语言：javascript复制
using Microsoft.Extensions.DependencyInjection;

public class Program {
    public static async Task Main(string[] args) {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        // ...
        builder.Services.AddDevExpressBlazor();
        await builder.Build().RunAsync();
    }
}

Register the DevExpress.Blazor namespace in the _Imports.razor file:

代码语言：javascript复制
@using DevExpress.Blazor

Configure the linker as described in Configure the Linker for ASP.NET Core Blazor .

If you enabled the ASP.NET Core hosted option when you create the project, make sure that the server-side project is set as the solution's startup project.

5. Add DevExpress Blazor Components

For instructions on how to add an individual DevExpress Blazor component to your application, refer to the documents below:

  • Data Grid
  • Pivot Grid
  • Chart
  • Reports
  • Scheduler
  • Data editors
    • Calendar
    • CheckBox
    • ComboBox
    • Date Edit
    • List Box
    • Memo
    • Spin Edit
    • TagBox
    • Text Box
    • Time Edit
  • Button
  • Navigation and Layout components
    • Context Menu
    • Form Layout
    • Grid Layout
    • Layout Breakpoint
    • Stack Layout
    • Pager
    • Popup
    • Tabs
    • Toolbar
    • TreeView
  • Upload
  • Rich Text Editor
express ide php asp.net jquery

0 人点赞