یعنی الان یک Context به ازای کل برنامه دارید که دچار این تداخل شدید؟ معمولا در WPF و همچنین WinForms این Context به ازای هر فرم تعریف می‌شود و با بسته شدن آن تخریب.
حالا یک سؤال مهم! به نظر شما در اولین سؤالی که پرسیدید، یک شخص چطور می‌بایستی ساختار کار شما رو که بر مبنای یک Context در کل برنامه است، حدس می‌زد و عیب یابی می‌کرد؟!
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>
<ItemGroup>
<SupportedPlatform Include="browser" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="5.0.6" />
</ItemGroup>
</Project> /_content/PackageId/MyImage.png
/_content/MyBlazorComponentLibrary/scripts/HelloWorld.js
<script src="_content/MyBlazorComponentLibrary/exampleJsInterop.js"></script>
<ItemGroup> <ProjectReference Include="..\MyBlazorComponentLibrary\MyBlazorComponentLibrary.csproj" /> </ItemGroup>
<div class="form-group">
<InputFile OnChange="HandleImageUpload" multiple></InputFile>
</div>
@code
{
private async Task HandleImageUpload(InputFileChangeEventArgs args)
{
}
} using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace BlazorServer.Models
{
public class HotelRoomDTO
{
// ...
public virtual ICollection<HotelRoomImageDTO> HotelRoomImages { get; set; } = new List<HotelRoomImageDTO>();
}
} @inject IHotelRoomService HotelRoomService
@inject NavigationManager NavigationManager
@inject IJSRuntime JsRuntime
@inject IFileUploadService FileUploadService
@inject IWebHostEnvironment WebHostEnvironment
@code
{
// ...
private async Task HandleImageUpload(InputFileChangeEventArgs args)
{
var files = args.GetMultipleFiles(maximumFileCount: 5);
if (args.FileCount == 0 || files.Count == 0)
{
return;
}
var allowedExtensions = new List<string> { ".jpg", ".png", ".jpeg" };
if(!files.Any(file => allowedExtensions.Contains(Path.GetExtension(file.Name), StringComparer.OrdinalIgnoreCase)))
{
await JsRuntime.ToastrError("Please select .jpg/.jpeg/.png files only.");
return;
}
foreach (var file in files)
{
var uploadedImageUrl = await FileUploadService.UploadFileAsync(file, WebHostEnvironment.WebRootPath, "Uploads");
HotelRoomModel.HotelRoomImages.Add(new HotelRoomImageDTO { RoomImageUrl = uploadedImageUrl });
}
}
} @using Microsoft.AspNetCore.Hosting @using System.Linq @using System.IO
.room-image {
display: block;
width: 100%;
height: 150px;
background-size: cover !important;
border: 3px solid green;
position: relative;
}
.room-image-title {
position: absolute;
top: 0;
right: 0;
background-color: green;
color: white;
padding: 0px 6px;
display: inline-block;
} <div class="form-group">
<InputFile OnChange="HandleImageUpload" multiple></InputFile>
<div class="row">
@if (HotelRoomModel.HotelRoomImages.Count > 0)
{
var serial = 1;
foreach (var roomImage in HotelRoomModel.HotelRoomImages)
{
<div class="col-md-2 mt-3">
<div class="room-image" style="background: url('@roomImage.RoomImageUrl') 50% 50%; ">
<span class="room-image-title">@serial</span>
</div>
<button type="button" class="btn btn-outline-danger btn-block mt-4">Delete</button>
</div>
serial++;
}
}
</div>
</div> // ...
@inject IHotelRoomImageService HotelRoomImageService
@code
{
// ...
private async Task AddHotelRoomImageAsync(HotelRoomDTO roomDto)
{
foreach (var imageDto in HotelRoomModel.HotelRoomImages)
{
imageDto.RoomId = roomDto.Id;
await HotelRoomImageService.CreateHotelRoomImageAsync(imageDto);
}
}
} HotelRoomModel.HotelRoomImages.Add(new HotelRoomImageDTO { RoomImageUrl = uploadedImageUrl }); private async Task HandleHotelRoomUpsert()
{
// ...
// Create Mode
var createdRoomDto = await HotelRoomService.CreateHotelRoomAsync(HotelRoomModel);
await AddHotelRoomImageAsync(createdRoomDto);
await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` created successfully.");
// ...
} protected override async Task OnInitializedAsync()
{
if (Id.HasValue)
{
// Update Mode
Title = "Update";
HotelRoomModel = await HotelRoomService.GetHotelRoomAsync(Id.Value);
}
// ...
} namespace BlazorServer.Services
{
public class HotelRoomService : IHotelRoomService
{
// ...
public IAsyncEnumerable<HotelRoomDTO> GetAllHotelRoomsAsync()
{
return _dbContext.HotelRooms
.Include(x => x.HotelRoomImages)
.ProjectTo<HotelRoomDTO>(_mapperConfiguration)
.AsAsyncEnumerable();
}
public Task<HotelRoomDTO> GetHotelRoomAsync(int roomId)
{
return _dbContext.HotelRooms
.Include(x => x.HotelRoomImages)
.ProjectTo<HotelRoomDTO>(_mapperConfiguration)
.FirstOrDefaultAsync(x => x.Id == roomId);
}
}
} private async Task HandleHotelRoomUpsert()
{
//...
// Update Mode
var updatedRoomDto = await HotelRoomService.UpdateHotelRoomAsync(HotelRoomModel.Id, HotelRoomModel);
await AddHotelRoomImageAsync(updatedRoomDto);
await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` updated successfully.");
//...
} private async Task AddHotelRoomImageAsync(HotelRoomDTO roomDto)
{
foreach (var imageDto in HotelRoomModel.HotelRoomImages.Where(x => x.RoomId == 0))
{
imageDto.RoomId = roomDto.Id;
await HotelRoomImageService.CreateHotelRoomImageAsync(imageDto);
}
} public async Task<HotelRoomDTO> CreateHotelRoomAsync(HotelRoomDTO hotelRoomDTO)
{
var hotelRoom = _mapper.Map<HotelRoom>(hotelRoomDTO); Microsoft.AspNetCore.Components.WebAssembly.Server
app.UseBlazorFrameworkFiles(); app.UseStaticFiles(); app.UseRouting();
app.MapFallbackToFile("index.html"); <link href="css/js-persian-cal.css" rel="stylesheet"/>
<script src="js/js-persian-cal.min.js"></script>
<input type="text" id="pcal1" />
protected override async Task OnAfterRenderAsync(bool firstRender)
{
int dateFieldCount = 1;
if (firstRender)
{
for (int i = 1; i <= dateFieldCount; i++)
{
await JsRuntime.InvokeVoidAsync("CallAmib", "pcal" + i.ToString());
}
}
} @inject IJSRuntime JsRuntime
window.CallAmib = (objCal1) => {
new AMIB.persianCalendar(objCal1);
} @using Microsoft.AspNetCore.Components.Web
@namespace ShamsiDatePickerBlazor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="css/js-persian-cal.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
@RenderBody()
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="">Reload</a>
<a>🗙</a>
</div>
<script src="js/js-persian-cal.min.js"></script>
<script src="js/CallAmib.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html> 
window.CallCall = (objCal1) => {
new AMIB.persianCalendar(objCal1,{
onchange: function(pdate) {
DotNet.invokeMethodAsync('ShamsiDatePickerBlazor', 'DateChanged', pdate.toString()).then(
(date) => {
console.log(data);
}
);
}
});
} static string selectedDate;
[JSInvokable]
public static void DateChanged(string pdate)
{
selectedDate = pdate;
} Ivy is a complete rewrite of the compiler (and runtime) in order to:
ng-template in Angular 