Bootstrap Modal Confirmation 使用 ASP.Net MVC 和一個表

Question

使用 MVC.NetCore，我填充了一個“部分”視圖和一個表。 在該表中，記錄列表。 每行都有一個按鈕來編輯或刪除。 要刪除一條記錄，我需要有 4 個 ID，因為 PK 是由這 4 個鍵組成的。 我能夠讓它與 javascript 一起工作，但是，我不喜歡正在生成的“確認”顯示。 我想要一種更優雅的方式並為此使用模態形式。 但是如何在單擊行中的按鈕時檢索 4 個值？

這是從我的 Model 填充的一行：

<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;
}

這是我想使用的 Model。 我如何將 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

一種方法是將模式放在循環中：

Model：

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.....
}

查看（索引.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...
}

Controller：

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 調用局部視圖。

Model：

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.....
}

查看（索引.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>

Controller：

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 Modal Confirmation 使用 ASP.Net MVC 和一個表

問題描述

1 個解決方案

解決方案1
1 已采納 2022-05-04 04:00:43

Bootstrap Modal Confirmation 使用 ASP.Net MVC 和一個表

問題描述

1 個解決方案

解決方案1 1 已采納 2022-05-04 04:00:43

解決方案1
1 已采納 2022-05-04 04:00:43