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

Question

i cant send my data to modal and modal is sending null value to my controller. i allready check it out my controller,unit of work,repository and theyre working fine. so i know i have to route that data to my modal but i dont know how to do.i did that thing before with different languages but im not similar to razor pages.

this is the way how i activate my 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>

and this is my modal:

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

i know value is empty right now because i dont know what to put in it.

Answer 1

You set value="" in hidden input.Though you use asp-for="Category.CategoryID" to pass data to modal form, value="" will still set value to null. Here is a working demo: Models:

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

    }

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

Controller:

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

result:

Answer 2

i found the way. first of all i need to send that data to my modal.

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

after that i need to catch that data on my modal. here's a example

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

im not using the same model. LCategories is a list which it gets all data from the database as a List<> . with that way u can route ur data to your modal much more easyly and u dont have to use ur controller for it. i use that way because i have like 30 modal in my project.so that is a better way to do it without losing any performance