ASP.NET核心编写模态编辑的最佳方式

Question

我有PartialView_CompanyTable:

<table class="table" id="Table">
<thead>
<tr>
<th>Company name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>
<a href='@Url.Action("Edit", "Company", new { id = item.Id })'>Edit</a>
<a href='@Url.Action("Delete", "Company", new { id = item.Id })'>Dekete</a>
</td>
</tr>
}
</tbody>

索引页：

<div id="companyTable">
<partial name="_CompanyTable" model="@Model" />
</div>

和编辑页面：

<form asp-action="Edit" asp-controller="Company" asp-route-id="@Model.Id">
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input type="text" asp-for="Name" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</form>

如何为索引(_CompanyTable(制作编辑模式弹出表单？我不需要从索引重定向到编辑页面，所以我第一次尝试使用模态表单。

Answer 1

您需要使用jQuery和AJAX技术才能实现这一点。

让我们更改您的"_CompanyTable"部分视图。

...
<table class="table" id="Table">
<thead>
<tr>
<th>Company name</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Name</td>
<td>
<a onclick="editCompany(`/Company/Edit?id=${item.Id}`)">Edit</a>
<a onclick="deleteCompany(`/api/companies?id=${item.Id}`)">Dekete</a>
</td>
</tr>
}
</tbody>
...

以及您的编辑视图。

...
<form onsubmit="return submitCompany(this)">
<input asp-for="Id" type="hidden" />
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input type="text" asp-for="Name" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</form>
...

在"_CompanyTable"部分视图中，包括以下JavaScript脚本。

<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"> 
</script>
<script type="text/javascript" 
src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
<script type="text/javascript" 
src="company.js"></script>

您的company.js文件将如下所示。

var popup;
function editCompany(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
popup = formDiv.dialog({
autoOpen: true,
resizeable: false,
modal: true,
width: 700,
height: 450,
title: 'Edit company',
close: function () {                         
popup.dialog('destroy').remove();
},
});
});
}
function deleteCompany(url) {
swal({
title: "Surely sure?",
text: "Are you fully sure to delete?",
icon: "warning",
buttons: true,
dangerMode: true
}).then((willDelete) => {
if (willDelete) {
$.ajax({
type: "DELETE",
url: url,
success: function (data) {
if (data.success) {
toastr.success(data.message);
}
else {
toastr.error(data.message);
}
}
});
}
});
}
function submitCompany(form) {
$.validator.unobtrusive.parse(form);
var comp = $(form).serializeJSON();
comp = JSON.stringify(comp);
if ($(form).valid()) {
$.ajax({
type: "POST",
url: "/api/companies/",
contentType: "application/json; charset=utf-8",
data: comp,
success: function (data) {
if (data.success) {
toastr.success(data.message);
popup.dialog('destroy').remove();
}
}
}).fail(function (data) {
console.log(data);
});
}
else {
console.log("Cannot post data!");
}
return false;
}

按如下方式更改您的CompanyController。

private readonly ICompanyRepository repository;
public OrganizationController(ICompanyRepository repository)
{
this.repository = repository;
}
public async Task<IActionResult> Edit(int? id)
{
if (id.HasValue)
Company = await repository.FindCompanyById(id);
if (Company == null)
Company = new Company();
return PartialView(Company);
}

此外，不要忘记在您的项目中添加名为CompaniesController的新API控制器。

[Produces("application/json")]
[Route("api/companies")]
[ApiController]
public class OrganizationsController : Controller
{
private readonly ICompanyRepository repository;
public OrganizationsController(ICompanyRepository repository)
{
this.repository = repository;
}
[HttpPost]
public async Task<ActionResult<Company>> Post(Company company)
{
if (company.Id > 0)
{
await repository.UpdateCompany(company);
}
else
{
await repository.AddCompany(organization);
}
return Json(new { success = true, message = "Company information saved"});
}

[HttpDelete]
public async Task<ActionResult<Company>> Delete(int id)
{
var company = await repository.FindCompanyById(id);
if (company == null)
{
return Json(new { success = false, message = "Cannot delete this company" 
});
}
await repository.DeleteCompany(company);
return Json(new { success = true, message = "Successfully deleted the 
company");
}
}

在项目中添加以下ICompanyRepository和CompanyRepository。

public interface ICompanyRepository
{
Task AddCompany(Company company);
Task UpdateCompany(Company company);
Task<Company> FindCompanyById(int? id);
Task DeleteCompany(Company company);
}
public class CompanyRepository : ICompanyRepository
{
private readonly TaskManagerDbContext context;
public OrganizationRepository(TaskManagerDbContext context)
{
this.context = context;
}
public async Task AddCompany(Company company)
{
context.Companies.Add(company);
await context.SaveChangesAsync();
}
public async Task DeleteCompany(Company company)
{
context.Companies.Remove(company);
await context.SaveChangesAsync();
}
public async Task<Company> FindOrganizationById(int? id)
{
return await context.Companies.FindAsync(id);
}
public async Task UpdateCompany(Company company)
{
var _company= context.Companies.Attach(company);
_company.State = EntityState.Modified;
await context.SaveChangesAsync();
}

}

最后但同样重要的是，不要忘记在Startup.cs文件中注册您的存储库。

services.AddScoped<ICompanyRepository, CompanyRepository>();

希望，这回答了你的问题。