javascript - 单击按钮时的 ASP.NET Core 渲染部分

Question

我想在单击按钮时在模式中显示一个表单，以便用户可以填充数据并使用 ajax 等将其发布到 Controller 。现在的问题是模态内容仅显示在当前页面上，所以我想知道如何仅在单击按钮时获取内容？

这是整个页面

@page
@model NoPaper.Areas.Robotics.Pages.Account.Producao.IndexModel
@{
    ViewData["Title"] = "Produção";
}

@section Styles{

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/izimodal/css/iziModal.css" />
    </environment>
    <environment include="Development">
        <link rel="stylesheet" href="~/lib/izimodal/css/iziModal.min.css" />
    </environment>
}

<card title="Produção" icon="fas fa-boxes" url="@Url.Page("../Index")">

    <nav class="mb-3">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <i class="fa fa-list text-secondary"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" asp-page="Create">
                    <i class="fa fa-plus text-secondary"></i>
                </a>
            </li>
        </ul>
    </nav>

    <diV class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.ProducaoRegistos[0].DataCriacao)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.ProducaoRegistos[0].Turno.Nome)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.ProducaoRegistos[0].Celula.Nome)
                    </th>
                    <th>
                        Total Peças Produzidas OK
                    </th>
                    <th>
                        Total Peças Produzidas NOK
                    </th>
                    <th>
                        Total Tempos de Paragem (min)
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.ProducaoRegistos)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(model => item.DataCriacao)
                        </td>
                        <td>
                            @{
                                string cor = "";
                                switch (item.Turno.Nome)
                                {
                                    case "Amarelo":
                                        cor = "text-warning";
                                        break;
                                    case "Verde":
                                        cor = "text-success";
                                        break;
                                    case "Azul":
                                        cor = "text-primary";
                                        break;
                                }
                            }
                            <i class="fas fa-clock @cor"></i>
                            @Html.DisplayFor(model => item.Turno.Nome)
                        </td>
                        <td>
                            @Html.DisplayFor(model => item.Celula.Nome)
                        </td>
                        <td>
                            0 <button class="btn btn-sm btn-outline-success ml-2 add-pecas-boas-modal-trigger"><i class="fa fa-plus"></i></button>
                        </td>
                        <td>
                            0 <button class="btn btn-sm btn-outline-danger ml-2"><i class="fa fa-plus"></i></button>
                        </td>
                        <td>
                            0 <button class="btn btn-sm btn-outline-warning ml-2"><i class="fa fa-plus"></i></button>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </diV>

</card>

<!-- Modal structure -->
<div id="modal">

    <partial name="_AddPecasBoasPartial" model="new Areas.Robotics.Models.PecaBoaRegisto()" />

</div>

@section Scripts{

    <environment include="Development">
        <script hrsrcef="~/lib/izimodal/js/iziModal.js"></script>
    </environment>
    <environment include="Development">
        <script src="~/lib/izimodal/js/iziModal.min.js"></script>
    </environment>

    <script>
        $(document).on('click', '.add-pecas-boas-modal-trigger', function (event) {

            $("#modal").iziModal({
                title: 'Adicionar Peças Boas',
                headerColor: '#88A0B9',
                background: null,
                theme: '',  // light
                icon: 'fas fa-plus',
                iconText: null,
                iconColor: '',
                rtl: false,
                width: '60%',
                top: null,
                bottom: null,
                borderBottom: true,
                padding: 30,
                radius: 3,
                zindex: 999,
                iframe: false,
                iframeHeight: 400,
                iframeURL: null,
                focusInput: true,
                group: '',
                loop: false,
                arrowKeys: true,
                navigateCaption: true,
                navigateArrows: true, // Boolean, 'closeToModal', 'closeScreenEdge'
                history: false,
                restoreDefaultContent: true,
                autoOpen: 0, // Boolean, Number
                bodyOverflow: false,
                fullscreen: true,
                openFullscreen: false,
                closeOnEscape: true,
                closeButton: true,
                appendTo: 'body', // or false
                appendToOverlay: 'body', // or false
                overlay: true,
                overlayClose: true,
                overlayColor: 'rgba(0, 0, 0, 0.4)',
                timeout: false,
                timeoutProgressbar: false,
                pauseOnHover: false,
                timeoutProgressbarColor: 'rgba(255,255,255,0.5)',
                transitionIn: 'comingIn',
                transitionOut: 'comingOut',
                transitionInOverlay: 'fadeIn',
                transitionOutOverlay: 'fadeOut',
                onFullscreen: function () { },
                onResize: function () { },
                onOpening: function (modal) {

                    modal.startLoading();

                    $.get('/Robotics/Referencias/GetAll', function (data) {

                        //$("#modal .iziModal-content").html(data);

                        var $select = $("#pecasBoas");
                        $.each(data, function () {
                            $select.append($("<option />").val(this.id).text(this.nome));
                        })
                        modal.stopLoading();
                    });

                },
                onOpened: function () { },
                onClosing: function () { },
                onClosed: function () {
                },
                afterRender: function () { }
            });

            $('#modal').iziModal('open');
        })

    </script>

}

内部部分

@model Areas.Robotics.Models.PecaBoaRegisto


    <form method="post">
        <div class="form-row">
            <div class="form-group col-6">
                <select asp-for="ReferenciaId" class="custom-select">
                    <option value=""></option>
                </select>
            </div>
            <div class="form-group col-6">
                <input type="number" asp-for="Quantidade" />
            </div>
        </div>
    </form>

Answer 1

如果不想在页面中显示部分 View ，最简单的方法就是添加 display:none直接到div。

<div id="modal" style="display:none">
    <partial name="_AddPecasBoasPartial" model="Model.Car" />
</div>

或者您可以删除上面的 <partial>在页面中并将部分 View 返回到模型打开时的 div。请参阅 How to return a PartialView from Core 2 RazorPage ViewModel Handler

1.在PageModel中添加一个处理程序以返回部分 View :

public class IziModalModel : PageModel
{

    public void OnGet()
    {

    }

    public ActionResult OnGetPartialView()
    {

       return PartialView("_AddPecasBoasPartial", new PecaBoaRegisto());

    }

    [NonAction]
    public virtual PartialViewResult PartialView(string viewName, object model)
    {

        var myViewData = new ViewDataDictionary(new Microsoft.AspNetCore.Mvc.ModelBinding.EmptyModelMetadataProvider(), new Microsoft.AspNetCore.Mvc.ModelBinding.ModelStateDictionary()) { };
        myViewData.Model = model;

        return new PartialViewResult()
        {
            ViewName = viewName,
            ViewData = myViewData,

        };
    }
}

2.您的页面:

<div id="modal">
 @*remove the <partial> code*@
</div>

3.Js代码(调用自己的GET处理程序)

onOpening: function (modal) {

    modal.startLoading();

    $.get('/IziModal?handler=PartialView', function (result) {

        $("#modal .iziModal-content").html(result);
        $.get('/Robotics/Referencias/GetAll', function (data) {

                    var $select = $("#pecasBoas");
                    $.each(data, function () {
                        $select.append($("<option />").val(this.id).text(this.nome));
                    })
                    modal.stopLoading();
                });           
    });
},