我試圖顯示一門課程的主題名稱,該課程是在客戶端Blazor應用程序中從數據庫驅動的下拉列表中保存該主題的。該值返回為Guid而不是主題名稱。有誰與Blazor完成此任務?在Blazor文檔或任何可以解決我遇到的問題的教程中,我找不到任何內容。這是在Blazor客戶端,我正在使用Entity Framework Core
這是我的課程模型在共享項目中的樣子:
public class Course
{
public Guid CourseID { get; set; }
[Required]
public string CourseCode { get; set; }
[Required]
public string CourseName { get; set; }
public string CourseSubject { get; set; }
public string CourseCredits { get; set; }
}
這是我的主題模型在共享項目中的樣子:
public class Subject
{
public Guid SubjectID { get; set; }
public string SubjectName { get; set; }
}
這是我在Server項目中的CourseData數據訪問模型:
ApplicationDbContext db = new ApplicationDbContext ();
public IEnumerable<Course> GetAllCourses()
{
try
{
return db.Courses.ToList();
}
catch
{
throw;
}
}
public void AddCourse(Course course)
{
try
{
db.Courses.Add(course);
db.SaveChanges();
}
catch
{
throw;
}
}
這是我在Server項目中的SubjectData數據訪問模型:
ApplicationDbContext db = new ApplicationDbContext ();
public IEnumerable<Subject> GetAllSubjects()
{
try
{
return db.Subjects.ToList();
}
catch
{
throw;
}
}
public void AddSubject(Subject subject)
{
try
{
db.Subjects.Add(subject);
db.SaveChanges();
}
catch
{
throw;
}
}
這是我在Server項目中的課程控制器:
CourseData objcourse = new CourseData();
[HttpGet]
[Route("api/Courses/Courses")]
public IEnumerable<Course> Index()
{
return objcourse.GetAllCourses();
}
[HttpPost]
[Route("api/Courses/Create")]
public void Create([FromBody] Course course)
{
if (ModelState.IsValid)
objcourse.AddCourse(course);
}
這是我如何在客戶項目的“課程創建”頁面中保存值的方法:
@page "/Courses/Create"
@inject HttpClient Http
@inject Microsoft.AspNetCore.Components.NavigationManager NavigationManager
<h1>Add Course</h1>
<hr />
<div class="row">
<div class="col-md-4">
<div>
<div class="form-group">
<label for="CourseCode" class="control-label">Course Code</label>
<input for="CourseCode" class="form-control" @bind="@course.CourseCode" />
</div>
<div class="form-group">
<label for="CourseName" class="control-label">Course Name</label>
<input for="CourseName" class="form-control" @bind="@course.CourseName" />
</div>
<div class="form-group">
<label for="CourseSubject" class="control-label">Subject</label>
<select class="form-control" @bind="@course.CourseSubject">
<option></option>
@foreach (var subject in subjectList)
{
<option value="@subject.SubjectID">@subject.SubjectName</option>
}
</select>
</div>
<div class="form-group">
<label for="CourseCredits" class="control-label">Course Credits</label>
<input for="CourseCredits" class="form-control" @bind="@course.CourseCredits" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" @onclick="@CreateCourse">Save</button>
<button class="btn" @onclick="@cancel">Cancel</button>
</div>
</div>
</div>
</div>
@functions {
List<Subject> subjectList = new List<Subject>();
Course course = new Course();
protected override async Task OnInitializedAsync()
{
subjectList = await Http.GetJsonAsync<List<Subject>>("api/Subjects/Subjects");
}
protected async Task CreateCourse()
{
await Http.SendJsonAsync(HttpMethod.Post, "/api/Courses/Create", course);
NavigationManager.NavigateTo("/Courses/Courses");
}
void cancel()
{
NavigationManager.NavigateTo("/Courses/Courses");
}
}
最後,這是我的客戶項目中的“課程”列表頁面,它返回主題名稱的Guid,為此,我想顯示主題名稱而不是Guid:
@page "/Courses/Courses"
@inject HttpClient Http
<h1>Courses</h1>
<p>
<a href="/Courses/Create">Create New</a>
</p>
@if (courseList == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class='table'>
<thead>
<tr>
<th>Course Code</th>
<th>Course Name</th>
<th>Subject</th>
<th>Credits</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach (var course in courseList)
{
<tr>
<td>@course.CourseCode</td>
<td>@course.CourseName</td>
<td>@course.CourseSubject</td>
<td>@course.CourseCredits</td>
<td>
<a href='/Courses/Edit/@course.CourseID'>Edit</a> |
<a href='/Courses/Delete/@course.CourseID'>Delete</a>
</td>
</tr>
}
</tbody>
</table>
}
@functions {
Course[] courseList;
protected override async Task OnInitializedAsync()
{
courseList = await Http.GetJsonAsync<Course[]>
("/api/Courses/Courses");
}
}
根據要求的數據庫上下文:
public class ApplicationDbContext : DbContext
{
public virtual DbSet<Course> Courses { get; set; }
public virtual DbSet<Subject> Subjects { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
if (!optionsBuilder.IsConfigured)
{
optionsBuilder.UseSqlServer(@"REMOVED-FOR-SECURITY");
}
}
}
幫助將不勝感激。
其他答案很好,但讓我給您一些其他思考...
例如,假設Subjects
是不變的靜態數據。因此,如果每次顯示列表或為它們構建下拉列表時,都可能需要進行數據庫調用或SQL JOIN
?因此,我的第一個想法是為GUID-to-Subject-name創建一個查找緩存。而且由於這是Blazor(如果它緩存在客戶端上),您不再需要進行數據庫或API調用-它只需加載一次。
然後,因為我們在Blazor,所以我將創建一個<SubjectName>
組件,例如
Subject: <SubjectName Id="@Model.SubjectId" />
該組件使用緩存獲取值,它可以處理空值,可以處理無效的主題ID。您已經在一個地方封裝了許多行為和錯誤處理,並且每次需要將ID映射到使用者名稱時都可以重複使用。
同樣,我將使用緩存創建一個<SubjectDropdown>
組件以顯示主題列表。