.NET
Microsoft Technologies based on the .NET software framework.
3,877 questions
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
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.");
}
}
}
}
}