Modal with partial view not showing content

Question

I am trying to use Bootstrap Modal in my MVC Application (including my first crack at AJAX), and I am struggling with getting the modal to load my partial view.

I have tried to follow this thread to implement the Modal: MVC 4 Edit modal form using Bootstrap

My code currently looks like this:

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

With the button being loaded on each row to edit a specific project:

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

My _EditProject partial view:

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

My controller actions:

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

When I try to click my modal the background fades in but nothing is displayed where there should be a content window displaying "Test Text". Where am I going wrong? I think I have troubleshooted myself blind on this problem, I cannot see where it stops working.

Obie · Answer 1 · 2018-01-30T17:06:54.123

0

I think if you change these two things you will be all set.

1) Remove the hide class here:

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

2) In your _EditProject partial view, wrap your divs in one of these:

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

edited Jan 30 '18 at 17:06

answered Jan 30 '18 at 17:01

Obie

447
2
5

This showed the modal, but without any kind of styling (transparent). I went with the above answer that solved my problem, thanks for answering – Miniols Jan 31 '18 at 09:05

score 0 · Accepted Answer · answered Jan 30 '18 at 20:26

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

Can you remove the extra div which i have marked with **. And move the

Test

inside the body In your Index.html update the lines where you are adding the container for the modal

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

Instead try the below code if you are using bootstrap v3.3.7

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

Modal with partial view not showing content

2 Answers2