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>
}

模态由网格中的链接打开：

 @<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标记。

模态编辑表单不会显示

1 个答案: