Tag: asp.net

public class CustomValidator : ComponentBase
{
    private ValidationMessageStore messageStore;
    [CascadingParameter] public EditContext CurrentEditContext { get; set; }

    protected override void OnInitialized()
    {
        if (CurrentEditContext == null)
        {
            throw new InvalidOperationException(
                "To use validator component your razor page should have the edit component");
        }

        messageStore = new ValidationMessageStore(CurrentEditContext);
        
        // Clear Error Message On Raise Of OnValidationRequested Form Event
        CurrentEditContext.OnValidationRequested += (s, e) => messageStore.Clear();
        
        // Clear Error Message On Input Field Change Event
        CurrentEditContext.OnFieldChanged += (s, e) => messageStore.Clear(e.FieldIdentifier);
    }

    public void DisplayErrors(Dictionary<string, List<string>> errors)
    {
        foreach (var error in errors)
        {
            messageStore.Add(CurrentEditContext.Field(error.Key), error.Value);
        }

        CurrentEditContext.NotifyValidationStateChanged();
    }

    public void DisplayErrors(string fieldName, List<string> errors)
    {
        foreach (var error in errors)
        {
            messageStore.Add(CurrentEditContext.Field(fieldName), error);
        }

        CurrentEditContext.NotifyValidationStateChanged();
    }
}

App.razor

<EditForm Model="@_model" OnValidSubmit="ValidSubmit">
        <DataAnnotationsValidator/>
        <ValidationSummary/>
        <CustomValidator @ref="_customValidator"></CustomValidator>
...

@code {

    private CustomValidator _customValidator;

...

private async Task ValidSubmit(EditContext obj)
   {
       if (await CheckValidations())
       {
           if (OnSubmit.HasDelegate)
           {
               Customer.Customerr = _model.Customer.TrimText();
               Customer.ProvinceUUID = _model.ProvinceUUID;
               Customer.CityUUID = _model.CityUUID;

               await OnSubmit.InvokeAsync(new NewCustomerInfoEventArgs()
               {
                   Customer = Customer,
               });
           }
       }
   }

   private async Task<bool> CheckValidations()
   {
       int errors = 0;
       ApplicationDbContext context = await DbFactory.CreateDbContextAsync();
       var customer = _model.Customer.TrimText();
       var isExist = await context.DcCustomers.AnyAsync(x => x.Customerr == customer);
       await context.DisposeAsync();
       if (isExist)
       {
           _customValidator.DisplayErrors(nameof(_model.Customer), new List<string> { "نام مشتری تکراری است" });
           errors += 1;
       }

       if (errors == 0)
       {
           return true;
       }
       
       return false;
   }

References
https://www.learmoreseekmore.com/2021/01/blazor-server-forms-validator-component.html

public async Task DownloadFileAsync(string path)
{
    await Js.InvokeAsync<string>("downloadFile", path);
}

// In JS
function downloadFile(filename) {
    location.href = '/api/downloads/' + filename;
}

References
https://stackoverflow.com/questions/57327440/how-to-download-a-file-from-blazor-server-side
https://learn.microsoft.com/en-us/aspnet/core/blazor/file-downloads?view=aspnetcore-7.0

@page "/route-parameter/{text?}"

<h1>Blazor is @Text!</h1>

@code {
    [Parameter]
    public string? Text { get; set; }

    protected override void OnInitialized()
    {
        Text = Text ?? "fantastic";
    }
}

@page "/user/{Id:int}/{Option:bool?}"

<p>
    Id: @Id
</p>

<p>
    Option: @Option
</p>

@code {
    [Parameter]
    public int Id { get; set; }

    [Parameter]
    public bool Option { get; set; }
}

Constraint	Example	Example Matches	Invariant culture matching
bool	{active:bool}	true, FALSE	No
datetime	{dob:datetime}	2016-12-31, 2016-12-31 7:32pm	Yes
decimal	{price:decimal}	49.99, -1,000.01	Yes
double	{weight:double}	1.234, -1,001.01e8	Yes
float	{weight:float}	1.234, -1,001.01e8	Yes
guid	{id:guid}	CD2C1638-1638-72D5-1638-DEADBEEF1638, {CD2C1638-1638-72D5-1638-DEADBEEF1638}	No
int	{id:int}	123456789, -123456789	Yes
long	{ticks:long}	123456789, -123456789	Yes

References
https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-7.0#route-constraints

If we have a validation requirement that cannot be implemented using the built-in attributes, we can create a custom validation attribute.

1. Create a class that derives from the built-in abstract ValidationAttribute class and override IsValid() method.
2. IsValid() method returns null if there are no validation errors, otherwise a ValidationResult object.
3. ValidationResult accepts 2 parameters – Validation error message and the property name with which this validation error message must be associated with.

using System.ComponentModel.DataAnnotations;

namespace EmployeeManagement.Models.CustomValidators
{
    public class EmailDomainValidator : ValidationAttribute
    {
        public string AllowedDomain { get; set; }

        protected override ValidationResult IsValid(object value, 
            ValidationContext validationContext)
        {
            string[] strings = value.ToString().Split('@');
            if (strings[1].ToUpper() == AllowedDomain.ToUpper())
            {
                return null;
            }

            return new ValidationResult($"Domain must be {AllowedDomain}",
            new[] { validationContext.MemberName });
        }
    }
}

public class Employee
{
    [EmailDomainValidator(AllowedDomain = "pragimtech.com")]
    public string Email { get; set; }
}

References
https://www.pragimtech.com/blog/blazor/blazor-custom-form-validation/

@typeparam MyType

<SomeHtml />

@code
{
    [Parameter]
    public List<MyType> MyList{ get; set; }
}

<MyComponent MyType="MyTypeABC" MyList="@MyData.MyList" />

References
https://blazor-university.com/templating-components-with-renderfragements/using-typeparam-to-create-generic-components/
https://stackoverflow.com/questions/60393496/c-sharp-blazor-how-to-use-typeparam-in-code-behind-with-workaround

If the Virtualize component is placed inside an element that requires a specific child tag name, SpacerElement allows you to obtain or set the virtualization spacer tag name. The default value is div. For the following example, the Virtualize component renders inside a table body element (tbody), so the appropriate child element for a table row (tr) is set as the spacer.

@page "/virtualized-table"

<HeadContent>
    <style>
        html, body { overflow-y: scroll }
    </style>
</HeadContent>

<h1>Virtualized Table Example</h1>

<table id="virtualized-table">
    <thead style="position: sticky; top: 0; background-color: silver">
        <tr>
            <th>Item</th>
            <th>Another column</th>
        </tr>
    </thead>
    <tbody>
        <Virtualize Items="@fixedItems" ItemSize="30" SpacerElement="tr">
            <tr @key="context" style="height: 30px;" id="row-@context">
                <td>Item @context</td>
                <td>Another value</td>
            </tr>
        </Virtualize>
    </tbody>
</table>

@code {
    private List<int> fixedItems = Enumerable.Range(0, 1000).ToList();
}

References
https://learn.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-7.0
https://youtu.be/oNZnYNUpu54

Blazor in .NET 7 now has support for handling location changing events. This allows you to warn users about unsaved work or to perform related actions when the user performs a page navigation.

To handle location changing events, register a handler with the NavigationManager service using the RegisterLocationChangingHandler method. Your handler can then perform async work on a navigation or choose to cancel the navigation by calling PreventNavigation on the LocationChangingContext. RegisterLocationChangingHandler returns an IDisposable instance that, when disposed, removes the corresponding location changing handler.

For example, the following handler prevents navigation to the counter page:

var registration = NavigationManager.RegisterLocationChangingHandler(async cxt =>
{
    if (cxt.TargetLocation.EndsWith("counter"))
    {
        cxt.PreventNavigation();
    }
});

Note that your handler will only be called for internal navigations within the app. External navigations can only be handled synchronously using the beforeunload event in JavaScript.

The new NavigationLock component makes common scenarios for handling location changing events simple.

<NavigationLock OnBeforeInternalNavigation="ConfirmNavigation" ConfirmExternalNavigation />

NavigationLock exposes an OnBeforeInternalNavigation callback that you can use to intercept and handle internal location changing events. If you want users to confirm external navigations too, you can use the ConfirmExternalNavigations property, which will hook the beforeunload event for you and trigger the browser-specific prompt. The NavigationLock component makes it simple to confirm user navigations when there’s unsaved data. Listing 1 shows using NavigationLock with a form that the user may have modified but not submitted.

<EditForm EditContext="editContext" OnValidSubmit="Submit">
    ...
</EditForm>
<NavigationLock OnBeforeInternalNavigation="ConfirmNavigation" ConfirmExternalNavigation />

    @code {
        private readonly EditContext editContext;
        ...

        // Called only for internal navigations.
        // External navigations will trigger a browser specific prompt.
        async Task ConfirmNavigation(LocationChangingContext context)
        {
            if (editContext.IsModified())
            {
                var isConfirmed = await JS.InvokeAsync<bool>("window.confirm", 
                   "Are you sure you want to leave this page?");
                
                if (!isConfirmed)
                {
                    context.PreventNavigation();
                }
            }
        }
    }

References
https://www.codemag.com/Article/2211102/Blazor-for-the-Web-and-Beyond-in-.NET-7

In .NET 7, you can run asynchronous logic after a binding event has completed using the new @bind:after modifier. In the following example, the PerformSearch asynchronous method runs automatically after any changes to the search text are detected:

<input @bind="searchText" @bind:after="PerformSearch" />

@code {
    private string searchText;

    private async Task PerformSearch()
    {
        ...
    }
}

In .NET 7, it’s also easier to set up binding for component parameters. Components can support two-way data binding by defining a pair of parameters:

• @bind:get: Specifies the value to bind.
• @bind:set: Specifies a callback for when the value changes.

The @bind:get and @bind:set modifiers are always used together.

Example:

<input @bind:get="Value" @bind:set="ValueChanged" />

@code {
    [Parameter]
    public TValue? Value { get; set; }

    [Parameter]
    public EventCallback<TValue> ValueChanged { get; set; }
}

References
https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-7.0?view=aspnetcore-7.0#bind-modifiers-bindafter-bindget-bindset

In prior Blazor releases, binding across multiple components required binding to properties with get/set accessors.

In .NET 6 and earlier:

<NestedGrandchild @bind-GrandchildMessage="BoundValue" />

@code {
    ...

    private string BoundValue
    {
        get => ChildMessage ?? string.Empty;
        set => ChildMessageChanged.InvokeAsync(value);
    }
}

In .NET 7, you can use the new @bind:get and @bind:set modifiers to support two-way data binding and simplify the binding syntax:

<NestedGrandchild @bind-GrandchildMessage:get="ChildMessage" 
    @bind-GrandchildMessage:set="ChildMessageChanged" />

References
https://learn.microsoft.com/en-us/aspnet/core/migration/60-70?view=aspnetcore-7.0&tabs=visual-studio#simplify-component-parameter-binding
https://pupli.net/2022/01/two-way-binding-in-blazor-component/

The CSS isolation is only applied to the component level by default but you can extend it to the child component using “::deep” attribute in the CSS file. This attribute is the Blazor attribute so, it only understands and parses by the Blazor engine. When “::deep” attribute used in the CSS file, the Blazor engine also applied scope identifier to all descendants of components.

ChildComponent.razor

<hr />
<p>
    paragraph:: This is child component content
</p>
<div>
    div:: This is child component content
</div>
<hr />
@code {
}

ParentComponent.razor

@page "/parentcomponent"
<h3>Parent Component</h3>
<div>
    <p>paragraph:: This is Parent Component content</p>
    <ChildComponent></ChildComponent>
    <div>
        div:: This is parent component content
    </div>
</div>
@code {
}

ParentComponent.razor.css

p {
    color: red
}
::deep div {
    color:orange;
    font-weight:bold;
}

References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0
https://www.c-sharpcorner.com/article/css-isolation-in-blazor/