在带有弹出内容的 Foreach 循环中传递 UserID 参数

Question

Here is a picture how it lists all phone numbers from all users when I hover over the user account.

我正在使用 ASP.NET 创建一个 MVC 项目，并使用 Razor 通过“@foreach（模型中的变量项）”对所有用户进行排队。在该表中，我想使用一个弹出框，一旦将鼠标悬停在帐户名称（称为经销商）上，就会显示用户的电话号码。它目前列出了所有用户记录的所有电话，但我希望它特定于该用户。我尝试使用 ActionLinks（我如何为编辑、详细信息和删除传递相同的参数）以及标签，但似乎都不起作用。如何传递 UserID 参数以限制弹出框仅列出链接到特定用户的电话号码？

这是表格的代码：

<table>
@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Dealer)
        </td>
        <td>
            <a href="#" data-toggle="popover" title="Phones">@Html.DisplayFor(modelItem => item.UserName)</a>
            <div id="phone-content" style="display: none">
                @foreach (var phone in Model)
                {
                    //Using ActionLinks
                    @Html.ActionLink("Mobile", "ListPhones", new { id = item.Id })<br />
                    @Html.ActionLink("Business", "ListPhones", new { id = item.Id })<br />
                    @Html.ActionLink("Fax", "ListPhones", new { id = item.Id })<br>

                    //Using <a href> tags
                    <a href="tel:@phone.PhoneMobile">@Html.DisplayFor(modelItem => phone.PhoneMobile)</a><br />
                    <a href="tel:@phone.PhoneBus">@Html.DisplayFor(modelItem => phone.PhoneBus)</a><br />
                    <a href="tel:@phone.PhoneFax">@Html.DisplayFor(modelItem => phone.PhoneFax)</a><br />
                }
            </div>
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id })<br />
            @Html.ActionLink("Details", "Details", new { id = item.Id })<br />
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
        </td>
    </tr>
}
</table>

在控制器中，我创建了一个新类来列出电话信息并尝试在那里传递参数。 这是在控制器中正确传递参数的编辑用户的代码：

public async Task<ActionResult> Edit(string id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        var user = await UserManager.FindByIdAsync(id);
        if (user == null)
        {
            return HttpNotFound();
        }

        var userRoles = await UserManager.GetRolesAsync(user.Id);

        return View(new AdminEditUserViewModel()
        {
            Id = user.Id,
            Dealer = user.Dealer,
            UserName = user.UserName,
            FirstName = user.FirstName,
            LastName = user.LastName,
            Address = user.Address,
            City = user.City,
            State = user.State,
            Zip = user.Zip,
            Email = user.Email,
            PhoneMobile = user.PhoneMobile,
            PhoneBus = user.PhoneBus,
            PhoneExt = user.PhoneExt,
            PhoneFax = user.PhoneFax,
            RolesList = RoleManager.Roles.ToList().Select(x => new SelectListItem()
            {
                Selected = userRoles.Contains(x.Name),
                Text = x.Name,
                Value = x.Name
            })
        });
    }

    //
    // POST: /Users/Edit/5
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Edit([Bind(Include = "Dealer,UserName,FirstName,LastName,Address,City,State,Zip,Email,PhoneMobile,PhoneFax,PhoneBus,PhoneExt,Id")]
    AdminEditUserViewModel editUser, params string[] selectedRole)
    {
        if (ModelState.IsValid)
        {
            var user = await UserManager.FindByIdAsync(editUser.Id);
            if (user == null)
            {
                return HttpNotFound();
            }

            user.Dealer = editUser.Dealer;
            user.UserName = editUser.UserName;
            user.FirstName = editUser.FirstName;
            user.LastName = editUser.LastName;
            user.Address = editUser.Address;
            user.City = editUser.City;
            user.State = editUser.State;
            user.Zip = editUser.Zip;
            user.Email = editUser.Email;
            user.PhoneMobile = editUser.PhoneMobile;
            user.PhoneBus = editUser.PhoneBus;
            user.PhoneExt = editUser.PhoneExt;
            user.PhoneFax = editUser.PhoneFax;

            var userRoles = await UserManager.GetRolesAsync(user.Id);

            selectedRole = selectedRole ?? new string[] { };

            var result = await UserManager.AddToRolesAsync(user.Id, selectedRole.Except(userRoles).ToArray<string>());

            if (!result.Succeeded)
            {
                ModelState.AddModelError("", result.Errors.First());
                return View();
            }
            result = await UserManager.RemoveFromRolesAsync(user.Id, userRoles.Except(selectedRole).ToArray<string>());

            if (!result.Succeeded)
            {
                ModelState.AddModelError("", result.Errors.First());
                return View();
            }
            return RedirectToAction("Index");
        }
        ModelState.AddModelError("", "Something failed.");
        return View();
    }

相对于在控制器中列出手机的代码：

public async Task<ActionResult> ListPhones(string id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        var user = await UserManager.FindByIdAsync(id);
        if (user == null)
        {
            return HttpNotFound();
        }

        return View(new AdminEditUserViewModel()
        {
            Id = user.Id,
            PhoneMobile = user.PhoneMobile,
            PhoneBus = user.PhoneBus,
            PhoneExt = user.PhoneExt,
            PhoneFax = user.PhoneFax
        });
    }

Answer 1

创建自定义操作并尝试以下操作：

 <a href="/GetPhoneInfo/@item.Id" data-toggle="popover" title="Phones">@Html.DisplayFor(modelItem => item.UserName)</a>

Answer 2

像往常一样，您应该阅读docs。我假设您正在使用 Bootstrap，因为它看起来 像 Bootstrap 并且默认情况下 MVC 使用 Bootstrap。不过，为了将来参考，您应该明确说明类似的事情，并且您可能也应该这样标记您的问题。

也就是说，文档会告诉您您需要知道的一切。您必须指定将激活弹出框的触发器，幸运的是，Bootstrap 的弹出框允许多个触发器。对于您的方案，您需要同时使用hover 和focus。 focus 触发器在单击时打开弹出框，然后保持打开状态直到失去焦点，这似乎正是您想要的。

基本上，您只需将他们提供的代码用于“可关闭”弹出窗口并添加额外的hover 触发器：

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus hover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

然后，当然，只需根据您的需要自定义内容/类。

Answer 3

我能够使它工作。将您的示例项目的电子邮件发送给我。