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

当我尝试单击我的模态时，背景淡入但没有显示任何内容窗口显示＆＃34;测试文本＆＃34;。我哪里错了？我想我已经对这个问题视而不见了，我无法看到它停止工作的地方。

Answer 1

我认为，如果你改变这两件事，你将会全力以赴。

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>

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

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

2 个答案: