Bootstrap 使用 ASP.Net MVC 和 table 的模态确认

Question

使用 MVC .NetCore，我填充了一个“部分”视图和一个 Table。在 table 中，记录列表。每行都有一个按钮来编辑或删除。要删除一条记录，我需要有 4 个 ID，因为 PK 是由这 4 个键组成的。我能够使它与 javascript 一起工作，但是，我不喜欢正在生成的“确认”显示。我想要一种更优雅的方式并为此使用模态形式。但是，如何在单击行中的按钮时检索 4 个值？

这是从我的模型中填充的行：

<td>
    <div>
        <a onclick="showInPopup('@Url.Action("Match_StatsCreateOrEdit","Match_Stats",new {comp_id=item.Match_Stats.Comp_Id, team_id=item.Match_Stats.Team_Id,match_id=item.Match_Stats.Match_Id, match_Stat_Id=item.Match_Stats.Match_Stat_Id},Context.Request.Scheme)','Update A Stat')" class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Edit</a>
                    
        <form asp-action="Match_StatsDelete" asp-route-comp_Id="@item.Match_Stats.Comp_Id" asp-route-team_Id="@item.Match_Stats.Team_Id" asp-route-Match_Id="@item.Match_Stats.Match_Id"
                          asp-route-Match_Stat_Id="@item.Match_Stats.Match_Stat_Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
                        <button type="submit" class="btn btn-warning btn-xs"><i class="fas fa-trash"></i> Delete</button>
          </form>
                    
      </div>
</td>

这里是目前使用的Javascript：

jQueryAjaxDelete = form => {
    if (confirm('Are you sure want to delete this record ?')) {
        try {
            $.ajax({
                type: 'POST',
                url: form.action,
                data: new FormData(form),
                contentType: false,
                processData: false,
                success: function (res) {
                    $('#view-all').html(res.html);
                    $.notify('Deleted Successfully !', {
                        globalPostion: 'Top Center',
                        className: 'success'
                    });
                },
                error: function (err) {
                    console.log(err)
                }
            })
        } catch (ex) {
            console.log(ex)
        }
    }

    //prevent default form submit event
    return false;
}

这是我想要使用的模型。我如何将 4 ID 放入其中？

<!-- /.modal -->
<div class="modal fade" id="modal-removeplayers">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirmation needed</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you really want to delete this record ?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>


                <!-- CODE HERE TO RETRIEVE All 4 IDs and Call the "delete" on the Controller -->>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Answer 1

一种方法是将模式放在循环中：

型号：

public class Test
{
    public Match_Stats Match_Stats { get; set; }
    //other properties....
}
public class Match_Stats
{
    public int Comp_Id { get; set; }
    public int Team_Id { get; set; }
    public int Match_Id { get; set; }
    public int Match_Stat_Id { get; set; }
    //other properties.....
}

查看(Index.cshtml):

@model IEnumerable<Test>
@{
    int i = 0;
}
@foreach (var item in Model)
{
    //other code.....
    <a onclick="showInPopup('@Url.Action("Match_StatsCreateOrEdit","Match_Stats",new {comp_id=item.Match_Stats.Comp_Id, team_id=item.Match_Stats.Team_Id,match_id=item.Match_Stats.Match_Id, match_Stat_Id=item.Match_Stats.Match_Stat_Id},Context.Request.Scheme)','Update A Stat')" class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Edit</a>
    
    //add the button to launch the modal
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-removeplayers_@i"><i class="fas fa-trash"></i> Delete</button>

    <div class="modal fade" id="modal-removeplayers_@i">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirmation needed</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you really want to delete this record ?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      //move the form to here.....
                <form asp-action="Match_StatsDelete" asp-route-comp_Id="@item.Match_Stats.Comp_Id" asp-route-team_Id="@item.Match_Stats.Team_Id" asp-route-Match_Id="@item.Match_Stats.Match_Id"
            asp-route-Match_Stat_Id="@item.Match_Stats.Match_Stat_Id" class="d-inline">
                      <button type="submit" class="btn btn-warning btn-xs"><i class="fas fa-trash"></i> Delete</button>

                </form>
            </div>
        </div>
    </div>
    </div>
    i++;     //add this...
}

控制器：

public IActionResult Index()
{
    //hard-coded the data just for easy testing!!!
    var model = new List<Test>()
    {
        new Test(){Match_Stats=new Match_Stats(){Comp_Id=1,Match_Id=11,Match_Stat_Id=12,Team_Id=13}},
        new Test(){Match_Stats=new Match_Stats(){Comp_Id=2,Match_Id=21,Match_Stat_Id=22,Team_Id=23}},
        new Test(){Match_Stats=new Match_Stats(){Comp_Id=3,Match_Id=31,Match_Stat_Id=32,Team_Id=33}}
    };
    return View(model);
}
[HttpPost]
public IActionResult Match_StatsDelete(int Comp_Id,int Match_Id, int Match_Stat_Id,int Team_Id)
{
    //do your stuff.......
}

第二种方式，可以使用局部视图重用模态框，使用ajax调用局部视图

型号：

public class Test
{
    public Match_Stats Match_Stats { get; set; }
    //other properties....
}
public class Match_Stats
{
    public int Comp_Id { get; set; }
    public int Team_Id { get; set; }
    public int Match_Id { get; set; }
    public int Match_Stat_Id { get; set; }
    //other properties.....
}

查看(Index.cshtml):

@model IEnumerable<Test>

@foreach (var item in Model)
{
    <a onclick="showInPopup('@Url.Action("Match_StatsCreateOrEdit","Match_Stats",new {comp_id=item.Match_Stats.Comp_Id, team_id=item.Match_Stats.Team_Id,match_id=item.Match_Stats.Match_Id, match_Stat_Id=item.Match_Stats.Match_Stat_Id},Context.Request.Scheme)','Update A Stat')" class="btn btn-primary btn-xs"><i class="fas fa-pencil-alt"></i> Edit</a>
    
    <button type="button" class="btn btn-primary" onclick="toggleModal('@item.Match_Stats.Comp_Id','@item.Match_Stats.Team_Id','@item.Match_Stats.Match_Id','@item.Match_Stats.Match_Stat_Id')"><i class="fas fa-trash"></i> Delete</button>
}

<div id="loadModal">
     <!--load the modal-->
</div>
@section Scripts
{
<script>
    function toggleModal(comp_id,team_id,match_id,match_Stat_Id) {
        var model = {
            comp_id : comp_id,
            team_id:team_id,
            match_id:match_id,
            match_Stat_Id:match_Stat_Id
        };
        $.ajax({
            type: "Post",
            url: "/Home/LoadPartial",
            data:model,
            success: function (data) {
                $("#loadModal").html(data);
                $('#modal-removeplayers').modal('show')

            }
        })
    }
</script>
}

/Views/Shared 文件夹中的部分视图(Partial.cshtml):

@model Match_Stats

<div class="modal fade" id="modal-removeplayers">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirmation needed</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you really want to delete this record ?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <form asp-action="Match_StatsDelete" asp-route-comp_Id="@Model.Comp_Id" asp-route-team_Id="@Model.Team_Id" asp-route-Match_Id="@Model.Match_Id"
            asp-route-Match_Stat_Id="@Model.Match_Stat_Id" class="d-inline">
                      <button type="submit" class="btn btn-warning btn-xs"><i class="fas fa-trash"></i> Delete</button>

                </form>
            </div>
        </div>
    </div>
</div>

控制器：

public IActionResult Index()
{
    //hard-coded the data just for easy testing!!!
    var model = new List<Test>()
    {
        new Test(){Match_Stats=new Match_Stats(){Comp_Id=1,Match_Id=11,Match_Stat_Id=12,Team_Id=13}},
        new Test(){Match_Stats=new Match_Stats(){Comp_Id=2,Match_Id=21,Match_Stat_Id=22,Team_Id=23}},
        new Test(){Match_Stats=new Match_Stats(){Comp_Id=3,Match_Id=31,Match_Stat_Id=32,Team_Id=33}}
    };
    return View(model);
}
[HttpPost]
public IActionResult Match_StatsDelete(int Comp_Id,int Match_Id, int Match_Stat_Id,int Team_Id)
{
    //do your stuff.......
}
[HttpPost]
public IActionResult LoadPartial(Match_Stats model)
{
    //hard-coded the data just for easy testing!!!
    var list = new List<Match_Stats>()
    {
        new Match_Stats(){Comp_Id=1,Match_Id=11,Match_Stat_Id=12,Team_Id=13},
        new Match_Stats(){Comp_Id=2,Match_Id=21,Match_Stat_Id=22,Team_Id=23},
        new Match_Stats(){Comp_Id=3,Match_Id=31,Match_Stat_Id=32,Team_Id=33}
    };
    var data = list.Where(a => a.Comp_Id == model.Comp_Id & a.Match_Id == model.Match_Id & a.Team_Id == model.Team_Id & a.Match_Stat_Id == model.Match_Stat_Id).FirstOrDefault();
    return PartialView("Partial", data);
}

结果：

Bootstrap 使用 ASP.Net MVC 和 table 的模态确认

Bootstrap Modal Confirmation using ASP.Net MVC and a table

javascript

bootstrap-modal

asp.net-core-mvc