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>();

希望，这可以回答您的问题。

ASP.NET Core编写模式编辑的最佳方法

1 个答案: