在 ASP.net MVC 中使用带有 PartialViewResult 的引导模式动态加载操作答案

【问题标题】：use bootstrap modal dynamic load Action with PartialViewResult in ASP.net MVC在 ASP.net MVC 中使用带有 PartialViewResult 的引导模式动态加载操作
【发布时间】：2016-04-08 08:10:37
【问题描述】：

我有一个引导模式

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

这是部分视图

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

当点击按钮时，我希望部分视图可以显示在 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】：

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

$('#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。

【讨论】：