Question

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

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

我的第一个想法是做一个用户的变量我可以从foreach循环传递User对象然后在模态中使用该对象，但我不知道如何去做。可以/我应该将它保留在剃刀视图内还是应该将这些数据传递给控制器然后退出？

控制器：

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>

你刚刚进入你的模态。

通过单击按钮

1 个答案: