Blazor .net 8 server project editForm textfield and teaxtarea not editable

Esma 20 Reputation points
2024-06-07T12:01:31.9766667+00:00

Hi everyone,

I'm working on a Blazor project where I need to implement an editable modal dialog for adding and updating tasks. I attempted to follow some examples and even tried using a custom TaskModel, but I keep running into issues. Here's what I'm trying to achieve:

This is where ı edit and update works task razor:

@page "/NewWorkDialog"
@using BlazorApp4.Modals
@using Microsoft.AspNetCore.Components
@using Microsoft.FluentUI.AspNetCore.Components
@implements IDialogContentComponent<TaskModel>
<FluentDialog Id="newWorkDialog">
    <FluentDialogBody>
        <FluentStack>
            <FluentLabel Typo="Typography.PaneHeader">
                @pageTitle
            </FluentLabel>
        </FluentStack>
        <EditForm Model="@NewWork" OnValidSubmit="@HandleValidSubmit">
            <DataAnnotationsValidator />
            <FluentValidationSummary />
            <div>
                @if (!string.IsNullOrEmpty(errorMessage))
                {
                    <FluentMessageBar MessageBarType="MessageBarType.Error">
                        @errorMessage
                    </FluentMessageBar>
                }
            </div>
            <div>
                <FluentCombobox Id="combobox-with-long-list" Autocomplete="ComboboxAutocomplete.Both" @bind-Value="SelectedDeveloper" TOption="string" Label="İlgilenen" Height="250px">
                    @foreach (var developer in DeveloperDictionary)
                    {
                        <FluentOption Selected="@(developer.Value.ToString() == SelectedDeveloper)" Value="@developer.Key.ToString()">@developer.Key.ToString()</FluentOption>
                    }
                </FluentCombobox>
                <FluentValidationMessage For="@(() => SelectedDeveloper)" />
            </div>
            <div>
                <FluentTextField @bind-Value="NewWork.Title" Label="Başlık" @bind-Value:event="oninput" />
                <FluentValidationMessage For="@(() => NewWork.Title)" />
            </div>
            <div>
                <FluentTextArea @bind-Value="NewWork.Explanation" Label="Açıklama" @bind-Value:event="oninput" />
                <FluentValidationMessage For="@(() => NewWork.Explanation)" />
            </div>
            <div>
                <FluentDatePicker @bind-Value="NewWork.PlannedDate" Label="Planlanan Tarih" />
            </div>
            <div>
                <FluentDatePicker @bind-Value="NewWork.StartDate" Label="Başlangıç Tarihi" />
            </div>
        </EditForm>
    </FluentDialogBody>
    <FluentDialogFooter>
        <FluentButton @onclick="HandleValidSubmit" Type="ButtonType.Submit">Kaydet</FluentButton>
        <FluentButton @onclick="CloseDialog">İptal</FluentButton>
    </FluentDialogFooter>
</FluentDialog>

using BlazorApp4.Data;
using BlazorApp4.Data.Entity;
using BlazorApp4.Modals;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.EntityFrameworkCore;
using Microsoft.FluentUI.AspNetCore.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using static BlazorApp4.Enums.EnumDeclarations;
namespace BlazorApp4.Components.Pages.Work
{
    public partial class NewWorkDialog : ComponentBase, IDialogContentComponent<TaskModel>
    {
        // Güncellemek için 
        [Parameter]
        public TaskModel Content { get; set; } = new TaskModel();
        private string pageTitle => Content.Id > 0 ? "İş Verisi Güncelle" : "Yeni İş Verisi Ekle";
        [CascadingParameter]
        public FluentDialog Dialog { get; set; } = default!;
        [Inject]
        public IDbContextFactory<BlazorAppDbContext> DbContextFactory { get; set; }
        // Yeni iş verisi eklemek için 
        private TaskModel NewWork { get; set; } = new TaskModel();
        private List<string> DeveloperNames = new List<string>();
        private string SelectedDeveloper;
        private Dictionary<string, int> DeveloperDictionary = new Dictionary<string, int>();
        private string errorMessage;
        protected override async Task OnInitializedAsync()
        {
            await LoadDevelopers();
            if (Content.Id > 0)
            {
                NewWork = Content;
                SelectedDeveloper = NewWork.DeveloperID > 0 ? NewWork.DeveloperID.ToString() : string.Empty;
            }
            else
            {
                NewWork = new TaskModel();
            }
        }
        private async Task LoadDevelopers()
        {
            using var context = DbContextFactory.CreateDbContext();
            var developers = await context.Personal
                .Where(p => p.Roles == RolesEnum.Developer.ToString())
                .Select(p => new { p.Id, FullName = p.Name + " " + p.Surname })
                .ToListAsync();
            DeveloperNames = developers.Select(d => d.FullName).ToList();
            DeveloperDictionary = developers.ToDictionary(d => d.FullName, d => d.Id);
        }
        private async Task HandleValidSubmit()
        {
            errorMessage = string.Empty;
            if (string.IsNullOrEmpty(SelectedDeveloper) || string.IsNullOrEmpty(NewWork.Explanation) || string.IsNullOrEmpty(NewWork.Title))
            {
                errorMessage = "Lütfen zorunlu olan alanları doldurunuz.";
                return;
            }
            await SaveWork();
        }
        private async Task SaveWork()
        {
            if (DeveloperDictionary.TryGetValue(SelectedDeveloper, out var developerId))
            {
                NewWork.DeveloperID = developerId;
                using var context = DbContextFactory.CreateDbContext();
                if (NewWork.Id == 0) // Yeni veri ekleme
                {
                    NewWork.StatusID = 1;
                    NewWork.CreateDate = DateTime.Now;
                }
                else // Veri güncelleme
                {
                    NewWork.ModifyDate = DateTime.Now;
                }
                var workEntity = new Works
                {
                    Id = NewWork.Id,
                    Title = NewWork.Title,
                    Explanation = NewWork.Explanation,
                    DeveloperID = NewWork.DeveloperID,
                    PlannedDate = NewWork.PlannedDate,
                    StartDate = NewWork.StartDate,
                    StatusID = NewWork.StatusID,
                    CreateDate = NewWork.CreateDate,
                    ModifyDate = NewWork.ModifyDate
                };
                await Dialog.CloseAsync(DialogResult.Ok(NewWork));
            }
        }
        private async Task CloseDialog()
        {
            await Dialog.CancelAsync();
        }
    }
}

this is my open right panel

@page "/WorksDetails"
@using BlazorApp4.Data.Entity
@using Microsoft.AspNetCore.Components
@using Microsoft.FluentUI.AspNetCore.Components
@implements IDialogContentComponent<Works>
@inject NavigationManager NavigationManager
@inject IDialogService DialogService
@inject IToastService ToastService

<FluentDialogBody>
    @if (Content != null)
    {
        <div class="details-panel">
            <p>Başlık: @Content.Title</p>
            <p>Açıklama: @Content.Explanation</p>
            <p>Oluşturma Tarihi: @Content.CreateDate</p>
            <p>Güncelleme Tarihi: @Content.ModifyDate</p>
            <p>Planlanan Tarih: @Content.PlannedDate</p>
            <p>Başlama Tarihi: @Content.StartDate</p>
        </div>
    }
    @* <FluentButton @onclick="" Type="ButtonType.Submit">Yeni İş Verisi Ekle</FluentButton> *@
    <FluentButton @onclick="OpenEditDialog" Type="ButtonType.Submit">Düzenle</FluentButton>
    <FluentButton @onclick="ShowDeleteConfirm">Sil</FluentButton>
</FluentDialogBody>

using BlazorApp4.Data;
using BlazorApp4.Data.Entity;
using BlazorApp4.Modals;
using Microsoft.AspNetCore.Components;
using Microsoft.EntityFrameworkCore;
using Microsoft.FluentUI.AspNetCore.Components;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using static BlazorApp4.Enums.EnumDeclarations;
namespace BlazorApp4.Components.Pages.Work
{
    public partial class WorksDetails : ComponentBase
    {
        [Parameter]
        public Works Content { get; set; } = default!;
        [Parameter]
        public EventCallback<int> OnTaskDeleted { get; set; }
        [Inject]
        public IDbContextFactory<BlazorAppDbContext> DbContextFactory { get; set; }
        [CascadingParameter]
        public FluentDialog Dialog { get; set; } = default!;
        private IDialogReference? _dialog;
        private List<string> DeveloperNames = new List<string>();
        private Dictionary<int, string> DeveloperDictionary = new Dictionary<int, string>();
        private string SelectedDeveloper;
        protected override async Task OnInitializedAsync()
        {
            await LoadDevelopers();
            SelectedDeveloper = Content.DeveloperID.ToString();
        }
        private async Task LoadDevelopers()
        {
            using var context = DbContextFactory.CreateDbContext();
            var developers = await context.Personal
                .Where(p => p.Roles == RolesEnum.Developer.ToString())
                .Select(p => new { p.Id, FullName = p.Name + " " + p.Surname })
                .ToListAsync();
            DeveloperNames = developers.Select(d => d.FullName).ToList();
            DeveloperDictionary = developers.ToDictionary(d => d.Id, d => d.FullName);
        }
        private async Task ShowDeleteConfirm()
        {
            var dialog = await DialogService.ShowConfirmationAsync("Silmek istediğinize emin misiniz?", "Evet",
 "Vazgeç", "Sil");
            var result = await dialog.Result;
            if (!result.Cancelled)
            {
                using var context = DbContextFactory.CreateDbContext();
                var workToDelete = await context.Works.FindAsync(Content.Id);
                if (workToDelete != null)
                {
                    context.Works.Remove(workToDelete);
                    var saveResult = await context.SaveChangesAsync();
                    if (saveResult > 0)
                    {
                        ToastService.ShowSuccess("Başarıyla silinmiştir");
                        // Dialogu kapatma
                        await Dialog.CloseAsync(DialogResult.Ok(Content));
                        // Olay tetikleme bu şekilde cardlarda silinecek
                        await OnTaskDeleted.InvokeAsync(Content.Id);
                    }
                }
            }
        }
        private async Task OpenEditDialog()
        {
            using var context = DbContextFactory.CreateDbContext();
            var editTask = await context.Works.SingleOrDefaultAsync(w => w.Id == Content.Id);
            if (editTask != null)
            {
                var taskModel = new TaskModel
                {
                    Id = editTask.Id,
                    Title = editTask.Title,
                    Explanation = editTask.Explanation,
                    DeveloperID = editTask.DeveloperID,
                    PlannedDate = editTask.PlannedDate,
                    StartDate = editTask.StartDate,
                    StatusID = editTask.StatusID,
                    CreateDate = editTask.CreateDate,
                    ModifyDate = editTask.ModifyDate
                };
                var parameters = new DialogParameters<TaskModel>
                {
                    Content = taskModel,
                };
                _dialog = await DialogService.ShowDialogAsync<NewWorkDialog>(taskModel ,parameters);
                var result = await _dialog.Result;
                if (result?.Data is TaskModel updatedTask)
                {
                    editTask.Id = taskModel.Id;
                    editTask.Title = updatedTask.Title;
                    editTask.Explanation = updatedTask.Explanation;
                    editTask.StatusID = taskModel.StatusID;
                    editTask.DeveloperID = updatedTask.DeveloperID;
                    editTask.ModifyDate = DateTime.Now;
                    editTask.PlannedDate = updatedTask.PlannedDate;
                    editTask.StartDate = updatedTask.StartDate;
                    context.Works.Update(editTask);
                    await context.SaveChangesAsync();
                    StateHasChanged();
                    ToastService.ShowSuccess("İş başarıyla güncellendi.");
                }
            }
        }
    }
}
.NET
.NET
Microsoft Technologies based on the .NET software framework.
3,572 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,477 questions
{count} votes