mvc 视图中的网格行选择

Question

在我的 MVC 应用程序中，我使用 webgrid 在视图中显示用户详细信息。在每一行中，它都有一个带有单选按钮的列 select 该行。

在同一个视图中它也有一个表格。如果用户通过单击单选按钮 selecting 一行，则相应的详细信息应填写在表单控件中。然后用户可以从该表单编辑详细信息。

如何根据行 ID 过滤特定用户的详细信息并将其填写到表单中？我可以为此在 jQuery 函数中使用 LINQ 吗？

这是我的观点，

@model IEnumerable<MyTestProject.Models.modeldata>
@{
    Layout = null;
    WebGrid grid = new WebGrid(Model, rowsPerPage: 5,selectionFieldName:"SelectedRow");
}
<link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")" type="text/javascript"></script>

<!DOCTYPE>
<style type="text/css">
    .gridTable {margin: 5px;padding: 10px;border: 1px #c8c8c8 solid;border-collapse: collapse;min-width: 550px; background-color: #fff;color: #fff;}
.gridHead th{font-weight: bold;background-color: #030D8D;color: #fff;padding: 10px}
.gridHead a:link,.gridHead a:visited,.gridHead a:active,.gridHead a:hover {color: #fff;}
.gridHead a:hover {text-decoration:underline;}
.gridTable tr.gridAltRow{background-color: #efeeef;}
.gridTable tr:hover{background-color: #f6f70a;}
.gridAltRow td{padding: 10px;margin: 5px; color: #333;}
.gridRow td{padding: 10px;color: #333;}
.gridFooter td{padding: 10px; background-color: #c7d1d6;color: #999;font-size: 12pt;text-align: center;}
.gridFooter a{font-weight: bold;color: #333; border: 1px #333 solid;}
</style>
<html>
    <head runat="server">
        <title>EDIT with Grid</title>
    </head>
<body style="padding:10px">
        <div>
<div> 
                @grid.GetHtml(
    tableStyle: "table",
    fillEmptyRows: false,
    headerStyle: "header",

    footerStyle: "grid-footer",

    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",

    columns: new[]  // colums in grid
    {
        grid.Column(header: "Select", format: @<text><input name="chck" type="RADIO" id="chck" class="rbutton" value="@item.id" /></text>),
        grid.Column("name"  ),
        grid.Column("age"),
        grid.Column("email"),
        grid.Column("mob"),
   })
            </div>
<form>
                <h2>Edit User Details</h2>
                <div class="space">
                    <div>Name</div>
                    <div>@Html.TextBox("txtname")</div>
                </div>
                <div class="space">
                    <div>Age</div>
                    <div>@Html.TextBox("txtage")</div>
                </div>
                <div class="space">
                    <div>Email</div>
                    <div>@Html.TextBox("txtmail")</div>

                </div>
                <div class="space">
                    <div>Mobile</div>
                    <div>@Html.TextBox("txtmob")</div>
                </div>
                <div style="margin-top:20px">
                    <input type="submit" id="ButtonSave" value="Save" />
                </div>
</form>
</div>
    </body>
    </html>

<script type="text/javascript">

    $('.rbutton').click(function () {
        try
        {
            var row = $(this).closest('tr');
            $('#txtname').val(row.children('td').eq(1).text());
        }
        catch(ex)
        {
            alert(ex.message);
        }
    });


</script>

而且，我的模型 class 是，

public class modeldata
    {
        public int id { get; set; }
        public string name { get; set; }
        public string age { get; set; }
        public string email { get; set; }
        public string mob { get; set; }
    }

最后是控制器，

public ActionResult EditUser()
        {
            List<modeldata> lmd = new List<modeldata>();
            DataTable dt = Db.GetUserDetails();
            foreach(DataRow dr in dt.Rows)
            {
                lmd.Add(new modeldata
                {
                    id = Convert.ToInt32(dr["ID"]),
                    name = dr["Name"].ToString(),
                    age = dr["Age"].ToString(),
                    email = dr["Email"].ToString(),
                    mob = dr["Mobile"].ToString()
                });
            }
            return View(lmd);
        }

Answer 1

一个选项是将模型的值作为 data- 属性添加到单选按钮，然后在脚本中读取。

将按钮的 html 更改为

<input type="radio" name="chck" class="radiobutton" data-name="@item.name" data="@item.age" ..... />

并在脚本中

$('.radiobutton').change(function() {
  $('#txtname').val($(this).data('name'));
  $('#txtage').val($(this).data('age'));
  ....
});

另一种是使用相对选择器从关联列中的 table 单元格中读取值。您没有显示您的代码生成的实际 html，因此可能需要修改以下内容以适应

<input type="radio" name="chck" class="radiobutton" />

脚本

$('.radiobutton').change(function() {
  var row = $(this).closest('tr'); // get the associated row
  $('#txtname').val(row.find('td').eq(1).text()); // get the text of the 2nd cell in the row
  ....
});

以上代码注意以下几点：

从单选按钮中删除您的 id 属性 - 您的生成重复的 id 个属性无效 html
删除 onclick 属性（不要污染你的标记行为）并使用 Unobtrusive Javascript

我还建议您更改生成表单的方式以使用模型绑定并允许客户端和服务器端验证

创建局部视图（比如）_UserData.cshtml

@model modeldata
<form id="userform">
    @Html.LabelFor(m => m.name)
    @Html.TextBoxFor(m => m.name)
    @Html.ValidationMessageFor(m => m.name)
    .... // elements for other properties
    <button id="save" type="button">Save</button>
</form>

并在主视图中使用

@Html.Partial("_UserData")

假设您使用 ajax 提交，这样您就可以在不离开页面的情况下编辑多个用户，主视图中的脚本将是

var url = '@Url.Action("Edit")';
$('#save').click(function() {
    $.post(url, $('#userform').serialize(), function(response) {
        if (!response) {
            // display error message the the user was not saved?
        }
    });
});

这会 post 回到

[HttpPost]
public JsonResult Edit(modeldata model)
{
    // save the data
    return Json(true); // or return Json(null); if something failed
}

请注意，在上述脚本中，需要更改选择器以匹配生成的实际 id 属性 - 即 id="name"，而不是 id=txtname" 等

$('#name').val($(this).data('name'));

mvc 视图中的网格行选择

Grid row selection in mvc view

javascript

asp.net-mvc

jquery

webgrid