数据路由到剃刀页面html上的模式

Question

我无法将我的数据发送到模态并且模态正在向我的控制器发送空值。 我已经检查了我的控制器、工作单元、存储库，它们工作正常。 所以我知道我必须将这些数据路由到我的模式，但我不知道该怎么做。我以前用不同的语言做过那件事，但我与剃须刀页面不相似。

这就是我激活模态的方式：

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1" style="will-change: transform;">
   <a class="dropdown-item" data-toggle="modal" data-target="#categoryUpdate">Update</a>
   <a class="dropdown-item" data-toggle="modal" data-target="#categoryDelete">Delete</a>
  <div>

这是我的模态：

<div id="categoryDelete" class="modal animated zoomInUp custo-zoomInUp" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Kategoriyi Sil</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <form class="mt-0" method="post" asp-action="DeleteCategory">
                <input type="hidden" asp-for="Category.CategoryID" value="" name="CategoryID">
                <div class="modal-body">
                    <p>
                        <b></b>
                        are u sure about to delete that category  ?
                    </p>
                </div>
                <div class="modal-footer md-button">
                    <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Vazgeç</button>
                    <button type="submit" name="DeleteCategory" class="btn btn-primary">Sil</button>
                </div>
            </form>
        </div>
    </div>
</div>

我现在知道 value 是空的，因为我不知道该放什么。

Answer 1

您在隐藏输入中设置了value=""。尽管您使用asp-for="Category.CategoryID" 将数据传递给模态表单，value="" 仍会将值设置为空。 这是一个工作演示： 型号：

public class ModalModel
    {
        
        public Category1 Category { get; set; }
    }
public class Category1
    {
        public string CategoryID { get; set; }

    }

查看（TestModal.cshtml）：

<div id="categoryDelete" class="modal animated zoomInUp custo-zoomInUp" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Kategoriyi Sil</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </button>
            </div>
            <form class="mt-0" method="post" asp-action="DeleteCategory">
                <input type="hidden" asp-for="Category.CategoryID" name="CategoryID"/>
                <div class="modal-body">


                    <p>
                        <b></b>
                        are u sure about to delete that category  ?
                    </p>
                </div>
                <div class="modal-footer md-button">
                    <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Vazgeç</button>
                    <button type="submit" name="DeleteCategory" class="btn btn-primary">Sil</button>
                </div>
            </form>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#categoryDelete">
    Launch demo modal
</button>

控制器：

 public IActionResult TestModal()
        {
            
            return View(new ModalModel {  Category=new Category1 {  CategoryID="id1"} });
        }
        public IActionResult DeleteCategory(Category1 c)
        {
            return Ok();
        }

结果：

Answer 2

我找到了方法。首先，我需要将该数据发送到我的模态。

  @foreach (var item in Model.Categories)
                        {

                            <tr>
                                <td class="text-center">
                                    <div class="dropdown custom-dropdown">
                                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                 class="feather feather-more-horizontal">
                                                <circle cx="12" cy="12" r="1"></circle>
                                                <circle cx="19" cy="12" r="1"></circle>
                                                <circle cx="5" cy="12" r="1"></circle>
                                            </svg>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1" style="will-change: transform;">
                                            <!-- SONRA YAPILACAK <a class="dropdown-item" href="user_profile.php?userID=">Görüntüle</a>-->
                                            <a id="@item.CategoryID" class="dropdown-item" data-toggle="modal" data-target="#categoryUpdate-@item.CategoryID">Güncelle</a>
                                            <a id="@item.CategoryID" class="dropdown-item" data-toggle="modal" data-target="#categoryDelete-@item.CategoryID">Sil</a>
                                        </div>
                                    </div>
                                </td>
                                <td>@item.CategoryID</td>
                                <td>@item.CategoryName</td>
                                <td><button class="btn btn-outline-dark mb-2" data-toggle="modal" data-target="#categoryPhotoView">Görüntüle</button></td>
                                <td>@item.CategoryLink</td>
                                <td>@item.CategoryIsFeatured</td>
                                <td>@item.CreatedUserId</td>
                                <td>@item.ModifiedUserId</td>
                                <td>@item.CreatedUserType</td>
                                <td>@item.ModifiedUserType</td>
                                <td>@item.CreatedDate</td>
                                <td>@item.ModifiedDate</td>
                                <td>@item.IsActive</td>
                                <td>@item.IsDeleted</td>
                            </tr>
                        }

之后，我需要在我的模式中捕获该数据。 这是一个例子

@for (int i = 0; i < Model.LCategories.Count(); i++)
{
    <div id="categoryDelete-@Model.LCategories[i].CategoryID" class="modal animated zoomInUp custo-zoomInUp" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Kategoriyi Sil</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                    </button>
                </div>
                @using (Html.BeginForm("DeleteCategory", "Admin", new { id = @Model.LCategories[i].CategoryID }, FormMethod.Post, false, new { @class = "mt-o" }))
                {
                    <input type="hidden" value="@Model.LCategories[i].CategoryID" name="CategoryID">
                    <div class="modal-body">
                        <p>
                            <b>@Model.LCategories[i].CategoryName</b>
                            adlı kategoriyi silmek istediğinize emin misiniz ?
                        </p>
                    </div>
                    <div class="modal-footer md-button">
                        <button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Vazgeç</button>
                        <button type="submit" value="submit" name="DeleteCategory" class="btn btn-primary">Sil</button>
                    </div>
                }
            </div>
        </div>
    </div>
}

我没有使用相同的模型。 LCategories 是一个列表，它以List<> 的形式从数据库中获取所有数据。 通过这种方式，您可以更轻松地将您的数据路由到您的模态，并且您不必为此使用您的控制器！ 我使用这种方式是因为我的项目中有 30 种模态。所以这是一种更好的方式来做到这一点而不会失去任何性能