填充模态项答案

【问题标题】：Populate Modal Items填充模态项
【发布时间】：2017-11-28 16:36:06
【问题描述】：

我希望根据从我的 HTML 表中选择的行和从我的模型中获得的数据打开并填充一个 Bootstrap 模式，我的 HTML 表中有一个按钮，它将调用一个 JS 函数并传递识别它。我能够取回数据，但我只是不知道如何使用 JSON 列表填充模型。

这是我想要动态构建的模态：

 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Change User Deparment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="Employee Number" class="form-control-label">Employee Number:</label>
                        <input type="text" class="form-control" id="Employee Number">
                    </div>

                    <div class="form-group">
                        <label for="userName" class="form-control-label">User Name:</label>
                        <input type="text" class="form-control" id="userName">
                    </div>

                    <label for="department">Select Department</label>
                    <select class="form-control" id="department">
                        <option>Option1</option>
                        <option>Option2</option>
                        <option>Option3</option>
                    </select>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

这个 My JS 函数，用于从我的模型中获取我的数据。

function editUser(id) {

    //alert(userId);

    $.ajax({
        type: "GET",
        url: '@Url.Action("GetUserDetails", "Admin")',
        contentType: "application/json; charset=utf-8",
        datatype: JSON,
        data: ({ 'Value': id }),
        success: function () {



        },
        error: function () {
            alert(test);
        }
    });
}

【问题讨论】：

把你拿回来的数据也贴出来。我们需要知道您的数据格式。

标签： javascript html json ajax bootstrap-modal

【解决方案1】：

首先，您可能希望在模式中为表单中的输入字段分配名称：

        <div class="modal-body">
            <form>
                <div class="form-group">
                    <label for="Employee Number" class="form-control-label">Employee Number:</label>
                    <input type="text" class="form-control" name="EmployeeNumber" id="Employee Number">
                </div>

                <div class="form-group">
                    <label for="userName" class="form-control-label">User Name:</label>
                    <input type="text" class="form-control" name="UserName" id="userName">
                </div>

                <label for="department">Select Department</label>
                <select class="form-control" id="department">
                    <option>Option1</option>
                    <option>Option2</option>
                    <option>Option3</option>
                </select>
            </form>
        </div>

然后，使用 jQuery 根据名称分配值。根据您的数据的外观，这可能会有所不同。应该是这样的：

$.ajax({
    type: "GET",
    url: '@Url.Action("GetUserDetails", "Admin")',
    contentType: "application/json; charset=utf-8",
    datatype: JSON,
    data: ({ 'Value': id }),
    success: function (result) {
        $('#exampleModal form input[name=EmployeeNumber]').val(result.EmployeeNumber);
        $('#exampleModal form input[name=UserName]').val(result.UserName);
    },
    error: function () {
        alert(test);
    }
});

【讨论】：

【解决方案2】：

我想建议您在模态内容中加载一个视图，例如：

function editUser(id) {

    //alert(userId);

    var $modal = $("#exampleModal");

    $modal.find('.modal-body').load('@Url.Action("GetUserDetails", "Admin")/' + id, function() {
        $modal.modal('show');
    });
}

在您的控制器中，您获取模型数据并返回它的视图，例如：

public ActionResult GetUserDetails(long id) {
     UserDetailsViewModel model = GetModel(id); // Get the model somehow
     return PartialView(model);
}

还有一个名为GetUserDetails的视图，例如：

@model UserDetailsViewModel
<form>
    <div class="form-group">
        @Html.LabelFor(model => model.EmployeeNumber)
        @Html.EditorFor(model => model.EmployeeNumber, new { @class = "form-control" })
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.UserName)
        @Html.EditorFor(model => model.UserName, new { @class = "form-control" })
    </div>

    <label for="department">Select Department</label>
    <select class="form-control" id="department">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
</form>

IMO 这是最优雅、最清晰的方式。

【讨论】：