第2章 Razor通过OpenWindow打开局部弹出页面

1 Area From表单提交[HttpPost]方法不执行

异常:

在Area中通过From表单执行提交时相应的[HttpPost]方法并不执行。

说明:

    在Area中使用Razor的From表单提交[HttpPost]方法,必须依赖于引用:“@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers”,而该引用定义在_ViewImports.cshtml文件中所以必须先复制_ViewImports.cshtml文件

解决方案:

    复制文件_ViewImports.cshtml到Web\Areas\Admin\Views\_ViewImports.cshtml

2 Razor通过OpenWindow打开局部弹出页面

2.1 Web\Areas\Admin\Views\Role\Index.cshtml

@model IEnumerable<Core.Domain.Customers.Role>

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>角色列表</title>

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

    <link rel="stylesheet" href="~/lib_npm/font-awesome/css/all.min.css" />

</head>

<body>

    @*btnId:用于单独控制对弹出框的关闭和角色列表的刷新渲染。formId:如果重置按钮定义在查询表单中时,用于组合控制对弹出框的关闭和角色列表的刷新渲。*@

    <button type="button" id="add" onclick="OpenWindow('@(Url.Action("Create", "Role",  new {btnId = "resetRoleList"@*, formId = "JqueryDataTableForm" *@}))', 500, 500, true); return false;" class="btn btn-success float-end">

        <i class="fas fa-plus"></i>

        添加

    </button>

    @*resetRoleList:用于控制对弹出框的关闭和角色列表的刷新渲染*@

    <button type="button" id="resetRoleList" class="btn btn-secondary me-3">

        <i class="fa-solid fa-rotate-right"></i>

        重置

    </button>

<table class="table">

    <thead>

        <tr>

            <th>

                @Html.DisplayNameFor(model => model.Id)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Name)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Active)

            </th>

            <th>

                @Html.DisplayNameFor(model => model.Remark)

            </th>

            <th>

                   

            </th>

        </tr>

    </thead>

    <tbody>

@foreach (var item in Model) {

        <tr>

            <td>

                @Html.DisplayFor(modelItem => item.Id)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Name)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Active)

            </td>

            <td>

                @Html.DisplayFor(modelItem => item.Remark)

            </td>

            <td>

                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |

                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |

                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })

            </td>

        </tr>

}

    </tbody>

</table>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>

    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

    <script src="~/js/site.js" asp-append-version="true"></script>

    <script src="~/js/admin.common.js" asp-append-version="true"></script>

</body>

</html>

2.2 Web\Areas\Admin\Views\Role\Create.cshtml

@model Core.Domain.Customers.Role

@if (ViewBag.RefreshPage == true)

{

    <script type="text/javascript">

       //如果重置按钮定义在查询表单中时,通过下1行语句实现对弹出框的关闭。

       //window.opener.document.forms['@(Context.Request.Query["formId"])'].@(Context.Request.Query["btnId"]).click();

        //如果重置按钮单独定义时,通过下1行语句实现对弹出框的关闭。

        window.opener.document.getElementById("@Context.Request.Query["btnId"]").click();

        window.close();

    </script>

}

<div class="row">

    <div class="col-md-4">

        @* asp-route-formId="@Context.Request.Query["formId"]"*@

        <form asp-action="Create"

              asp-route-btnId="@Context.Request.Query["btnId"]"

            >

            <div class="form-group">

                <label asp-for="Name" class="control-label"></label>

                <input asp-for="Name" class="form-control" />

            </div>

            <div class="form-group">

                <label asp-for="Remark" class="control-label"></label>

                <input asp-for="Remark" class="form-control" />

            </div>

            <div class="form-group mt-5">

                <input type="submit" value="提交" class="btn btn-primary float-md-start" />

            </div>

        </form>

    </div>

</div>

    对以上功能更为具体实现和注释见:230505_002ShopRazor(Razor通过OpenWindow打开局部弹出页面)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值