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

Question

我试图在我的MVC应用程序中使用Bootstrap Modal（包括我在AJAX上的第一个破解），而我正在努力获取加载我的部分视图的模式。

我试图遵循此线程来实现模态： MVC 4使用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

我认为，如果您更改这两件事，您将一无所获。

1）在这里删除hide类：

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

2）在_EditProject部分视图中，将div包裹在以下其中之一中：

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

Answer 2

<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 fade" id="modal">
    <div class="modal-dialog">
          <div class="modal-content"></div>
    </div>
</div>

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

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