How to call function RelatedUserAccessPermission to fill check boxes based on id returned ?

Ahmed Salah Abed Elaziz 390 Reputation points
2023-05-10T12:51:38.4933333+00:00

I work on .NET core 7 MVC razor page . I face issue I can't fill check boxes Id StockTake and ShelfLabelPrint by using ajax request to this function RelatedUserAccessPermission

URL below I run it on browser to access function RelatedUserAccessPermission

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

 public JsonResult OnGetRelatedUserAccessPermission(int UserId)
        {

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

        }

so I need to call function OnGetRelatedUserAccessPermission from page model using ajax request .

so I need to make ajax request for that URL ?handler=RelatedUserAccessPermission

Access Rights 1 meaning it check true

Module Code 1,2 values of Id StockTake represent id 1 and ShelfLabelPrint represent id 2 based on UserId 1220

on 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>

How to make ajax request Fill 2 check boxes when button submit click

 <script type="text/javascript">
        $(document).ready(function () {
            $('#FillCheckBox').click(function () { 
                //How to Make Ajax Request Fill CheckBoxes
                
            
        });
        });
    </script>

for more details what I expect

FillCheckBoxesBasedOnButtonClick

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,308 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,385 questions
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,056 Reputation points Microsoft Vendor
    2023-05-11T07:20:30.1533333+00:00

    Hi @Ahmed Salah Abed Elaziz

    it make strange action not checked  meaning some behaviour affect on check box  so it checked but quickly after less than second it not checked why <button id="FillCheckBox" type="submit" class="col-sm-1 btn btn-primary">Submit</button>

    The issue might relate the submit button, since the type is submit, by default after clicking the submit type button, it will directly submit the form. But from your code, you might just want to call the handle method and change the checkbox status, so there is no need to submit the form.

    To solve this issue, try to change the button type from submit to button.

    <button id="FillCheckBox" type="button" class="col-sm-1 btn btn-primary">Submit</button>
    

    Or you can disable the submit button default behavior in its button click event:

       $('#FillCheckBox').click(function () { 
           event.preventDefault();
    
           $.ajax({
              url: '/AddUserAccess?handler=RelatedUserAccessPermission',
              data: { UserId: $('#useraccess-id').val() }
           }).done(function(r) {
              $('#StockTake,#ShelfLabelPrint,#Transfer').each(function() {
                  this.checked = r.findIndex(e => e.ModuleCode == this.value) >= 0;
              });
           }).fail(function(jqXHR, textStatus, errorThrown) {
              alert("ajax call failed");
           });
       });
    

    Note: If using the above methods, there should have two buttons in the page, one for the checkbox and another is used to submit the form. Or you can change the checkbox status after page load, instead of using the submit button click event.

    Best regards,
    Dillion

    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Bruce (SqlWork.com) 59,471 Reputation points
    2023-05-10T16:26:09.1466667+00:00

    its pretty simple:

    <script type="text/javascript">
    $(document).ready(function () {
       $('#FillCheckBox').click(function () { 
           $.ajax({
              url: '/AddUserAccess?handler=RelatedUserAccessPermission',
              data: { UserId: $('#useraccess-id').val() }
           }).done(function(r) {
              $('#StockTake,#ShelfLabelPrint,#Transfer').each(function() {
                  this.checked = r.findIndex(e => e.ModuleCode == this.value) >= 0;
              });
           }).fail(function(jqXHR, textStatus, errorThrown) {
              alert("ajax call failed");
           });
       });
    });
    </script>