I'm trying to replace a div with a bootstrap model from a partial view but when I click on the Ajax.ActionLink element on my page, nothing happens.

I've already checked if it goes through the MovieController and it does. The div modalDiv just won't update.

I've added the jquery.unobstrusive to my jquery bundle.

My code looks like this so far:

Index.cshtml

@Ajax.ActionLink(e.Title, "ShowDetails", "Movie", new { id = e.Id }, new AjaxOptions { UpdateTargetId = "modalDiv" })
<div id="modalDiv"></div>


MovieController.cs

[HttpGet]
    public ActionResult ShowDetails(int id)
    {
        var model = new MovieModel();
        model.SelectedMovie = facade.MovieRep.GetById(id);
        return PartialView("_Details", model);
    }


_ViewDetails.cshtml

<div id="modalDiv">
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 class="modal-title">@Model.SelectedMovie.Title</h3>
            </div>
            <div class="modal-body">
                <table>
                    <tr>
                        <td align="right">
                            Price:
                        </td>
                        <td>
                            $@Model.SelectedMovie.Price
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Cover:
                        </td>
                        <td>
                            @Model.SelectedMovie.ImageURL
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Trailer:
                        </td>
                        <td>
                            <a href="@Model.SelectedMovie.TrailerURL" target="_blank">Link</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Genre:
                        </td>
                        <td>
                            @foreach (var g in Facade.Instance.MovieGenreRep.GetGenreByMovie(Model.SelectedMovie))
                            {
                                <p>
                                    @g.Name
                                </p>
                            }
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
                @Ajax.BeginForm("AddToCart", "Cart", null, new AjaxOptions { UpdateTargetId = "cart" })
                {
                <input type="hidden" name="Id" value="@Model.SelectedMovie.Id" />
                <button class="btn btn-success" data-dismiss="modal"><span class="icon-cart"> Add</span></button>
                }
            </div>
        </div>
    </div>
</div>
</div>

Related posts

Recent Viewed