如何使用 Javascript 将特定数据从 webgrid 传递到 MVC 控制器？

Question

我正在尝试使用 Javascript 和 Entity Framework 删除我的网络网格 table 中的特定行。这是我到目前为止得到的：

webgrid 视图有效，我在最后添加了一个（红叉）标记以删除该特定行。

HTML:

<div class="row">
        <div class="col-lg-12 d-flex align-items-stretch">
            @grid.Table(tableStyle: "table table-responsive table-striped table-bordered",
                columns: grid.Columns(
                  grid.Column(columnName: "ApiRedirectID", header: "ID", format:@<text><div class="edit" data-id="@item.ApiRedirectID" data-propertyname="ApiRedirectID">@item.ApiRedirectID</div></text>),
                  grid.Column(columnName: "ApiName", header: "Name", format:@<text><div class="edit" data-id="@item.ApiRedirectID" data-propertyname="ApiName">@item.ApiName</div></text>),
                  grid.Column(columnName: "CompanyID", header: "Company ID", format:@<text><div class="edit" data-id="@item.ApiRedirectID" data-propertyname="CompanyID">@item.CompanyID</div></text>),
                  grid.Column(columnName: "Company.CompanyName", header: "Company Name", format:@<text><div class="edit" data-id="@item.ApiRedirectID" data-propertyname="Company.CompanyName">@item.Company.CompanyName</div></text>),
                  grid.Column(columnName: "ApiURL2", header: "URL", format:@<text><div class="edit" data-id="@item.ApiRedirectID" data-propertyname="ApiURL2">@item.ApiURL2</div></text>),
                  grid.Column(columnName: "Delete", header: " ", format:@<a href="#" class="display delete-btn"><span class="glyphicon glyphicon-remove" style="color:red;"></span></a>)
          )
     )

        </div>
        <div class="col-lg-12 d-flex align-items-stretch">
            @grid.PagerList(mode: WebGridPagerModes.All, paginationStyle: "pagination pagination-small pagination-right")
        </div>
</div>

Javascript（到目前为止我想出了什么）：

 $('.delete-btn').on("click", function () {

       //how to get specific row id here and pass it to my controller?     
 })

我想要实现的是，我将要删除的行的 ApiRedirectID 传递给 Javascript，而不是我的 MVC 控制器。

希望有人能帮忙！

提前致谢！

Answer 1

修改这一行创建一个锚标记来传递 id，最好的部分是它会附加每个带有锚标记的 id，你将直接进入控制器

(**在你的情况下@item.Id你可以从中找到记录并删除它)**

控制器，所以在控制器端，您将获得 id 以将其从数据库中删除。

grid.Column(columnName: "Delete", header: " ", format:@<a href="Controller/action/id" class="display delete-btn"><span class="glyphicon glyphicon-remove" style="color:red;"></span></a>)

Answer 2

假设每一行都是 <tr>，你可以做类似的事情。

$('.delete-btn').on("click", "body", function () {
        var $row = $(this).closest('tr');
        var rowid = $row.find('[data-propertyname="ApiRedirectID"]');
        $.ajax({
          method: "POST",
          url: "controller/deleterow",
          data: { id: rowid }
        })
          .done(function( msg ) {
            alert( "Row Deleted!" );
      });
 });

如何使用 Javascript 将特定数据从 webgrid 传递到 MVC 控制器？

How to pass specific data from webgrid into MVC Controller using Javascript?

c#

asp.net

model-view-controller

webgrid