根据单击的按钮更改模式形式

Question

我有一个显示用户信息的表格，每个表格都有一个编辑按钮。

我想为我想编辑的用户显示一个带有详细信息的模态表单，但我不知道如何从列表中获取详细信息，并将它们作为模型传递给模态表单。

这是我的观点：

@model MyApp.Models.User
@{
    ViewBag.Title = "Users";
    var roles = new List<string> { "Manager", "Admin" };
    var userRoles = (List<string>)ViewData["userRoles"];
}

<h2>@ViewBag.Title</h2>

@if (userRoles.Any(u => roles.Contains(u)))
{
    using (Html.BeginForm("Update", "Admin", FormMethod.Post, new { id = "update-form", value = "" }))
    {
    <div class="modal fade" id="user-editor" >
        <div class="modal-header">
            <a class="close" data-dismiss="modal"><h3>&times;</h3></a>
            <h3 id="modal-title">Edit User</h3>
        </div>
        <div class="modal-body">
            <div class="form-group">
                @Html.Label("Name", new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
                @Html.Label("Age", new { @class = "col-md-2 control-label" })
                <div class="col-md-10">
                    @Html.TextBoxFor(m => m.Age, new { @class = "form-control" })
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a class="btn" data-dismiss="modal">Close</a>
            <input type="submit" class="btn btn-primary" value="Save Changes" />
        </div>
    </div>
    }
}

<table class="table-bordered table-hover" id="tbusers">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            @if (userRoles.Any(u => roles.Contains(u)))
            {
                <th>Edit</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var u in users)
        {
            <tr id="@u.Id">
                <td>@u.Name</td>
                <td>@u.Age</td>
                @if (userRoles.Any(u => roles.Contains(u)))
                {
                    <td><a type="button" class="btn edit-btn" href="#user-editor" data-toggle="modal">Edit</a></td>
                }
            </tr>
        }
    </tbody>
</table>

Answer 1

我创建了一个测试示例，可以帮助您了解如何实现这一目标。 Index.cshtml 将显示员工列表

@model IEnumerable<MvcApplication1.Models.Employee>
@using MvcApplication1.Models;
<h2>Index</h2>
<table>
@foreach (Employee item in Model)
{
    <tr>
        <td>@Html.ActionLink(@item.EmployeeName, "Name", new { id = item.ID })</td>
        <td>
            <button type="button" data-id='@item.ID' class="anchorDetail btn btn-info btn-sm" data-toggle="modal" 
         data-target="#myModal">
                Open Large Modal</button></td>
    </tr>
 }
</table>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Details</h4>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
   </div>
  </div>

在同一页面，引用以下脚本

<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

JQuery AJAX在同一页面调用ActionMethod获取/设置员工个人数据

<script>
$(document).ready(function () {
    var TeamDetailPostBackURL = '/Employee/Details';
    $(document).on('click', '.anchorDetail', function () {
        var $buttonClicked = $(this);
        var id = $buttonClicked.attr('data-id');
        var options = { "backdrop": "static", keyboard: true };
        $.ajax({
            type: "GET",
            url: TeamDetailPostBackURL,
            contentType: "application/json; charset=utf-8",
            data: { "Id": id },
            datatype: "json",
            success: function (data) {
                debugger;
                $('.modal-body').html(data);
                $('#myModal').modal(options);
                $('#myModal').modal('show');

            },
            error: function () {
                alert("Dynamic content load failed.");
            }
        });
    });
    $("#closbtn").click(function () {
        $('#myModal').modal('hide');
    });
});

现在创建一个Employee类（因为我没有使用EF）

public class Employee
{
    public int ID { get; set; }
    public string EmployeeName { get; set; }
}

创建名为 Employee 的控制器和 2 个 ActionMethod，如下所示：

public ActionResult Index()
{
  return View(emp);//sends a List of employees to Index View
}
public ActionResult Details(int Id)
{
  return PartialView("Details", 
  emp.Where(x=>x.ID==Convert.ToInt32(Id)).FirstOrDefault());
}

我返回PartialView，因为我需要在页面中加载页面。 Details.cshtml

@model MvcApplication1.Models.Employee
<fieldset>
<legend>Employee</legend>
<div class="display-label">
     @Html.DisplayNameFor(model => model.ID)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.ID)
</div>
<div class="display-label">
     @Html.DisplayNameFor(model => model.EmployeeName)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.EmployeeName)
</div>
</fieldset>
<p>@Html.ActionLink("Back to List", "Index")</p>

当您执行并访问 Employee 的 Index 页面时，您会看到如下屏幕：

带有结果的模态对话框将显示如下：

注意：您需要添加jquery和Bootstrap的引用，您可以根据自己的需要进一步设计/自定义

希望对你有帮助！