如何在模态div中调用局部视图,并向其传递对象参数?

时间:2018-08-19 20:55:48

标签: asp.net asp.net-mvc bootstrap-modal partial-views

我有一个有关要打开的模式(引导程序)的问题。我想包含部分视图。 (我想在几分钟内发布代码)。

这是目标: 1-我有一个Index.cshtml页面,其中的链接调用了javascript

<div class="profile-userbuttons">

@Html.ActionLink("Modifier", "Edit", "Profil", null, new { @class = "modal-link btn btn-success"@*, id = Model.userLog*@ })

</div>

(请注意,我已经在匿名类型中注释了第二个(id)参数)。 (此参数应该是userLog类型的对象。)

然后单击此链接将调用JavaScript脚本:

<!-- Calling Modals -->
<script type="text/javascript">
    $(function () {
        // Initialize numeric spinner input boxes
        //$(".numeric-spinner").spinedit();
        // Initialize modal dialog
        // attach modal-container bootstrap attributes to links with .modal-link class.
        // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.

        alert(1);
        $('body').on('click', '.modal-link', function (e) {
            e.preventDefault();
            alert(2);
            $(this).attr('data-target', '#modal-container');
            $(this).attr('data-toggle', 'modal');
            alert(3);
        });
        // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
        $('body').on('click', '.modal-close-btn', function () {
            $('#modal-container').modal('hide');
        });
        //clear modal cache, so that new content can be loaded
        $('#modal-container').on('hidden.bs.modal', function () {
            $(this).removeData('bs.modal');
        });
        $('#CancelModal').on('click', function () {
            return false;
        });
    });
</script>

当然,模式div存在于Index.cshtml中:

<!-- Modal -->
    <div id="modal-container" class="modal fade"
         tabindex="-1" role="dialog">
        <div class="modal-content">
        </div>
    </div>

请注意,模态为空。我的脚本负责填充它。

但是让我们回到我的ActionLink。 “操作”链接定位到我的控制器“配置文件”中的一个“操作”:“编辑”

这里是:

 public ActionResult Edit(/*userslog id*/)
        {
            return PartialView("Edit"/*,id*/);
        }

(我已经注释了该参数,以测试它是否是“参数传递”问题)。

阅读时,您会看到它应该返回一个名为“编辑”的局部视图。

在这里:

@model WebSiteModels.Models.userslog

@{
    ViewBag.Title = "Edit";
}
<div class="modal-body">
    <div class="alert alert-warning">
        <h2>Edit</h2>

        <h3>YO !</h3>

        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">
                <h4>userslog</h4>
                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                @Html.HiddenFor(model => model.id)

                <div class="form-group">
                    @Html.LabelFor(model => model.photo, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.photo, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.photo, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.age, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.age, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.age, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.nom, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.nom, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.nom, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.prenom, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.prenom, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.prenom, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.sex, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.sex, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.sex, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.telephone, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.telephone, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.telephone, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.adresse, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.adresse, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.adresse, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.lattitude, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.lattitude, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.lattitude, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.longitude, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.longitude, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.longitude, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.idpersonne, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.idpersonne, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.idpersonne, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.idcontact, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.idcontact, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.idcontact, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DateCreation, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DateCreation, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.DateCreation, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DateModification, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.DateModification, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.DateModification, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Save" class="btn btn-default" />
                    </div>
                </div>
            </div>
        }

        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>

        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" id="approve-btn"
                        class="btn btn-danger">
                    Save
                </button>
            </div>
        </div>

    </div>
    </div>


<script type="text/javascript">
    $(function () {
        $('#approve-btn').click(function () {
            $('#modal-container').modal('hide');
        });
    });
</script>

当我对其进行测试时,这是我获得的捕获屏幕:

Capture screen result : modal seems to be called, but in the browser console, is empty

这是我的问题。尽管已打开模态,但未调用我的局部视图。而且,当我在浏览器中打开它时:一切看起来都很不错。 我想念什么?

1 个答案:

答案 0 :(得分:0)

您是否尝试过使用JQuery填充类似以下内容的模式内容(请参见NEW LINE):

    $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        alert(2);
        **//// NEW LINE
        $(".modal-content").load("/Profil/Edit");
        ////**
        alert(3);
    });

并将Html.ActionLink转换为具有相同属性的简单<a class='modal-link' data-target='#modal-container' data-toggle='modal'></a>标签。