Question

我有一个类别列表，我想使用弹出窗口进行注册和编辑，为此我使用bootbox.dialog，我创建了一个部分视图，其中包含注册/编辑的形式，我的问题是我无法在bootbox.dialog中加载partialview，首先我尝试了这种方式：

Categorias.cshtml

    function CadAltCategoria(cod) {

        var strTit = (cod == 0) ? 'Cadastro de categoria' : 'Edição de categoria';

        bootbox.dialog({
            message: '@Html.Raw( await Html.PartialAsync("CategoriaCadAlt"))',
            title: strTit,
            className: "modal-darkorange",
            buttons: {
                success: {
                    label: "Salvar",
                    className: "btn-blue",
                    callback: function () { alert('teste'); }
                },
                "Cancelar": {
                    className: "btn-danger",
                    callback: function () { }
                }
            }
        });

    }

它不加载部分视图，结果是：

而不是partialview的内容，消息“ Microsoft.AspNetCore.Mvc.ViewFeatures.Internal.ViewBuffer ”

我的部分视图如下：

CategoriaCadAlt.cshtml

<div id="popCadAltCateg" style="display:none;">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="To" required="">
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Subject" required="">
            </div>
            <div class="form-group">
                <textarea class="form-control" placeholder="Content" rows="5" required=""></textarea>
            </div>
        </div>
    </div>
</div>

我发现这篇文章“Bootbox ASP MVC Razor partial view?”谈到了这个问题，但没有解决问题，结果是：

我怎么能这样做，我不想导航到另一个页面来注册/编辑记录，谢谢！

Answer 1

如果删除Html.Raw，您将获得PartialAsync方法生成的HTML标记，但由于生成的HTML是多行的，因此会抛出脚本错误。

var msg ='await Html.PartialAsync("CategoriaCadAlt")'
//use msg for message 
// Oh no! This give script error :(

您可以使用temporal literal字符串（ES6）来处理此多行情况

var msg = `@await Html.PartialAsync("CategoriaCadAlt"))`;
// use msg  for message

另一种选择是，您应该考虑在视图中执行部分视图调用，这将产生HTML标记并将其用作引导框消息。

这样做的一种方法是，在你的剃刀视图中执行局部视图调用并将其保存在容器div（隐藏）和click事件处理程序中，读取该容器元素并获取其内部html（这是从局部视图生成的HTML）

<div id="my-partial" style="display: none;">
    @await Html.PartialAsync("CategoriaCadAlt")
</div>

并在脚本中

$(document).on("click", ".alert", function (e) {
    var msg = $("#my-partial").html();
    bootbox.dialog({
        message: msg,
        title: 'dd',
        className: "modal-darkorange",
        buttons: {
            success: {
                label: "Salvar",
                className: "btn-blue",
                callback: function () { alert('teste'); }
            },
            "Cancelar": {
                className: "btn-danger",
                callback: function () { }
            }
        }
    });
});

使用这种方法，部分视图代码总是在原始页面呈现时执行。

另一种选择是对服务器进行ajax调用，并获取HTML标记作为操作方法的结果并使用它。您需要公开一个返回部分视图的操作方法。

Answer 2

你可以这样做：

控制器中的

：

    [HttpGet]
    public PartialViewResult ReturnPartialView()
    {
        return PartialView("youPartialView");
    }

JavaScript的：

    function CadAltCategoria(cod) {

        var url = '@Url.Action("ReturnPartialView", "YouController")';
        var strTit = (cod == 0) ? 'Cadastro de categoria' : 'Edição de categoria';

        $.get(url, function (data) {
            bootbox.dialog({
                message: data,
                title: strTit,
                className: "modal-darkorange",
                buttons: {
                    success: {
                        label: "Salvar",
                        className: "btn-blue",
                        callback: function () { alert('teste'); }
                    },
                    "Cancelar": {
                        className: "btn-danger",
                        callback: function () { }
                    }
                }
            });
        });

    }

这样您就可以传递ID进行编辑。

使用bootbox.dialog加载partialview或viewcomponent

2 个答案: