Question

我在mvc 5中学习jquery和ajax并试图替换一些操作以使用ajax。问题是如何将我的删除操作包装到jax弹出窗口中？我有以下观点：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-  hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Are you sure to delete this Photo?    </h4>
</div>
<div class="modal-body">
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Name)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Name)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.Description)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.Description)
        </dd>
        <dt>
            @Html.DisplayNameFor(model => model.TimeOfCreation)
        </dt>
        <dd>
            @Html.DisplayFor(model => model.TimeOfCreation)
        </dd>
    </dl>
</div>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="modal-footer">
        <button class="btn" type="button" data-dismiss="modal">No</button>
        <input class="btn btn-danger" type="submit" value="Yes" />
    </div>
}

Answer 1

<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                                         aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        @using (Html.BeginForm())
        {
        <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <dl class="dl-horizontal">
                    <dt>
                        @Html.DisplayNameFor(model => model.Name)
                    </dt>

                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                                                                Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        }
    </div>
</div>

<a href="#" id="edit">Edit</a>

您可以在编辑链接点击事件中调用模态对话框。

$(function () {
     $("#edit").click(function (e) {
            e.preventDefault();
            $('#myModal').modal('show');

     });    
});

如何将删除局部视图包装到ajax模式弹出窗口中

1 个答案: