ASP.NET MVC Html.BeginForm in WebGrid column

Question

I've been rewriting my grid from standard table to a webgrid one to support paging and sorting, however I'm having trouble with adding a "Delete" column. Here's my original code for the deletion:

@using (Html.BeginForm("Delete", "Admin")
    {
        @Html.Hidden("ProductId", item.ProductId)
        <input type="submit" class="btn btn-default btn-xs" value="Delete" />
    }

I can't understand clearly how to rewrite that so it works the same as before in webgrid. Here's my grid so far:

@grid.Table(
    tableStyle: "table table-striped table-condensed table-bordered",
    columns: grid.Columns(
        grid.Column(columnName:"ProductId", header: "Id"),
        grid.Column(columnName: "Name", header: "Name", format: (item) =>
            {
                var link = Html.ActionLink((string)item.Name, "Edit", new { item.ProductId });
                return link;
                }),
        grid.Column(columnName: "Price", header: "Price"),
        grid.Column(here should be the delete button)
            )
        )

Could you please help me with that? Thanks in advance!

Edit: What I've tried is:

grid.Column(format: (item) =>
                {
                    using (Html.BeginForm("Delete", "Admin"))
                    {
                        string htmlString = string.Empty;
                        Html.Hidden("ProductId", (string)item.ProductId);
                        htmlString = "<input type = \"submit\" class=\"btn btn-default btn-xs\" value=\"Delete\" />";

                        return new HtmlString(htmlString);
                    }
                })

however it doesn't seem to work.

Edit 2: Here it is with working delete, sadly without razor.

@using (Html.BeginForm("Delete", "Admin"))
        {
            @grid.Table(
                 tableStyle: "table table-striped table-condensed table-bordered",
                 columns: grid.Columns(
                     grid.Column(columnName: "ProductId", header: "Id"),
                     grid.Column(columnName: "Name", header: "Name", format: (item) =>
                     {
                         var link = Html.ActionLink((string)item.Name, "Edit", new { item.ProductId });
                         return link;
                     }),
                     grid.Column(columnName: "Price", header: "Price"),
                     grid.Column(columnName: "", header: "", format: @<text> <input id="ProductId", name="ProductId", type="hidden", value="@item.ProductId" /><input type="submit" class="btn btn-default btn-xs" value="Delete" /></text>)
                     )
                 )
        }

Answer 1

try this (this should be inside your BeginForm )

    @grid.Table(
        tableStyle: "table table-striped table-condensed table-bordered",
        columns: grid.Columns(
            grid.Column(columnName:"ProductId", header: "Id"),
            grid.Column(columnName: "Name", header: "Name", format: (item) =>
                {
                    var link = Html.ActionLink((string)item.Name, "Edit", new { item.ProductId });
                    return link;
                }),
            grid.Column(columnName: "Price", header: "Price"),
            grid.Column(columnName: "", header: "", format: @<text> <button  type="submit" name="Delete" value="@item.ProductId">Delete</button></text>)
           )