Как мне удалить оставшийся код для достижения выделенного кода Blazor в ASP.NET Core 3.0? - PullRequest
Новая
       51

Как мне удалить оставшийся код для достижения выделенного кода Blazor в ASP.NET Core 3.0?

0 голосов
/ 20 сентября 2019

Я использую пример из этого устаревшего видео Представляем компоненты Razor в ASP.NET Core 3.0 - Даниэль Рот .

Исходный код выглядит следующим образом: 

@page "/todo"

<h1>Todo (@todoList.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todoList)
    {
    <li>
        <input type="checkbox" @bind="todo.IsDone" />
        <input  @bind="todo.Title" />
    </li>
    }
</ul>

<input placeholder="Do something..." @bind="newTodo"/>
<button @onclick="AddTodo">Add</button>

@code {
    IList<TodoItem> todoList = new List<TodoItem>();
    string newTodo;

    void AddTodo()
    {
        if (!String.IsNullOrEmpty(newTodo))
        {
            todoList.Add(new TodoItem { Title = newTodo });
            newTodo = null;
        }
    }
}

Я добавил универсальный класс ICollection для хранения экземпляров класса TodoItem и изменил код здесь: 

@page "/todo2"

<h1>Todo2 (@todoColl.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todoColl)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

<input placeholder="Do something..." @bind="newTodo" />
<button @onclick="@(e => { todoColl.Add(newTodo); newTodo = null;})">Add</button>

@code {
    string newTodo;
    TodoCollection todoColl = new TodoCollection();
}

Могу ли я избавиться от оставшихся двух операторов в разделе @code, чтобы добиться полного выделения кода?Буду признателен за любые предложения по улучшению.

Ответы [ 2 ]

2 голосов
/ 20 сентября 2019

Вам нужно Наследование базового класса для опыта "code-behind" .Для вашего кода:

Pages / Todo.razor 

@inherits TodoBase  // <--- inheritance
@page "/todo"

<h1>Todo (@todoList.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todoList)
    {
    <li>
        <input type="checkbox" @bind="todo.IsDone" />
        <input  @bind="todo.Title" />
    </li>
    }
</ul>

<input placeholder="Do something..." @bind="newTodo"/>
<button @onclick="AddTodo">Add</button>

TodoBase.vs 

using Microsoft.AspNetCore.Components;
namespace YourNamespace
{
    public class TodoBase : ComponentBase
    {
        // protected for inheritance visibility
        protected IList<TodoItem> todoList = new List<TodoItem>();
        protected string newTodo;

        protected void AddTodo()
        {...}
}

Цитирование документов:

Файлы компонентов содержат разметку HTML и код обработки C # в одном файле.Директива @inherits может быть использована для предоставления приложениям Blazor возможности «выделения кода», которая отделяет разметку компонента от обработки кода.

0 голосов
/ 20 сентября 2019

Я немного изменил ваше предложение.Я сохранил свои классы TodoItem и TodoCollection и добавил новый класс TodoBase, производный от ComponentBase.Класс TodoBase содержит только две строки, которые были в разделе @code.Страница бритвы потеряла раздел @code и получила строку @inherits.

Итак, если я хочу использовать Code-behind с использованием нескольких классов, мне нужно создать контейнерный класс, который наследуется от ComponentBase, верно?

...