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

请注意以下代码：

从单选按钮中删除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?
        }
    });
});

将发回

[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视图中的网格行选择

1 个答案: