Menu
ABCpdf.NET - A C# PDF Library of true awesomeness. The ABCpdf.NET C# PDF library is a.NET component for the dynamic reading, writing, conversion and manipulation of Adobe PDF documents. PDF-Writer.NET component is designed to provide developers with an easy-to-use tool for creating standard PDF file from their applications. The commands provided for adding content to documents are similar to the ones available in the.NET Graphics class. RAD PDF - the ASP.NET PDF Reader & PDF Editor - tightly integrates PDF technology into your ASP.NET Web Forms and MVC web application. No Adobe Acrobat, Flash, or ActiveX.
-->This is an Example of a free C# PDF library. As a standalone PDF component, Free Spire.PDF for.NET enables developers to create, write, edit, convert, print, handle and read PDF files on any.NET applications. You can implement rich capabilities to create PDF files from scratch or process existing PDF. PDFView4NET lets you display PDF files in WinForms and WPF applications. It includes support for rotating pages and saving the PDF file. PDFView4NET comes with royalty free distribution. Disclaimer: I work for the company that develops PDFView4NET.
By Luke Latham, Daniel Roth, and Tobias Bartsch
View or download sample code (how to download)
Blazor apps are built using components. A component is a self-contained chunk of user interface (UI), such as a page, dialog, or form. A component includes HTML markup and the processing logic required to inject data or respond to UI events. Components are flexible and lightweight. They can be nested, reused, and shared among projects.
Component classes
Components are implemented in Razor component files (
.razor
) using a combination of C# and HTML markup. A component in Blazor is formally referred to as a Razor component.Razor syntax
Razor components in Blazor apps extensively use Razor syntax. If you aren't familiar with the Razor markup language, we recommend reading razor syntax reference for ASP.NET Core before proceeding.
When accessing the content on Razor syntax, pay special attention to the following sections:
- Directives:
@
-prefixed reserved keywords that typically change the way component markup is parsed or function. - Directive attributes:
@
-prefixed reserved keywords that typically change the way component elements are parsed or function.
Names
A component's name must start with an uppercase character. For example,
MyCoolComponent.razor
is valid, and myCoolComponent.razor
is invalid.Routing
Routing in Blazor is achieved by providing a route template to each accessible component in the app. When a Razor file with an
@page
directive is compiled, the generated class is given a RouteAttribute specifying the route template. At runtime, the router looks for component classes with a RouteAttribute and renders whichever component has a route template that matches the requested URL. For more information, see ASP.NET Core Blazor routing.Markup
The UI for a component is defined using HTML. Dynamic rendering logic (for example, loops, conditionals, expressions) is added using an embedded C# syntax called Razor. When an app is compiled, the HTML markup and C# rendering logic are converted into a component class. The name of the generated class matches the name of the file.
Members of the component class are defined in an
@code
block. In the @code
block, component state (properties, fields) is specified with methods for event handling or for defining other component logic. More than one @code
block is permissible.Component members can be used as part of the component's rendering logic using C# expressions that start with
@
. For example, a C# field is rendered by prefixing @
to the field name. The following example evaluates and renders:headingFontStyle
to the CSS property value forfont-style
.headingText
to the content of the<h1>
element.
After the component is initially rendered, the component regenerates its render tree in response to events. Blazor then compares the new render tree against the previous one and applies any modifications to the browser's Document Object Model (DOM).
Components are ordinary C# classes and can be placed anywhere within a project. Components that produce webpages usually reside in the
Pages
folder. Non-page components are frequently placed in the Shared
folder or a custom folder added to the project.Namespaces
Typically, a component's namespace is derived from the app's root namespace and the component's location (folder) within the app. If the app's root namespace is
BlazorSample
and the Counter
component resides in the Pages
folder:- The
Counter
component's namespace isBlazorSample.Pages
. - The fully qualified type name of the component is
BlazorSample.Pages.Counter
.
For custom folders that hold components, add a
@using
directive to the parent component or to the app's _Imports.razor
file. The following example makes components in the Components
folder available:Components can also be referenced using their fully qualified names, which doesn't require the
@using
directive:The namespace of a component authored with Razor is based on (in priority order):
@namespace
designation in Razor file (.razor
) markup (@namespace BlazorSample.MyNamespace
).- The project's
RootNamespace
in the project file (<RootNamespace>BlazorSample</RootNamespace>
). - The project name, taken from the project file's file name (
.csproj
), and the path from the project root to the component. For example, the framework resolves{PROJECT ROOT}/Pages/Index.razor
(BlazorSample.csproj
) to the namespaceBlazorSample.Pages
. Components follow C# name binding rules. For theIndex
component in this example, the components in scope are all of the components:- In the same folder,
Pages
. - The components in the project's root that don't explicitly specify a different namespace.
- In the same folder,
Note
The
global::
qualification isn't supported.Importing components with aliased
using
statements (for example, @using Foo = Bar
) isn't supported.Partially qualified names aren't supported. For example, adding
@using BlazorSample
and referencing the NavMenu
component (NavMenu.razor
) with <Shared.NavMenu></Shared.NavMenu>
isn't supported.Partial class support
Razor components are generated as partial classes. Razor components are authored using either of the following approaches:
- C# code is defined in an
@code
block with HTML markup and Razor code in a single file. Blazor templates define their Razor components using this approach. - C# code is placed in a code-behind file defined as a partial class.
The following example shows the default
Counter
component with an @code
block in an app generated from a Blazor template. HTML markup, Razor code, and C# code are in the same file:Pages/Counter.razor
:The
Counter
component can also be created using a code-behind file with a partial class:Pages/Counter.razor
:Counter.razor.cs
:Add any required namespaces to the partial class file as needed. Typical namespaces used by Razor components include:
Important
@using
directives in the _Imports.razor
file are only applied to Razor files (.razor
), not C# files (.cs
).![Net Pdf Component Net Pdf Component](https://i1.rgstatic.net/publication/237411571_Component_Programming_with_C_and_NET/links/0046352a03e87134e4000000/largepreview.png)
Specify a base class
The
@inherits
directive can be used to specify a base class for a component. The following example shows how a component can inherit a base class, BlazorRocksBase
, to provide the component's properties and methods. The base class should derive from ComponentBase.Pages/BlazorRocks.razor
:BlazorRocksBase.cs
:Use components
Components can include other components by declaring them using HTML element syntax. The markup for using a component looks like an HTML tag where the name of the tag is the component type.
The following markup in
Pages/Index.razor
renders a HeadingComponent
instance:Components/HeadingComponent.razor
:If a component contains an HTML element with an uppercase first letter that doesn't match a component name, a warning is emitted indicating that the element has an unexpected name. Adding an
@using
directive for the component's namespace makes the component available, which resolves the warning.Parameters
Route parameters
Components can receive route parameters from the route template provided in the
@page
directive. The router uses route parameters to populate the corresponding component parameters.Pages/RouteParameter.razor
:Optional parameters aren't supported, so two
@page
directives are applied in the preceding example. The first permits navigation to the component without a parameter. The second @page
directive receives the {text}
route parameter and assigns the value to the Text
property.For information on catch-all route parameters (
{*pageRoute}
), which capture paths across multiple folder boundaries, see ASP.NET Core Blazor routing.Component parameters
Components can have component parameters, which are defined using public properties on the component class with the
[Parameter]
attribute. Use attributes to specify arguments for a component in markup.Components/ChildComponent.razor
:In the following example from the sample app, the
ParentComponent
sets the value of the Title
property of the ChildComponent
.Pages/ParentComponent.razor
:Warning
Don't create components that write to their own component parameters when the component's content is rendered with a RenderFragment, use a private field instead. For more information, see the Overwritten parameters with
RenderFragment
section.Child content
Components can set the content of another component. The assigning component provides the content between the tags that specify the receiving component.
In the following example, the
ChildComponent
has a ChildContent
property that represents a RenderFragment, which represents a segment of UI to render. The value of ChildContent
is positioned in the component's markup where the content should be rendered. The value of ChildContent
is received from the parent component and rendered inside the Bootstrap panel's panel-body
.Components/ChildComponent.razor
:Note
The property receiving the RenderFragment content must be named
ChildContent
by convention.The
ParentComponent
in the sample app can provide content for rendering the ChildComponent
by placing the content inside the <ChildComponent>
tags.Pages/ParentComponent.razor
:Due to the way that Blazor renders child content, rendering components inside a
for
loop requires a local index variable if the incrementing loop variable is used in the child component's content:Alternatively, use a
foreach
loop with Enumerable.Range:Attribute splatting and arbitrary parameters
Components can capture and render additional attributes in addition to the component's declared parameters. Additional attributes can be captured in a dictionary and then splatted onto an element when the component is rendered using the
@attributes
Razor directive. This scenario is useful when defining a component that produces a markup element that supports a variety of customizations. For example, it can be tedious to define attributes separately for an <input>
that supports many parameters.In the following example, the first
<input>
element (id='useIndividualParams'
) uses individual component parameters, while the second <input>
element (id='useAttributesDict'
) uses attribute splatting:The type of the parameter must implement
IEnumerable<KeyValuePair<string, object>>
or IReadOnlyDictionary<string, object>
with string keys.The rendered
<input>
elements using both approaches is identical:To accept arbitrary attributes, define a component parameter using the
[Parameter]
attribute with the CaptureUnmatchedValues property set to true
:The CaptureUnmatchedValues property on
[Parameter]
allows the parameter to match all attributes that don't match any other parameter. A component can only define a single parameter with CaptureUnmatchedValues. The property type used with CaptureUnmatchedValues must be assignable from Dictionary<string, object>
with string keys. IEnumerable<KeyValuePair<string, object>>
or IReadOnlyDictionary<string, object>
are also options in this scenario.The position of
@attributes
relative to the position of element attributes is important. When @attributes
are splatted on the element, the attributes are processed from right to left (last to first). Consider the following example of a component that consumes a Child
component:ParentComponent.razor
:ChildComponent.razor
:.net Pdf Component
The
Child
component's extra
attribute is set to the right of @attributes
. The Parent
component's rendered <div>
contains extra='5'
when passed through the additional attribute because the attributes are processed right to left (last to first):In the following example, the order of
extra
and @attributes
is reversed in the Child
component's <div>
:ParentComponent.razor
:ChildComponent.razor
:The rendered
<div>
in the Parent
component contains extra='10'
when passed through the additional attribute:Capture references to components
Component references provide a way to reference a component instance so that you can issue commands to that instance, such as
Show
or Reset
. To capture a component reference:- Add an
@ref
attribute to the child component. - Define a field with the same type as the child component.
When the component is rendered, the
loginDialog
field is populated with the MyLoginDialog
child component instance. You can then invoke .NET methods on the component instance.Important
The
loginDialog
variable is only populated after the component is rendered and its output includes the MyLoginDialog
element. Until the component is rendered, there's nothing to reference.To manipulate components references after the component has finished rendering, use the
OnAfterRenderAsync
or OnAfterRender
methods.To use a reference variable with an event handler, use a lambda expression or assign the event handler delegate in the
OnAfterRenderAsync
or OnAfterRender
methods. This ensures that the reference variable is assigned before the event handler is assigned.To reference components in a loop, see Capture references to multiple similar child-components (dotnet/aspnetcore #13358).
While capturing component references use a similar syntax to capturing element references, it isn't a JavaScript interop feature. Component references aren't passed to JavaScript code. Component references are only used in .NET code.
Note
Do not use component references to mutate the state of child components. Instead, use normal declarative parameters to pass data to child components. Use of normal declarative parameters result in child components that rerender at the correct times automatically.
Synchronization context
Blazor uses a synchronization context (SynchronizationContext) to enforce a single logical thread of execution. A component's lifecycle methods and any event callbacks that are raised by Blazor are executed on the synchronization context.
Blazor Server's synchronization context attempts to emulate a single-threaded environment so that it closely matches the WebAssembly model in the browser, which is single threaded. At any given point in time, work is performed on exactly one thread, giving the impression of a single logical thread. No two operations execute concurrently.
Avoid thread-blocking calls
Generally, don't call the following methods. The following methods block the thread and thus block the app from resuming work until the underlying Task is complete:
Invoke component methods externally to update state
In the event a component must be updated based on an external event, such as a timer or other notifications, use the
InvokeAsync
method, which dispatches to Blazor's synchronization context. For example, consider a notifier service that can notify any listening component of the updated state:Register the
NotifierService
:- In Blazor WebAssembly, register the service as singleton in
Program.Main
: - In Blazor Server, register the service as scoped in
Startup.ConfigureServices
:
Use the
NotifierService
to update a component:In the preceding example,
NotifierService
invokes the component's OnNotify
method outside of Blazor's synchronization context. InvokeAsync
is used to switch to the correct context and queue a render.Use @key to control the preservation of elements and components
When rendering a list of elements or components and the elements or components subsequently change, Blazor's diffing algorithm must decide which of the previous elements or components can be retained and how model objects should map to them. Normally, this process is automatic and can be ignored, but there are cases where you may want to control the process.
Consider the following example:
The contents of the
People
collection may change with inserted, deleted, or re-ordered entries. When the component rerenders, the <DetailsEditor>
component may change to receive different Details
parameter values. This may cause more complex rerendering than expected. In some cases, rerendering can lead to visible behavior differences, such as lost element focus.The mapping process can be controlled with the
@key
directive attribute. @key
causes the diffing algorithm to guarantee preservation of elements or components based on the key's value:When the
People
collection changes, the diffing algorithm retains the association between <DetailsEditor>
instances and person
instances:- If a
Person
is deleted from thePeople
list, only the corresponding<DetailsEditor>
instance is removed from the UI. Other instances are left unchanged. - If a
Person
is inserted at some position in the list, one new<DetailsEditor>
instance is inserted at that corresponding position. Other instances are left unchanged. - If
Person
entries are re-ordered, the corresponding<DetailsEditor>
instances are preserved and re-ordered in the UI.
In some scenarios, use of
@key
minimizes the complexity of rerendering and avoids potential issues with stateful parts of the DOM changing, such as focus position.Important
Keys are local to each container element or component. Keys aren't compared globally across the document.
When to use @key
Typically, it makes sense to use
@key
whenever a list is rendered (for example, in a foreach block) and a suitable value exists to define the @key
.You can also use
@key
to prevent Blazor from preserving an element or component subtree when an object changes:If
@currentPerson
changes, the @key
attribute directive forces Blazor to discard the entire <div>
and its descendants and rebuild the subtree within the UI with new elements and components. This can be useful if you need to guarantee that no UI state is preserved when @currentPerson
changes.When not to use @key
There's a performance cost when diffing with
@key
. The performance cost isn't large, but only specify @key
if controlling the element or component preservation rules benefit the app.Even if
@key
isn't used, Blazor preserves child element and component instances as much as possible. The only advantage to using @key
is control over how model instances are mapped to the preserved component instances, instead of the diffing algorithm selecting the mapping.What values to use for @key
Generally, it makes sense to supply one of the following kinds of value for
@key
:- Model object instances (for example, a
Person
instance as in the earlier example). This ensures preservation based on object reference equality. - Unique identifiers (for example, primary key values of type
int
,string
, orGuid
).
Ensure that values used for
@key
don't clash. If clashing values are detected within the same parent element, Blazor throws an exception because it can't deterministically map old elements or components to new elements or components. Only use distinct values, such as object instances or primary key values.Overwritten parameters with RenderFragment
Parameters are overwritten under the following conditions:
- A child component's content is rendered with a RenderFragment.
- StateHasChanged is called in the parent component.
Parameters are reset because the parent component rerenders when StateHasChanged is called and new parameter values are supplied to the child component.
Consider the following
Expander
component that:- Renders child content.
- Toggles showing child content with a component parameter.
The
Expander
component is added to a parent component that may call StateHasChanged: Vocal remover online converter.Initially, the
Expander
components behave independently when their Expanded
properties are toggled. The child components maintain their states as expected. When StateHasChanged is called in the parent, the Expanded
parameter of the first child component is reset back to its initial value (true
). The second Expander
component's Expanded
value isn't reset because no child content is rendered in the second component.To maintain state in the preceding scenario, use a private field in the
Expander
component to maintain its toggled state.The following revised
Expander
component:- Accepts the
Expanded
component parameter value from the parent. - Assigns the component parameter value to a private field (
expanded
) in the OnInitialized event. - Uses the private field to maintain its internal toggle state.
Apply an attribute
Attributes can be applied to Razor components with the
@attribute
directive. The following example applies the [Authorize]
attribute to the component class:Conditional HTML element attributes
HTML element attributes are conditionally rendered based on the .NET value. If the value is
false
or null
, the attribute isn't rendered. If the value is true
, the attribute is rendered minimized.In the following example,
IsCompleted
determines if checked
is rendered in the element's markup:If
IsCompleted
is true
, the check box is rendered as:.net Framework Components Pdf
If
IsCompleted
is false
, the check box is rendered as:For more information, see razor syntax reference for ASP.NET Core.
Warning
![Pdf Pdf](https://image.slidesharecdn.com/ccreatepdffromexcel-110725010631-phpapp02/95/c-create-pdf-from-excel-1-728.jpg?cb=1311556030)
Some HTML attributes, such as
aria-pressed
, don't function properly when the .NET type is a bool
. In those cases, use a string
type instead of a bool
.Raw HTML
Strings are normally rendered using DOM text nodes, which means that any markup they may contain is ignored and treated as literal text. To render raw HTML, wrap the HTML content in a
MarkupString
value. The value is parsed as HTML or SVG and inserted into the DOM.Warning
Rendering raw HTML constructed from any untrusted source is a security risk and should be avoided!
The following example shows using the
MarkupString
type to add a block of static HTML content to the rendered output of a component:Razor templates
Render fragments can be defined using Razor template syntax. Razor templates are a way to define a UI snippet and assume the following format:
The following example illustrates how to specify RenderFragment and RenderFragment<TValue> values and render templates directly in a component. Render fragments can also be passed as arguments to templated components.
Rendered output of the preceding code:
Static assets
Blazor follows the convention of ASP.NET Core apps placing static assets under the project's
web root (wwwroot)
folder.Use a base-relative path (
/
) to refer to the web root for a static asset. In the following example, logo.png
is physically located in the {PROJECT ROOT}/wwwroot/images
folder:Razor components do not support tilde-slash notation (
~/
).For information on setting an app's base path, see Host and deploy ASP.NET Core Blazor.
Tag Helpers aren't supported in components
Tag Helpers
aren't supported in Razor components (.razor
files). To provide Tag Helper-like functionality in Blazor, create a component with the same functionality as the Tag Helper and use the component instead.Scalable Vector Graphics (SVG) images
Since Blazor renders HTML, browser-supported images, including Scalable Vector Graphics (SVG) images (
.svg
), are supported via the <img>
tag:Similarly, SVG images are supported in the CSS rules of a stylesheet file (
.css
):However, inline SVG markup isn't supported in all scenarios. If you place an
<svg>
tag directly into a component file (.razor
), basic image rendering is supported but many advanced scenarios aren't yet supported. For example, <use>
tags aren't currently respected, and @bind
can't be used with some SVG tags. For more information, see SVG support in Blazor (dotnet/aspnetcore #18271).Additional resources
- Threat mitigation guidance for ASP.NET Core Blazor Server: Includes guidance on building Blazor Server apps that must contend with resource exhaustion.