如何从按钮单击事件中调用部分视图

Question

我在 view\shared 文件夹中有一个部分视图 _delete.cshtml。我想从 index.cshtml

的按钮点击事件中调用局部视图

@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">
            <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="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

我想从索引 html 调用 _delete 视图。我如何从这里调用 _delete 局部视图

 <button type="button" class="btn btn-danger m-1" data-toggle="modal">
                                Delete
                            </button>

当我单击部分视图的删除按钮时，我想从 HomeController 调用操作方法 Delete()。

public IActionResult Delete(Product product )
 {

   return View()        

}
    public IActionResult Delete(Product product )
 {
   return View()        
}

Answer 1

这是一个像下面这样的工作演示：

型号：

public class DeleteViewModel
{
    public string ConfirmationTitle { get; set; } = "Delete confirmation";
    public string ConfirmationMesssge { get; set; } = "Are you sure you want to Delete ?";
    public Product Product { get; set; }
}
public class Product
{
    public string productName { get; set; }
    public int productPrice { get; set; }
    public int quantity { get; set; }
}

查看(Index.cshtml):

<button type="button" class="btn btn-danger m-1" data-toggle="modal" data-target="#exampleModal">
    Delete
</button>
@await Html.PartialAsync("_Delete")

局部视图：

@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">
            <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>
                <form asp-action="Delete">
                    <input type="hidden" asp-for="Product.productName" />
                    <input type="hidden" asp-for="Product.productPrice" />
                    <input type="hidden" asp-for="Product.quantity" />
                    <input type="submit" value="Delete" class="btn btn-default" />
                </form>
            </div>
        </div>
    </div>
</div>

控制器：

public async Task<IActionResult> Index()
{
    var model = new DeleteViewModel() { 
        Product= new Product()
        {
            productName="aa",
            productPrice=34,
            quantity=2
        }
    };
    return View(model);
}
[HttpPost]
public IActionResult Delete(Product product)
{
    //do your stuff..
    return Json("OK");
}

结果：

如何从按钮单击事件中调用部分视图

how can I call partial view from button click event

asp.net-core

partial-views