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

Question

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

这是我激活模式的方式：

  <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

你在隐藏中设置了value="" input.Though你使用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<>。通过这种方式，您可以更轻松地将您的数据路由到您的模式，并且您不必为此使用您的控制器！我使用这种方式是因为我的 project.so 中有 30 个模态，这是一种更好的方法，不会损失任何性能

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

Data routing to modal on razor page html

html

routes

modal-dialog

razor

asp.net-core