具有多参数的MVC.NET Core Bootstrap-Modal表单不会到达Post控制器

时间:2017-05-30 21:44:21

标签: asp.net-core-mvc bootstrap-modal

我有一个使用模态表单的Web应用程序来确认我的用户(或管理员)可能允许执行的一些操作。模态表单设置来自Microsoft的IdentitySampleApplication项目,并且与我的项目结合使用的方式大致相同。我正在使用通用模态形式。我试图允许用户在应用程序上拥有多个用户角色(而他们的示例假定用户只有一个角色。)

我现在正在努力删除此类型多角色方案的角色以进行维护。我应该指出,只涉及一个id的所有代码实例都可以正常工作,这是一个带有2个ID的实例,它无法通过我在控制器上需要的任何一个ID。

删除用户角色需要用户的密钥和角色。 我的控制器有一些像下面这样的代码来接受id并呈现一个模态形式,它的效果非常好。

[HttpGet]
public IActionResult DeleteUserRole( string userid, string roleid ){...}

HttpPost部分看起来像这样

[HttpPost]
public IActionResult DeleteUserRole( string userid, string roleid, IFormCollection form ){...}

然而,第二个动作永远不会获得传递给模态形式get方法的id。

在所有只有一个路由ID的方法中,我没有问题。只有这一种方法让我烦恼。我从这个链接中调用它。注意两个asp路由变量,我怀疑这是我的问题的核心,但是get调用很好,这是没有值的帖子:

<a id="deleteRoleModal" asp-action="DeleteUserRole"
 asp-route-userid="@item.userId" asp-route-roleid="@item.roleId"
 data-toggle="modal" data-target="#modal-action-role" 
 class="btn btn-sm btn-danger">

在表单底部我有一个模态表单实现,它看起来像这样:

@await Html.Partial( "_Modal", new BootstrapModel { ID = "modal-action-role", AreaLabeledId = "modal-action-role-label", Size = ModalSize.Medium } )

我的模态形式看起来很像IdentitySampleProject中使用的样本,并且在这里显示,它没有以任何有意义的方式改变,但单个参数回调可以正常工作:

@model string
@using MyModels

<form asp-action="DeleteUserRole" role="form">
    @Html.AntiForgeryToken()
    @await Html.Partial( "_ModalHeader", new ModalHeader { Heading = "Delete User Role" } )

    <div class="modal-body form-horizontal">
        Are you sure you want to delete user role @Model?
    </div>
    @await Html.Partial( "_ModalFooter", new ModalFooter { SubmitButtonText = "Delete" } )
</form>

我正在寻找解决问题的方向。我希望确实双路径ID是我的问题,但我似乎无法找到其他人在样本中做这样的事情。

生成的管理页面看起来大概如下:

<!DOCTYPE html>
<html>
<head>
    <title>my company</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/lib/bootswatch/spacelab/bootstrap.min.css" />
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
    <link rel="stylesheet" href="/css/navTabs.css" />
    <link rel="stylesheet" href="/css/partner.css" />
</head>

<body>

    <div id="header">
        <div class="slideContainer">
            <div class="slide"><img src="/image/Firm-small2.jpg" alt="Offices" class="headerImage" /></div>
            <div class="slide"><img src="/image/InLibrary225.jpg" alt="Library" class="headerImage"></div>
            <div class="slide"><img src="/image/DSC_9999editSM.JPG" alt="Offices" class="headerImage" /></div>
            <div class="slide"><img src="/image/DSC_9925edit2SM.JPG" alt="Computer Room" class="headerImage" /></div>
        </div>

        <nav class="navbar navbar-inverse">
                <ul class="nav navbar-nav navbar-right ">
                    <li class="navtext">
                        <label>-- &nbsp;&nbsp;&nbsp;Welcome: Webmaster &nbsp;&nbsp;&nbsp;</label>
                    </li>
                </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="navtext">
                    <label>Your Proven Partner in Cartoon Drawing</label>
                </li>
            </ul>

        </nav>

    </div>

    <div id="sidebar">
        <div><img src="/image/headerLogo.gif" alt="my company Logo" class="logoImage" /></div>

        <nav id="menu">
            <ul class="nav navbar-inverse">
                <li><a href="/">Home</a></li>
                <li>
                    <div id="menuGroupItem">
                        <a href="/Partners">Partners</a>
                        <a data-toggle="collapse" data-target="#partnerMenu"><i class="fa fa-chevron-down"></i></a>

                    </div>
                    <ul id="partnerMenu" class="nav collapse" role="menu" aria-labelledby="partnerMenu">
                        <li><a href="/Partners/PartnerBio/Eddy%20A%20Fish"><i class="fa fa-caret-right"></i> Eddy A Fish</a></li>
                        <li><a href="/Partners/PartnerBio/Tom%20A%20Hawk%20III"><i class="fa fa-caret-right"></i> Tom A Hawk</a></li>
                    </ul>
                </li>
                <li><a href="/App/OurServices">Services</a></li>
                <li><a href="/Events/News">News</a></li>
                <li><a href="/Events/Events">Events</a></li>
                <li><a href="/Events/Pubs">Publications</a></li>
                <li><a href="/App/FirmHistory">Firm History</a></li>
                <li><a href="/App/Contact">Contact</a></li>
                    <li class="divider"></li>
                    <li><a href="/Auth">Manage Website</a></li>
                    <li><a href="/Auth/Logout">Logout</a></li>
            </ul>
        </nav>
        <div class="affiliation">
            <table>
                <tr>
                    <td>
                        <img src="/image/WBE_color_rgb_UP25.jpg" alt="" class="affiliationImage" />
                    </td>
                </tr>
            </table>
        </div>

        <div>
            <ul class="rightAlign">
                <li>&nbsp;</li>
                <li>my company</li>
                <li>16 main street</li>
                <li>anytown, pa 00000</li>
                <li>&nbsp;</li>
                <li>610.111.1111</li>

            </ul>
        </div>

    </div>

    <div id="wrapper">
        <div id="main" class="container-fluid">

<div class="row">
    <div class="col-md-8 col-md-offset-2">
<form action="/Users/UserRole/a2c77901-4a74-49aa-9354-1fadc943c8c4" method="post"><input id="UserId" name="UserId" type="hidden" value="a2c77901-4a74-49aa-9354-1fadc943c8c4" /><input id="UserName" name="UserName" type="hidden" value="BioEditor" />            <h3>Add roles for user: <span class="text-success">BioEditor</span></h3>
            <div>
                <div class="form-group">
                    <table class="table table-responsive">
                        <thead>
                            <th>Role</th>
                            <th>Action</th>
                        </thead>
                        <tbody>
                                <tr>
                                    <td><i class="fa fa-check text-success"> </i>BioEditor</td>
                                    <td>
                                        <a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&amp;roleid=8b12b24d-5836-46eb-a7aa-0be1818a67f5">
                                            <i class="fa fa-trash"></i> Delete
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-check text-success"> </i>PowerEditor</td>
                                    <td>
                                        <a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&amp;roleid=c4f3bdf8-b880-423c-8de3-1e51329da104">
                                            <i class="fa fa-trash"></i> Delete
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><i class="fa fa-check text-success"> </i>Administrator</td>
                                    <td>
                                        <a id="deleteRoleModal" data-toggle="modal" data-target="#modal-action-role" class="btn btn-sm btn-danger" href="/Users/DeleteUserRole?userid=a2c77901-4a74-49aa-9354-1fadc943c8c4&amp;roleid=f1aafc1e-0527-4542-8f0e-fb1afeccac46">
                                            <i class="fa fa-trash"></i> Delete
                                        </a>
                                    </td>
                                </tr>
                        </tbody>

                    </table>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <select class="input-group form-control" data-val="true" data-val-required="The ApplicationRoleId field is required." id="ApplicationRoleId" name="ApplicationRoleId">
                            <option>Please select</option>
                        <option value="8b12b24d-5836-46eb-a7aa-0be1818a67f5">BioEditor</option>
<option value="c4f3bdf8-b880-423c-8de3-1e51329da104">PowerEditor</option>
<option value="f1aafc1e-0527-4542-8f0e-fb1afeccac46">Administrator</option>
<option value="fe77274d-4b16-46a6-8177-a84faf198c9b">EventEditor</option>
</select>

                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-user"> </i> Add Selected Role </button>
                        </span>
                        <span class="field-validation-valid" data-valmsg-for="ApplicationRoleId" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8KeASaIZMdBDjnZy_1CdaouczJ-zwxPaQp-N5OQ5bGWfYzVfpDz7_iC0VlJb_cRDkqucT-8ENFhsNPe9Rng1Mqrm9VQbYQoSQwerxj953ql4v7dABrW6pioEySOJN7qFXaalGYePyjHoB0QiKxfuvkvh938tJG4gVnh5D1JvLyNBBKlR4d25PcoJOJZTdN_Bxg" /></form>    </div>
</div>


<div aria-hidden="true" aria-labelledby="modal-action-role-label" role="dialog" tabindex="-1" id="modal-action-role" class="modal fade">
    <div class="modal-dialog ">
        <div class="modal-content">
        </div>
    </div>
</div>


        </div>
    </div>



    <div id="footer" class="container-fluid">
        <div class="navbar navbar-fixed-bottom navbar-inverse ">
            <ul>
                <li class="navbar-link">&copy; my company</li>
                <li class="navbar-link text-muted"><a id="disclaimerLink" href="#">Disclaimer</a></li>
            </ul>
        </div>
    </div>


    <script type="text/javascript" src="/lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>


    <script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

    <script type="text/javascript" src="/js/site.js"></script>

</body>

</html>

感谢您提供的任何指示,肯特

1 个答案:

答案 0 :(得分:1)

这正是寻找问题的正确方向,感谢艾哈迈尔。由于传递给控制器​​的2个ID导致数据被包装在查询字符串中而不是真实的路径{controller} {action} {id}。

模态不会将查询字符串传递给最终版本,因此我更改了模型并将模式形式的值包装起来以进行最终删除,这一切都有效。感谢您提出正确的问题以获得答案。