CODEWITHSUNDEEP
asp.net-mvcpopupbootstrap-modal
Shadouspan
Shadouspan

Reputation: 263

ASP.NET Bootstrap Modal Popup - When I Click the Button, Nothings (Popup) Open

I'm trying to pop up with bootstrap. In my "NoteListPartial.cshtml" page; if I click on the edit button, I want the "Not.cshtml" to be opened with pop up. But when I click button, nothing happens. My codes is as follows:

This is my "NoteListPartial.cshtml":

<a href="@Url.Action("Note", "Project", new { ID = item.ID,ProjectID=item.ProjectID })" data-toggle="modal" data-target="#notedetailModal">Edit</a>

And this is my "Note.cshtml":

<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby="">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit Note</h4>
            </div>
            <form method="post" role="form">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Title:</label>
                        <input type="text" name="Name" value="@Model.Name" />
                    </div>
                    <div class="form-group">
                        <label>Content:</label>
                        <textarea name="Content">@Model.Content</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-default" value="Update" />
                </div>
            </form>
        </div>
    </div>
</div>

Upvotes: 0

Views: 1779

Answers (1)

Kevin Shah
Kevin Shah

Reputation: 1617

this is because id="notedetailModal" div is not on "NoteListPartial.cshtml" page.

Make change in your code like put below code in your "NoteListPartial.cshtml" page

<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby="">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

</div>
    </div>
</div>

and in your "Note.cshtml" put rest of the code like

<div class="modal-header">
                <button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit Note</h4>
            </div>
            <form method="post" role="form">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Title:</label>
                        <input type="text" name="Name" value="@Model.Name" />
                    </div>
                    <div class="form-group">
                        <label>Content:</label>
                        <textarea name="Content">@Model.Content</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="submit" class="btn btn-default" value="Update" />
                </div>
            </form>

Try this.

Upvotes: 1

Related Questions