首页 文章

在ASP.net MVC中使用bootstrap模态动态加载Action与PartialViewResult

提问于
浏览 次
0

我有一个bootstrap模式

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <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">
                <div class="ajax-dynamic-get-data-form"/>
            </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>

我想ajax-dynamic-get-data-form可以动态加载我的partialviewresult这就是动作

public PartialViewResult GetData()
        {
            Person p = new Person() { Name = "jack", Addr = "Home" };
            return PartialView(p);
        }

这是PartialView

@model ModalDemo.Controllers.Person

@Ajax.BeginForm("Create", new AjaxOptions { OnSuccess = "success" })
{
<div class="form-group">
    <label>Person Name</label>
    @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
</div>

<div class="form-group">
    <label>Person Address</label>
    @Html.TextBoxFor(x => x.Addr, new { @class = "form-control" })
</div>

<button type="submit" class="btn btn-default">Submit</button>
}


<script type="text/javascript">
    function success() {
        alert("1");
    }
</script>

当点击按钮时，我希望partialview可以在myModal中显示，这是我的事件：

<script type="text/javascript">

    $('#myModal').on('show.bs.modal', function (event) {

        var url=@Url.Action("GetData");

        $.ajax({
            type: "GET",
            url: url,
            data: JSON,
            cache: false,
            success: function (data) {
                console.log(data);
                //here is the question:
                //i hope load the action partial view with "ajax-dynamic-get-data-form"
                //i don't know how to write the js code here that i can load the form.
                //please give some point ,thanks!!!
            },
            error: function (err) {
                console.log(err);
            }
        });
    })
</script>
jquery asp.net-mvc

1 回答

  • 2

    在回调中，沿着以下行添加内容：

    $('#myModal').on('show.bs.modal', function (event) {

    var url='@Url.Action("GetData")';

    $.ajax({
        type: "GET",
        url: url,
        data: JSON,
        cache: false,
        success: function (data) {

            // inject your content into the "placeholder" div
            $('#myModal').find('.ajax-dynamic-get-data-form').html(data);
        },
        error: function (err) {
            console.log(err);
        }
    });
})

    您可以通过使用 $.post 来简化此操作，因为POST操作不会被缓存：

    $('#myModal').on('show.bs.modal', function (event) {

    var url='@Url.Action("GetData")';

    $.post(url)
        .done(function (data, status, jqxhr) {
            // inject your content into the "placeholder" div
            $('#myModal').find('.ajax-dynamic-get-data-form').html(data);
        })
        .fail(function (jqxhr, status, errorThrown) {
            console.log(errorThrown);
        });
})

    你也应该使用 done 和 fail ，因为 success 和 error 被弃用（如noted in the API documentation .

    回复于

相关问题