WebGrid 中的上下文菜单答案

【问题标题】：Context menu within WebGridWebGrid 中的上下文菜单
【发布时间】：2015-10-09 11:43:35
【问题描述】：

我在我的 MVC 项目中使用 WebGrid，我想在该 WebGrid 中的右键单击（在行单击时）添加一个上下文菜单。那么，任何人都可以帮助我如何在我的 webgrid 中添加上下文菜单并选择上下文菜单项，如何检索 id？以下是更详细的代码：

@using (Html.BeginForm("save", "Inventory"))
{
    var grid = new WebGrid(Model.products, canSort: false, canPage: true, rowsPerPage: 3);
    int rowNum = 0;

    <div>
        @grid.GetHtml(tableStyle: "webGrid", alternatingRowStyle: "alt", headerStyle: "header",
            selectedRowStyle: "select",
        columns: grid.Columns
            (
               grid.Column("RowNumber", format: item => rowNum = rowNum + 1, style: "rowno"),

               grid.Column("Id", 
               format: (item) => Html.TextBox("products[" + (rowNum - 1).ToString() + "].Id", 
                   (object)item.Id, new { @readonly = "readonly" }), 
                   style: "id"),

              grid.Column("Name", format: (item) => Html.TextBox("products[" + (rowNum - 1).ToString() + "].Name", (object)item.Id), style:"name"),
                                                                                                                      grid.Column("Description", format: (item) => Html.TextBox("products[" + (rowNum - 1).ToString() + "].Description", (object)item.Description), style: "desc"),
                                                                                                          grid.Column("Quantity", format: (item) => Html.TextBox("products[" + (rowNum - 1).ToString() + "].Quantity", (object)item.Quantity), style: "qty"),
                                                                                                          grid.Column("QualityType", format: @item => Html.DropDownList("products[" + (rowNum - 1).ToString() + "].QualityType", (IEnumerable<SelectListItem>)Model.products[rowNum - 1].QualityTypeModel), style: "qlty")
                  ), mode: WebGridPagerModes.Numeric)

    </div>
    <input type="submit" value="Submit">
}

【问题讨论】：

标签： c# asp.net-mvc webgrid

【解决方案1】：

最近我使用jQuery Context Menu 实现了一个类似的任务。这是结果

@{
    @model IEnumerable<TestWebGirdContextMenu.Models.User>
}

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.3/jquery.contextMenu.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.3/jquery.contextMenu.min.js" type="text/javascript"></script>

    <div class="container">
        <h2>WebGrid Context Menu</h2>
        <div class="row">
            <div class="col-lg-12">
                @{
                    var grid = new WebGrid(Model);
                }

                @grid.GetHtml(htmlAttributes: new { id = "webGrid" })
            </div>
        </div>
    </div>

    <script>
        $(function () {
            $.contextMenu({
                selector: "#webGrid tbody tr",
                callback: function (key, options) {
                    var m = "clicked: " + key;
                    window.console && console.log(m) || alert(m);
                },
                items: {
                    "edit": { name: "Edit", icon: "edit" },
                    "cut": { name: "Cut", icon: "cut" },
                    "copy": { name: "Copy", icon: "copy" },
                    "paste": { name: "Paste", icon: "paste" },
                    "delete": { name: "Delete", icon: "delete" },
                    "sep1": "---------",
                    "quit": {
                        name: "Quit", icon: function () {
                            return 'context-menu-icon context-menu-icon-quit';
                        }
                    }
                }
            });

            $('.context-menu-one').on('click', function (e) {
                console.log('clicked', this);
            });
        });
    </script>

</body>

Demo jQuery Context Menu

【讨论】：