jquery 如何 AJAX 请求来填充复选框以在剃刀页面mvc上实现RelatedUserAccessPermission功能？

xxls0lw8 于 2023-05-17 发布在 jQuery

关注(0)|答案(1)|浏览(83)

我在.NET Core 7 MVC Razor页面工作。我面临的问题，我不能填写复选框ID StockTake和ShelfLabelPrint通过 AJAX 请求这个函数RelatedUserAccessPermission
下面的URL我在浏览器上运行它来访问函数RelatedUserAccessPermission

https://localhost:7160/AddUserAccess?handler=RelatedUserAccessPermission

 public JsonResult OnGetRelatedUserAccessPermission(int UserId)
        {

            var UserAccess = _db.UserAccess.ToList();
            return new JsonResult(UserAccess);

        }

函数OnGetRelatedUserAccessPermission返回的数据

ModuleCode AccessRight UserId
1           1           1220
2           1           1220

所以基于用户ID

if(modulecode=1 and accessright=1)
    
    then StockTake checkbox will be checked based on value =1
    
    if(modulecode=2 and accessright=1)
    
    then ShelfLabelPrint checkbox will be checked  based on value =2
    if(modulecode=3 and accessright=1)
    
    then Transfer checkbox will be checked based on value =3

在AddUserAccess.cshtml上

<button id="FillCheckBox" type="submit" class="col-sm-1 btn btn-primary">Submit</button>
        <div class="form-group row">
            <label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
            <div class="col-sm-3">
                <input id="useraccess-id" asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
            </div>
        </div>
        <input id="StockTake" type="checkbox" asp-for="UserAccess.MODULECODE" value="1">
        <label for="lblStockTake">Stock Take</label>

        <input id="ShelfLabelPrint" type="checkbox" asp-for="UserAccess.MODULECODE" value="2">
        <label for="lblShelfLabel">Shelf Label Print</label>

        <input id="Transfer" type="checkbox" asp-for="UserAccess.MODULECODE" value="3">
        <label for="lblTransfer" style="margin-right:5px;">Transfer</label>

更多细节我所期望的

我需要 AJAX 请求实现的确切逻辑

<script type="text/javascript">
            $(document).ready(function () {
                $('#FillCheckBox').click(function () { 
                    //How to Make Ajax Request Fill CheckBoxes
if(modulecode=1 and accessright=1)
    
    then StockTake checkbox will be checked
    
    if(modulecode=2 and accessright=1)
    
    then ShelfLabelPrint checkbox will be checked 
    if(modulecode=3 and accessright=1)
    
    then Transfer checkbox will be checked

                    
                
            });
            });
        </script>

更新答案

<form method="post">
<button id="FillCheckBox" type="submit" class="col-sm-1 btn btn-primary">Submit</button>
<div class="form-group row">
<label for="user-id" class="col-sm-1 col-form-label" style="font-size:15px;font-family: 'Open Sans', sans-serif;font-weight: bold;">User ID</label>
<div class="col-sm-3">
<input id="useraccess-id" asp-for="UserAccess.UserId" type="text" class="form-control" style=" margin-left:10px;font-size:15px;font-family: 'Open Sans' , sans-serif;font-weight: bold;" />
</div>
        </div>
        <input id="StockTake" type="checkbox" asp-for="UserAccess.MODULECODE" value="1">
        <label for="lblStockTake">Stock Take</label>
<input id="StockTake" type="hidden"  value="false" />
        <input id="ShelfLabelPrint" type="checkbox" asp-for="UserAccess.MODULECODE" value="2">
        <label for="lblShelfLabel">Shelf Label Print</label>

        <input id="Transfer" type="checkbox" asp-for="UserAccess.MODULECODE" value="3">
        <label for="lblTransfer" style="margin-right:5px;">Transfer</label>

        
       
        
    </form>

这是完整的代码，我的剃刀html形式
如果我离开method=post，那么它就不能工作，只能填充复选框
如果我删除方法=张贴它工作成功，并填写复选框 AJAX 工作，那么为什么会发生这种情况

jquery

来源：https://stackoverflow.com/questions/76218498/how-to-fill-checkboxes-by-ajax-request-to-function-relateduseraccesspermission-o

1条答案

按热度按时间

r6l8ljro1#

为了测试，我将复选框asp-for="UserAccess.MODULECODE"更改为asp-for="UserAccess.ck"，因为有ModuleCode属性。
我需要 AJAX 请求实现的确切逻辑
我有一个工作演示，大家可以参考一下，希望能有所帮助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#FillCheckBox').click(function () {
            var id = $("#useraccess-id").val();     
            alert(id);
            $.ajax({
                type: "Get",
                url: "/AddUserAccess?Handler=RelatedUserAccessPermission",
                data: { UserId: id },
                success: function (result) {
                    for (i = 0; i < result.length; i++) 
                    {         
                        if(result[i].moduleCode == 1 & result[i].accessRight == 1)
                        { $("#StockTake").prop("checked", true); };
                        if (result[i].moduleCode == 2 & result[i].accessRight == 1)
                        { $("#ShelfLabelPrint").prop("checked", true); };
                        if (result[i].moduleCode == 3 & result[i].accessRight == 1) 
                        { $("#Transfer").prop("checked", true); };                      
                    };
               },
                failure: function (response) {
                    console.log(response);
                }
            });
                });
                });
</script>

结果：x1c 0d1x

更新

如果我删除方法=张贴它工作成功，并填写复选框 AJAX 工作，那么为什么会发生这种情况
您将收到400（Bad Request）响应，因为框架期望RequestVerificationToken作为已发布请求的一部分。框架使用此响应来防止可能的CSRF攻击。如果你的请求没有这些信息，框架将返回400错误请求。要使后工作，请做一些更改如下：
1.更改post方法，如下所示：

public JsonResult OnPostRelatedUserAccessPermission(int UserId)
        {..}

2.在cshtml中添加

@Html.AntiForgeryToken()
<form method="post">
...

AJAX 请求应该将请求头中的防伪令牌发送到服务器。

beforeSend: function (xhr) {
     xhr.setRequestHeader("XSRF-TOKEN",
         $('input:hidden[name="__RequestVerificationToken"]').val());
 },

4.在Program.cs中，由于脚本在名为XSRF-TOKEN的头中发送令牌，因此配置防伪服务以查找XSRF-TOKEN头：

builder.Services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

5.因为使用表单提交，但 AJAX post userId，所以添加event.preventDefault();以避免使用null useId提交。完整代码如下：

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#FillCheckBox').click(function (event) {
                event.preventDefault();
                var id = $("#useraccess-id").val();
                alert(id);
                $.ajax({
                    type: "post",
                    url: "/AddUserAccess?Handler=RelatedUserAccessPermission",
                    data: { UserId: id },
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    success: function (result) {
                        for (i = 0; i < result.length; i++) {
                            if (result[i].moduleCode == 1 & result[i].accessRight == 1) { $("#StockTake").prop("checked", true); };
                            if (result[i].moduleCode == 2 & result[i].accessRight == 1) { $("#ShelfLabelPrint").prop("checked", true); };
                            if (result[i].moduleCode == 3 & result[i].accessRight == 1) { $("#Transfer").prop("checked", true); };
                        };
                    },
                    failure: function (response) {
                        console.log(response);
                    }
                });
            });
        });
    </script>
}

赞(0）回复(0）举报 2023-05-17

我来回答

jquery 如何 AJAX 请求来填充复选框以在剃刀页面mvc上实现RelatedUserAccessPermission功能？

1条答案

相关问题

热门标签

最新问答