MVC Razor WebGrid 在按钮提交时获取选定的行答案

【问题标题】：MVC Razor WebGrid Get Selected Row on Button SubmitMVC Razor WebGrid 在按钮提交时获取选定的行
【发布时间】：2013-09-23 03:38:07
【问题描述】：

如何将 WebGrid 选定行放入隐藏变量中。

我正在使用以下代码。

@{
var grid = new WebGrid(@ViewBag.ImageFiles, canPage: false, rowsPerPage: 5, selectionFieldName: "SelectedRow", ajaxUpdateContainerId: "gridImages");
}
<div id="gridContent">
@grid.GetHtml(tableStyle: "webGrid",
            htmlAttributes: new { id = "gridImages" },
            headerStyle: "header",
            displayHeader: true,
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            columns: grid.Columns(
            grid.Column("Select", format: (item) => item.GetSelectLink("Select")),
            grid.Column("File", "Image")))
</div>
<input type="button" value="Submit" onclick="javascript getSelectedRow();"/>
@{
System.Dynamic.ExpandoObject expobject = null;
if (grid.HasSelection)
{
    expobject = (System.Dynamic.ExpandoObject)grid.SelectedRow.Value;
<input type="hidden" id="hdnSelectedRow" name="hdnSelectedRow" value="@(expobject == null ? "" : expobject.FirstOrDefault().Value.ToString())" />
}
}

这里我通过以下代码将 Datatable 绑定到 Webgrid

foreach (DataRow row in imageFiles.Rows)
        {
            var obj = (IDictionary<string, object>)new ExpandoObject();
            foreach (DataColumn col in imageFiles.Columns)
            {
                obj.Add(col.ColumnName, row[col.ColumnName]);
            }
            result.Add(obj);
        }
        ViewBag.ImageFiles = result;

当我点击提交按钮时，我没有在 javascript 中获得隐藏变量和值。

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 razor webgrid

【解决方案1】：

我找到了获得选定行的解决方案。

以下是代码。

@{
var grid = new WebGrid(@ViewBag.ImageFiles, selectionFieldName: "SelectedRow");
}
<div id="gridImages">
@grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            displayHeader: true,
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            mode: WebGridPagerModes.All,
            columns: grid.Columns(
            grid.Column("Select", format: @<text>@Html.RadioButton("rbFile", "", false) </text>),
            grid.Column("File", "File", format: @<text>@item.File</text>)))
</div>

在按钮上的 javascript 中单击我正在使用以下代码来获取选定的行

var selectedValue = "";
                        var isSelected = false;
                        $('#gridImages table tr').each(function () {
                            if ($(this).find("input[id*='rbFile']").length > 0) {
                                if ($(this).find("input[id*='rbFile']")[0].checked == true) {
                                    isSelected = true;
                                    selectedValue = $(this)[0].innerText;
                                }
                            }
                        });
                        if (isSelected == true) {
                            $(this).dialog("close");
                            txtBg = document.getElementById("txtBg");
                            txtBg.value = selectedValue;
                        }
                        else {
                            alert("Please select atleast one file.");
                        }

【讨论】：

【解决方案2】：

当一个 webgrid 被渲染时，它只是一个 html 表格。我可能是错的，但我认为您的代码不会随着点击的内容而改变。为了更改隐藏值以匹配选定的行，我总是使用 jquery。试试这样的方法，看看它是否适合你。

<script type="text/javascript">
   $(document).ready(function(){
       $('#tableID').on('click', function(){
           $('#hdnSelectedRow').val($(this).closest('tr').find('#yourField').val());
       });
   });
</script>

【讨论】：