ASP.Net Core 3.1 - 从控制器向部分视图模态传递值？

Posted 2023-02-15

【中文标题】ASP.Net Core 3.1 - 从控制器向部分视图模态传递值？

【英文标题】：ASP.Net Core 3.1 - passing value to partial view Modal From Controller?

【发布时间】：2021-07-01 02:31:50

【问题描述】：

我想从表中删除一条记录，并使用以下代码发送 CategoryId： 主视图：

<a data-toggle="modal" data-target="#Deletemodal" onclick="Func_LoadPv('@item.CategoryId')" class="btn btn-danger btn-xs">delete</a>

    function Func_LoadPv(Cid) 
        $.get("/AdminPanel/Category/ShowPartialView?CategoryId=" + Cid, function (res) 
            $("div.modal-body").append(res);
        );
        
    

控制器：

     public IActionResult ShowPartialView(Guid CategoryId)
    
        return PartialView("_DeleteMainCategory", CategoryId);
    

如何获取从控制器发送到部分 Modal 的这个值？

我遇到的问题是模式只打开一次？

【问题讨论】：

你的意思是上面的代码只是帮助显示一次模态，还是你希望模态只显示一次？

yesو 而且我必须刷新页面才能再次打开模式

【参考方案1】：

如何获取从控制器发送到部分 Modal 的这个值？

您可以为局部视图_DeleteMainCategory.cshtml 指定模型，如下所示。

@model Guid

<h1>DeleteMainCategory Partial View</h1>

@*content here*@

<h2>@Model</h2>

我的问题是模式只打开一次

以下带有测试数据的示例对我来说效果很好，您可以检查并与您的进行比较。

<table>
    <tbody>
        @foreach (var item in Model)
        
            <tr>
                <td> @rowCount</td>
                <td>@item.CategoryTitle</td>
                <td>@item.IconCategory</td>
                <td>
                    <a data-toggle="modal" data-target="#Deletemodal" title="delete" 
                       class="btn btn-danger btn-xs" onclick="Func_LoadPv('@item.CategoryId')">delete</a>
                </td>
            </tr>
        
    </tbody>
</table>

<div id="Deletemodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                @*modal body here*@
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

@section scripts
    <script>
        function Func_LoadPv(Cid) 
            $.get("/AdminPanel/Category/ShowPartialView?CategoryId=" + Cid, function (res) 

                $("div.modal-body").html(res);
            );
        
    </script>

测试结果

【参考方案2】：

我解决了

模态：

<div id="deletemodal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">delete category</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div id="bodyModal" class="modal-body">

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

jQuery :

  function DeleteCategory(id) 
        $.ajax(
            url: "/AdminPanel/Category/DeleteCategory/" + id,
            type: "Get",
            data: 
        ).done(function (result) 
            $('#deletemodal').modal('show');
            $('#bodyModal').html(result);
        );
    

控制器：

  public IActionResult DeleteCategory(Guid? id)
    
        return View();
    

    [HttpPost]
    public IActionResult DeleteCategory(Guid id)
    
        _admin.DeleteMainCategory(id);

        return RedirectToAction("ShowMainCategory", "Category");
    

局部视图：

<form asp-action="DeleteCategory" class="form-padding">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <h5 class="text-center">Are You Sure ?</h5>
</div>
<div class="modal-footer">
    <button type="submit" class="btn btn-info waves-effect">delete</button>
    <button type="button" class="btn btn-danger waves-effect"
            data-dismiss="modal">
        cancel
    </button>
</div>