模态编辑表单不会显示

Question

使用 bootstrap 3.1 和 mvc4。我的模态表单显示良好，但表单中没有数据。一旦我修复了填充编辑表单的数据（至少我知道它击中了控制器并收到了数据），屏幕变灰但不显示表单。我可以在开发人员工具中看到标记。所以出于某种原因，当它获得数据时发生了一些变化。

我有一个包含 2 个局部视图的索引视图。

索引（jquery获取模态形式的数据）：

@Html.Partial("_foresterEditForm", Model)

@Html.Partial("_foresterGrid", Model)

@section Scripts
{
<script type="text/javascript">

    $(".btn-edit-forester").on("click", function () {
        var foresterid = $(this).closest('tr').find('td:eq(0)').text();
        $.ajax({
            url: '@Url.Action("EditForester", "Forester")',
            type: 'GET',
            data: { id: foresterid },
            success: function (data) {
                $('#edit-modal').html(data).modal('show');
            }

        })
    });
</script>
}

模态框由网格中的link打开：

 @<a href="#edit-modal" class="btn btn-default btn-edit-forester" data-toggle="modal">edit</a>

...以及模态框的顶部，位于第二部分：

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="edit-modal-label">Edit Forester</h4>
        </div>
        <div class="modal-body">
            @using (Ajax.BeginForm("EditForester", "Forester", null,
                                new AjaxOptions
                                {
                                    InsertionMode = InsertionMode.Replace,
                                    HttpMethod = "POST",
                                    UpdateTargetId = "forester-grid"
                                }))
            {
                @Html.AntiForgeryToken()

                <div class="form">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="row">
                        <div class="form-group">

... form elements, then closing divs.

编辑：我认为问题可能在于我如何从控制器返回数据，所以这里是控制器方法：

    [HttpGet]
    public PartialViewResult EditForester(int id)
    {
        ForesterViewModel vm = new ForesterViewModel();
        vm.Forester = repo.GetForester(id);
        return PartialView("_foresterEditForm", vm);
    }

Answer 1

那么根据我们迄今为止取得的侦查进展，您可以尝试以下操作吗：

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="edit-modal-label">Edit Forester</h4>
        </div>
        <div id="test-modal-body-upper"></div>
        <div class="modal-body">
            @using (Ajax.BeginForm("EditForester", "Forester", null,
                                new AjaxOptions
                                {
                                    InsertionMode = InsertionMode.Replace,
                                    HttpMethod = "POST",
                                    UpdateTargetId = "forester-grid"
                                }))
            {
                @Html.AntiForgeryToken()

                <div class="form">
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="row">
                        <div class="form-group">

... form elements, then closing divs.

并将 GET 成功函数更改为：

success: function (data) {
                $('#test-modal-body-upper').html(data);
                $('#edit-modal').modal('show');
            }

这应该会依次显示两个内容块并证明您的整体概念是可行的。您也可以尝试将 class="modal-body" 属性放入我添加的新 div 中，如果它看起来与模态的其余部分不同的话。没有看到 CSS 很难知道确切的效果。如果您确实需要将两个内容块显示在彼此之上，则需要考虑透明度或特殊 div 标记。

模态编辑表单不会显示

modal edit form wont display

asp.net-mvc

jquery

twitter-bootstrap

bootstrap-modal