这篇文章完全更新了，将所有代码放在一个类中，并尽可能直接
该项目运行良好，但有一点除外： 当更新学生记录时，数据库会更新，但可见列表不会更新。
我能够看到更改的唯一方法是刷新整个页面(请参阅代码底部的NavigationManager行(。
你能帮我理解我在这里没有做什么吗。
@page "/Students2";
@using ParentChild.Models;
@inject IJSRuntime JS; // Used for Confirmation Dialog & Alert Box
@inject NavigationManager NavigationManager // Used to Refresh Entire Page
<h3>Students 2</h3>
@if (byStudents == null)
{
<p><em>Loading...</em></p>
}
else if (!byStudents.Any())
{
<p><em>No students in database. Please add some.</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>First</th>
<th>Last</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Cell</th>
<th>Home</th>
<th>Email</th>
<th>Note</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var byStudent in byStudents)
{
<tr>
<td>@byStudent.SFirst</td>
<td>@byStudent.SLast</td>
<td>@byStudent.SStreet</td>
<td>@byStudent.SCity</td>
<td>@byStudent.SState</td>
<td>@byStudent.SZip</td>
<td>@byStudent.SCell</td>
<td>@byStudent.SHome</td>
<td>@byStudent.SEmail</td>
<td>@byStudent.SNote</td>
<td>
<input type="button" class="btn btn-primary" @onclick="@(() => OpenEditStudent(@byStudent.SId))" value="Edit" />
<nbsp></nbsp>
<input type="button" class="btn btn-danger" @onclick="@(async () => await DeleteStudentAction(@byStudent.SId))" value="Delete" />
</td>
</tr>
}
</tbody>
</table>
}
<button class="btn btn-primary" @onclick="() => OpenAddStudent()">Add New Student</button>
@if (showBackdrop)
{
<div class="modal-backdrop fade show"></div>
}
<!-- Define Modal Pop-UP in this Page -->
<div class="modal @modalClass" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<!-- Pop-Up Title Section -->
@{
var txt = "";
if ((SId == null) | (SId == ""))
{
txt = "Add Student";
@txt;
}
else
{
txt = "Edit Student";
@txt;
}
}
</h5>
<!-- Pop-Up Close Button at Top -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @onclick="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Pop-Up Body Section -->
<div class="form-group row">
<input id="SId" @bind="SId" type="hidden" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SFirst" class="col-sm-8 col-form-label">First Name:</label>
<input id="SFirst" @bind="SFirst" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SLast" class="col-sm-8 col-form-label">Last Name:</label>
<input id="SLast" @bind="SLast" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SStreet" class="col-sm-8 col-form-label">Street:</label>
<input id="@SStreet" @bind="SStreet" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SCity" class="col-sm-8 col-form-label">City:</label>
<input id="@SCity" @bind="SCity" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SState" class="col-sm-8 col-form-label">State:</label>
<input id="@SState" @bind="SState" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SZip" class="col-sm-8 col-form-label">Zip:</label>
<input id="@SZip" @bind="SZip" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SCell" class="col-sm-8 col-form-label">Cell #:</label>
<input id="@SCell" @bind="SCell" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SHome" class="col-sm-8 col-form-label">Home #:</label>
<input id="@SHome" @bind="SHome" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SEmail" class="col-sm-8 col-form-label">Email:</label>
<input id="@SEmail" @bind="SEmail" class="col-sm-4 form-control" />
</div>
<div class="form-group row">
<label for="@SNote" class="col-sm-8 col-form-label">Note:</label>
<input id="@SNote" @bind="SNote" class="col-sm-4 form-control" />
</div>
</div>
<div class="modal-footer">
<!-- Pop-Up Body Section -->
@{
if ((SId == null) | (SId == ""))
{
<button type="button" class="btn btn-primary" @onclick="async () => await AddStudentAction()">Add</button>
}
else
{
<button type="button" class="btn btn-primary" @onclick="async () => await UpdateStudentAction(this.SId)">Update</button>
}
}
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => this.Close()">Close</button>
</div>
</div>
</div>
</div>
@code {
//-------------------------------------------------------------------------
// Modal Control Variables and Code
//-------------------------------------------------------------------------
private string modalDisplay = "none;";
private string modalClass = "";
private bool showBackdrop = false;
//--- Open Modal...
public void Open()
{
modalDisplay = "block;";
modalClass = "show";
showBackdrop = true;
}
//--- Close Modal...
public void Close()
{
modalDisplay = "none";
modalClass = "";
showBackdrop = false;
}
//-------------------------------------------------------------------------
// Student List from Database
//-------------------------------------------------------------------------
DB_136837_byogaContext db = new DB_136837_byogaContext();
private List<ByStudents> byStudents;
//--- Build Student List on Page Initialization...
protected override void OnInitialized()
{
byStudents = db.ByStudents.ToList();
}
//-------------------------------------------------------------------------
// Modal Parameters
//-------------------------------------------------------------------------
private Modal modal { get; set; }
[Parameter]
public string SId { get; set; } = "";
[Parameter]
public string SFirst { get; set; } = "";
[Parameter]
public string SLast { get; set; } = "";
[Parameter]
public string SStreet { get; set; } = "";
[Parameter]
public string SCity { get; set; } = "";
[Parameter]
public string SState { get; set; } = "";
[Parameter]
public string SZip { get; set; } = "";
[Parameter]
public string SCell { get; set; } = "";
[Parameter]
public string SHome { get; set; } = "";
[Parameter]
public string SEmail { get; set; } = "";
[Parameter]
public string SNote { get; set; } = "";
//-------------------------------------------------------------------------
// Open Modal to Add Student
//-------------------------------------------------------------------------
protected void OpenAddStudent()
{
//-- Clear Any Info Set in Previous Edit Requests...
SId = "";
SFirst = "";
SLast = "";
SStreet = "";
SCity = "";
SState = "";
SZip = "";
SCell = "";
SHome = "";
SEmail = "";
SNote = "";
//--- Open Modal Popup...
this.Open();
}
//-------------------------------------------------------------------------
// Open Modal to Edit Student
//-------------------------------------------------------------------------
protected void OpenEditStudent(int myID)
{
//--- Build & Run SQL Select Statement...
using (var myContext = new DB_136837_byogaContext())
{
//--- Grab Info for Selected Student...
var myQuery = (from s in myContext.ByStudents where s.SId == myID select s).Single();
//--- Set Fields on Popup Form...
this.SId = myQuery.SId.ToString();
this.SFirst = myQuery.SFirst;
this.SLast = myQuery.SLast;
this.SStreet = myQuery.SStreet;
this.SCity = myQuery.SCity;
this.SState = myQuery.SState;
this.SZip = myQuery.SZip;
this.SCell = myQuery.SCell;
this.SHome = myQuery.SHome;
this.SEmail = myQuery.SEmail;
this.SNote = myQuery.SNote;
}
//--- Open Modal Form...
this.Open();
}
//-------------------------------------------------------------------------
// Delete Selected Student from Database with Confirmation Dialog
//-------------------------------------------------------------------------
protected async Task DeleteStudentAction(int myID)
{
bool isConfirmed = await JS.InvokeAsync<bool>("confirm", $"Do you sure you want to permanently delete whis record?");
if (isConfirmed)
{
//--- Build & Run SQL Delete Statement...
using (var myContext = new DB_136837_byogaContext())
{
var myQuery = (from d in myContext.ByStudents where d.SId == myID select d).Single();
myContext.ByStudents.Remove(myQuery);
myContext.SaveChanges();
}
//--- Delete Complete Dialog...
await JS.InvokeVoidAsync("alert", "Record Deleted");
//--- Refresh Page...
await InvokeAsync(() =>
{
StateHasChanged();
this.OnInitialized();
});
}
}
//-------------------------------------------------------------------------
// Add Student to Database
//-------------------------------------------------------------------------
protected async Task AddStudentAction()
{
//--- Define the New Student...
var newStudent = new ByStudents();
newStudent.SFirst = SFirst;
newStudent.SLast = SLast;
newStudent.SStreet = SStreet;
newStudent.SCity = SCity;
newStudent.SState = SState;
newStudent.SZip = SZip;
newStudent.SCell = SCell;
newStudent.SHome = SHome;
newStudent.SEmail = SEmail;
newStudent.SNote = SNote;
//--- Add New Student to Database...
using (var myContext = new DB_136837_byogaContext())
{
myContext.ByStudents.Add(newStudent);
myContext.SaveChanges();
}
//--- Close the Popup...
this.Close();
//--- Refresh Page...
await InvokeAsync(() =>
{
StateHasChanged();
this.OnInitialized();
});
}
//-------------------------------------------------------------------------
// Update Student in Database
//-------------------------------------------------------------------------
protected async Task UpdateStudentAction(string myID)
{
//--- Build & Run SQL Select Statement...
using (var myContext = new DB_136837_byogaContext())
{
//--- Update Info for Selected Student...
var myQuery = (from d in myContext.ByStudents where d.SId == Convert.ToInt32(myID) select d).Single();
myQuery.SFirst = this.SFirst;
myQuery.SLast = this.SLast;
myQuery.SStreet = this.SStreet;
myQuery.SCity = this.SCity;
myQuery.SState = this.SState;
myQuery.SZip = this.SZip;
myQuery.SCell = this.SCell;
myQuery.SHome = this.SHome;
myQuery.SEmail = this.SEmail;
myQuery.SNote = this.SNote;
myContext.ByStudents.Update(myQuery);
myContext.SaveChanges();
}
//--- Close the Popup...
this.Close();
//--- Refresh Page...
await InvokeAsync(() =>
{
StateHasChanged();
this.OnInitialized();
});
//--- Refresh Page by Reloading...SHOULD NOT HAVE TO DO THIS!
//NavigationManager.NavigateTo("Refresh/Students2");
}
}
感谢您的任何帮助。谢谢
在添加/更新页面上，完成操作并导航回列表后，添加'true'参数以强制重新加载列表页面。
NavigationManager.NavigateTo("students", true);
请参阅此链接
如果我理解正确，您有一个子组件模态，它处理负责父组件显示的数据的crud。
我相信，如果从子组件调用StateHasChanged((，则状态会在子组件的作用域中更新，除非通知父组件其状态应该更新。我会尝试从您的子组件模态向父组件添加一个事件回调，以在父级别触发StateHasChanged((。工作完成后，您可以手动调用任何子crud方法的回调。
类似于此：Blazor-当子组件onclick事件发生时执行父组件的方法