部分视图不显示内容的模态

Question

我正在尝试在我的 MVC 应用程序中使用 Bootstrap Modal（包括我在 AJAX 上的第一次破解），我正在努力让模态加载我的局部视图。

我已经尝试按照这个线程来实现模态：MVC 4 Edit modal form using Bootstrap

我的代码目前如下所示：

Index.cshtml：

<div class="modal hide fade in" id="edit-project">
    <div id="edit-project-container"></div>
</div>

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script type="text/javascript">
        $(document).ready(function () {
            $('.edit-project').click(function () {
                var url = "/Project/Edit"; // the url to the controller
                var id = $(this).attr('data-id'); // the id that's given to each button in the list
                $.get(url + '/' + id, function (data) {
                    $('#edit-project-container').html(data);
                    $('#edit-project').modal('show');
                });
            });
        });
    </script>
}

在每一行加载按钮以编辑特定项目：

<button class="btn btn-primary edit-project" data-id="@item.Id">Edit</button>

我的 _EditProject 部分视图：

 <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Edit group member</h3>
    </div>
    <div>       
<div class="modal-body">
            Test text

        </div>
        <div class="modal-footer">
            <button class="btn btn-inverse" type="submit">Save</button>
        </div>
        <p>Test</p>
    </div>


    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
    }

我的控制器操作：

// GET: Project/Edit/5
public ActionResult Edit(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Project project = db.Projects.Find(id);
    if (project == null)
    {
        return HttpNotFound();
    }
    ViewBag.UserId = new SelectList(db.Users.Where(u => u.RoleID == 1), "ID", "FirstName", project.UserId);
    return PartialView("_EditProject", project);
}

// POST: Project/Edit/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for 
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(Project project)
{
    if (ModelState.IsValid)
    {
        db.Entry(project).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    ViewBag.UserId = new SelectList(db.Users.Where(u => u.RoleID == 1), "ID", "FirstName", project.UserId);
    return View(project);
}

当我尝试单击我的模式时，背景会淡入，但在应该有显示“测试文本”的内容窗口的地方没有显示任何内容。 我哪里错了？我想我已经对这个问题视而不见，我看不到它在哪里停止工作。

Answer 1

<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-
                       hidden="true">×</button>
   <h3 id="myModalLabel">Edit group member</h3>
</div>
**<div>**       
  <div class="modal-body">
            Test text
  </div>
  <div class="modal-footer">
            <button class="btn btn-inverse" type="submit">Save</button>
  </div>
  <p>Test</p>
**</div>**

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

你能删除我用**标记的多余的div吗？并移动

测试

在体内 在您的 Index.html 中更新您为模态添加容器的行

<div class="modal hide fade in" id="edit-project">
    <div id="edit-project-container"></div>
</div>

如果您使用的是 bootstrap v3.3.7，请尝试以下代码

<div class="modal fade" id="modal">
    <div class="modal-dialog">
          <div class="modal-content"></div>
    </div>
</div>

Answer 2

我想如果你改变这两件事，你就会万事俱备。

1) 去掉这里的隐藏类：

<div class="modal hide fade in" id="edit-project">
    <div id="edit-project-container"></div>
</div>

2) 在您的 _EditProject 部分视图中，将您的 div 包装在其中之一中：

<div class="modal-content">
   ...
</div>