数据路由到razor页面上的modal html

Question

我不能发送我的数据到modal，modal正在向我的控制器发送空值。我已经检查过我的控制器、工作单元、存储库，它们都工作得很好。因此，我知道我必须将数据路由到我的模式，但我不知道如何做。我以前用不同的语言做过这件事，但我和剃刀页面不一样。

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

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

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

Answer 1

在隐藏的input.Though中设置value=""如果使用asp-for="Category.CategoryID"将数据传递给模态表单，value=""仍会将值设置为null。下面是一个工作演示: Models：

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<>的形式从数据库中获取所有数据。通过这种方式，你可以更容易地将你的数据路由到你的模式，并且你不必使用你的控制器！我使用这种方式是因为我的project.so中有30种模式，这是一种在不损失任何性能的情况下实现它的更好的方法