在MVC视图中选择网格行

Question

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

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

如何根据行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> 

而且，我的模型课是

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'));
  ....
});

另一个是使用相对选择器从关联列中的表单元格读取值。 您尚未显示代码生成的实际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
  ....
});

关于上面的代码，请注意以下几点：

1. 从单选按钮中删除您的id属性-您生成的重复id属性无效html
2. 删除onclick属性（不要污染行为标记），并使用不引人注目的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?
        }
    });
});

这将回发到

[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'));