通过单击按钮从 IEnumerable 中选择一个对象

Question

我正在创建一个用于编辑/禁用Active Directory用户帐户的工具。我将搜索一个用户名，它将提供所有匹配项("jsm"将提供"John Smith"，"James Smoth"和"Jack Smuth"的表格)。用户名旁边是"编辑"和"禁用"按钮。当我单击"编辑"或"禁用"时，将出现一个引导模式，其中包含表单输入中的帐户属性(如SamAccountName和DisplayName)的文本框。

由于可能有多个结果，因此我将 IEnumerable 传递到视图中，然后通过@Model将数据放入表中。我的下一步是尝试将该特定的用户对象传递到模态中。因此，如果 I 单击 John Smith 旁边的"编辑"按钮，我希望他的 User 对象填充模态。

我的第一个想法是做一个 User 变量，我可以将 User 对象从 foreach 循环传递到，然后在模态中使用该对象，但我不确定如何做到这一点。我可以/应该将其保留在剃须刀视图中，还是应该将此数据传递到控制器中然后返回？

控制器：

namespace ADM.Controllers
{
public class ManagementController : Controller
{
public new IActionResult User()
{
var user = new List<User>();
return View(user);
}
[HttpPost]
public new IActionResult User(string username)
{
var user = new User();
var result = user.Get(username);
return View(result);
}
public IActionResult Group()
{
return View();
}
}
}

User.cshtml：

@model IEnumerable<User>
@{
ViewData["Title"] = "User Management";
var count = 1;
}
<div class="container col-6">
<div class="card card-square">
<div class="card-body">
<form asp-controller="Management" asp-action="User">
<div class="form-row form-inline">
<input type="text" class="form-control col-10" name="username" placeholder="Username" />
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<br />
@if (Model.Any())
{
<div class="small">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Display Name</th>
<th scope="col">Description</th>
<th scope="col">SamAccountName</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach (var user in Model)
{
<tr>
<th scope="row">@(count++)</th>
<td>@user.DisplayName</td>
<td>@user.Description</td>
<td>@user.SamAccountName</td>
<td>
<button id="userEditBtn" class="btn btn-sm btn-info" data-toggle="modal" data-target="#userEditModal">Edit</button>
<button class="btn btn-sm btn-danger" data-toggle="modal" data-target="#userDisableModal">Disable</button>
</td>
</tr>
}
</tbody>
</table>
</div>
}

Answer 1

有多种方法可以做到这一点。

如果没有很多用户字段，则可以将每个用户按钮的属性存储在 DOM 中

@foreach(var user in Model)
{
<button class="btnEdit" data-username="@user.Username">Edit</button>
}

在 JavaScript 按钮处理程序中，您可以提取数据以填充表单提交或发出 AJAX 请求。

$(".btnEdit").on("click", function(e) {
var form = $("#myform");
var username = $(this).data("username");
// populate a form        
$("input[name='username']").val(username);
form.submit();
});

另一种方法是对要编辑的用户进行 AJAX 调用，以获取比首次加载初始集合的数据更多的数据。然后使用第二个调用来填充编辑表单。一种快速的方法是只加载一个 html 部分。

$(".btnEdit").on("click", function(e) {
var username = $(this).data("username");
var action = $(this).data("action");  // EditDetailsForm
$.ajax({
url: action,
method: "get",
data: { username = username }
})
.then(function(partialView) {
$("#editForm").html(partialView);
});
});

和行动

[HttpGet]
public ActionResult EditDetailsForm(string username)
{
var user = GetUser(username);
return PartialView("_editForm", user);
}

返回部分视图 _editForm.cshtml

@Model User
<form ...>
...
</form>

你只是把它放进你的模态中。