CODEWITHSUNDEEP
asp.net-core.net-coreblazor
Melon NG
Melon NG

Reputation: 2984

What is the difference between @{} @code{} and @function{} in Blazor?

I am learning server-side. Blazor .

I have read the code of some projects and found some that use:

@{
}

and some that use:

@code{
}

and others that use:

@function{
}

to mark the code block.

I would like to know the difference between these. Thank you.

Upvotes: 28

Views: 14210

Answers (3)

GadiHerman
GadiHerman

Reputation: 61

After I was looking to learn what are the difference between @ @() @{} @: @code{} . I would like to share the summary of the differences

In Blazor the default Razor language is HTML. The following symbols can be used to integrate C# code into an Blazor file

@ Implicit Razor expressions To render C# code in the HTML zone.

@() The same as @ but Explicit Razor expressions

@{} to integrate C# code into the HTML zone. this code isn't rendered like the code in @().

@: To insert explicit text if you are inside the @{} block, you can do this by adding the @: sign

@code{} The @code block enables you to add fields, properties, and methods to a Blazor Page

@page "/test"

@s1
@(s1)
<br />
@{
    Random r = new Random();
}
@(r.Next())
<br />
@(s2)
@{
    @:(s2)
}
@((MarkupString)s2)

@code {
    string s1 = "Hello";
    string s2 = "<h1>Hello</h1>";
}

Upvotes: 4

Khabir
Khabir

Reputation: 5854

@{ }

You cannot use function or set get property under @{} instead, you can use only declare. for example:

@{
    DateTime today = DateTime.Now;
}

But below code will show you error as I am using function here:

@{
    public DateTime GetDate()
    {
        return DateTime.Now;
    }
}

@code{ }

you can write any C# code under @code {} for example:

@code{
    [Parameter]
    public Guid id { get; set; }

    AccessoryDto accessory;
    protected override Task OnInitializedAsync()
    {
        if (id == Guid.Empty)
            accessory = new AccessoryDto();
        else
            accessory = GetAccessory(id);
        return Task.FromResult(accessory);
    }

    void cancel()
    {
        NavigationManager.NavigateTo("/accessories");
    }
}

@function{ }

@function does the same thing as @code but now a days, @code is recommended to use.

Apart from this, you can use @ sign to use condition, loop and so on. for example:

@if (id == null)
{
    <h1>Create</h1>
}
else
{
    <h1>Edit</h1>
}

and

<tbody>
    @foreach (var accessory in Accessories)
    {
    <tr>
        <td>@accessory.Name</td>
        <td>@accessory.Description</td>
        <td>
            <a href='/editaccessory/@accessory.Id'>Edit</a>  |
            <a href='/delete/@accessory.Id'>Delete</a>
        </td>
    </tr>
    }
</tbody>

Moreover, you can @() for expression. for example:

<a href="@($"employee/{employeeId}")">View</a>

Upvotes: 7

Vy Do
Vy Do

Reputation: 52508

@ for directive(s)

@code{ } [2] should be used. @function{ } [3] is still effect, in case of method, not recommended in current version.

[2] https://learn.microsoft.com/vi-vn/aspnet/core/mvc/views/razor?view=aspnetcore-3.0#code

[3] https://learn.microsoft.com/vi-vn/aspnet/core/mvc/views/razor?view=aspnetcore-3.0#functions

See document for all cases https://learn.microsoft.com/vi-vn/aspnet/core/mvc/views/razor?view=aspnetcore-3.0#functions

Upvotes: 22

Related Questions