locked
how can I pass selected product id to the component Invoke RRS feed

  • Question

  • User-1355965324 posted

    Here I have many products listed in which  one of the product Id have been selected to delete  from the record. I am using component file . But I dont know how to pass the product id into the component invoked as an argument. Here is my code. When I call component invoke, I want to pass the product id going to delete, Please help

    Index view

     @foreach (var product in Model)
     {
     <button type="button" class="btn btn-danger m-1" data-toggle="modal"  asp-route-id="@product.ProductId" data-target="#exampleModal">
             Delete
     </button>
     @await Component.InvokeAsync("DeleteConfirm", new { id = product.ProductId , deleteUrl= "Product/Home/Delete"})
     }

    Component.cs

    public class DeleteConfirmViewComponent : ViewComponent
        {
            public async Task<IViewComponentResult> InvokeAsync(int id,  string deleteUrl="" )
            {
                var items = new DeleteViewModel();
                items.DeleteUrl = deleteUrl;
                items.Id = id;
                return View(items);
            }
        }
    

    Component view

    <form action="@Model.DeleteUrl">
                    <input type="hidden" name="id" value="@Model.Id" />
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">@Model.ConfirmationTitle</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @Model.ConfirmationMesssge
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </div>
                </form>

    HomeController

     [Area("Product")]
     public IActionResult Delete(int id = 0)
            {
                return View();
                 
    
            }

    Thursday, September 3, 2020 6:04 AM

Answers

  • User1312693872 posted

    Hi, polachan

    polachan

    I want to pass the product id going to delete

    Now you should use ajax to pass the id , because if you want control which data to choose ,the former way can't finish it.

    The following is my whole demo, hope it can help you:

    Controller:

    public IActionResult Index()
            {
                List<product> products = new List<product>() {
                new product(){  ProductId=1, Name="aa"},
                new product(){  ProductId=2, Name="bb"},
                new product(){  ProductId=3, Name="vv"},
                };
                return View(products);
            }
    
            public IActionResult Delete(int Id)  // I want to call Delete mehod when select Delete from the index view 
            {
                return RedirectToAction("Index");
            }
            public IActionResult IndexVC(int id1)
            {
                return ViewComponent("DeleteConfirm", new { id = id1 });
            }

    Index View:

    @model IEnumerable<product>
    <div>
        <table>
            <tr>
                <th>
                    ID
                </th>
            </tr>
            @foreach (var product in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => product.ProductId)
                    </td>
                    <td>
                        <button  class="btn btn-danger m-1 buttonList" data-toggle="modal" data-id="@product.ProductId" asp-route-id="@product.ProductId" data-target="#exampleModal">
                            Delete
                        </button>
                    </td>
                </tr>
            }
        </table>
    </div>
    <div id="viewCop"></div>
    
    @section Scripts
    {
        <script>
            $('.buttonList').click(function () {
                event.preventDefault();
                var id = $(this).attr('data-id');
                $.ajax({
                    type: "Post",
                    url: "/Home/IndexVC",
                    data: {
                        "id1": id
                    },
                    success: function (data) {
                        $("#viewCop").html(data);
                        $('#exampleModal').modal();
                    }
                })
            });
        </script>
    
    }
    

    Component view:

    @model DeleteViewModel
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form asp-action="Delete">
                    <input type="hidden" name="id" id="ProductId" value="@Model.ProductId" />
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">@Model.ConfirmationTitle</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        @Model.ConfirmationMesssge
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    

    Model:

    public class DeleteViewModel :product
        {
            public int Id { get; set; }
            public string DeleteUrl { get; set; }
            public string ReturnUrl { get; set; }
            public string ConfirmationTitle { get; set; } = "Delete confirmation";
            public string ConfirmationMesssge { get; set; } = "Are you sure you want to Delete ?";
        }
    
        public class DeleteConfirmViewComponent : ViewComponent
        {
    
            public async Task<IViewComponentResult> InvokeAsync(int id)
            {
                var items = new DeleteViewModel();
                items.ProductId = id;
                return View(items);
            }
        }

    Result:

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 4, 2020 3:07 AM