why Property binding not affect on bootstrap model although it have value on page model?

Question

I work on razor asp.net . I face issue I can't get value of blackprintername on bootstrap model

although I get the values of this property on page model but on razor html not display on input text box Black server Ip or black printer name .

I execute method type function OnGetCheckColors to get black server IP and black printer name but this not happen so why this happen and how to solve this issue

code details

$('#editbootstarp tbody').on('click', 'tr', function () {
                // Get the data from the clicked row
                var rowData = $(this).children('td').map(function () {
                    return $(this).text();
                }).get();

                // Set the values of the modal's input fields
             
                $('#editshelflabelModal #edit-id').val(rowData[0]);
              
                $('#editshelflabelModal #edit-Location').val(rowData[6]);
         
                // Show the modal
                $.ajax({
                    url: '?handler=CheckColors',
                    type: "GET",
                    data: { LocationName: rowData[6]},
                    success: function (result) {
                        $('#editshelflabelModal').modal('show');
                        console.log(result);
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
                $('#editshelflabelModal').modal('show');
            });

   public ActionResult OnGetCheckColors(string LocationName)
    {
    
                    List<SubPrinters> subPrintlist = _IAdcSupportService.GetAvailablePrintersLists(HttpContext.Session.GetString("BranchCodesSelected"), LocationName, "SUB");
                    if (subPrintlist != null && subPrintlist.Count > 0)
                    {
                        foreach (SubPrinters subPrint in subPrintlist)
                        {
                            if (subPrint.Category == "Red" && subPrint.IsActive)
                            {
                                Redprintername = subPrint.PrinterName;
                                Redserverip = subPrint.PrinterIP;
                          
                            }
                            
                            else if (subPrint.Category == "Black" && subPrint.IsActive)
                            {
                                Blackprintername = subPrint.PrinterName;
                                Blackserverip = subPrint.PrinterIP;

                            }
                        }
                    }
           
        return new JsonResult("success");
    }

<div class="modal fade" id="editshelflabelModal" tabindex="-1" role="dialog" aria-labelledby="userDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <h5 class="modal-title" style="text-align:center;">
               

            </h5>
            <div class="modal-header">
                <h5 class="modal-title" id="editshelflabelModaldata" style="margin-left:200px;">Hi,@TempData["UserID"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="edit-form" method="post" asp-page-handler="shiftDataUp">
            <div class="modal-body">
        
                    <input type="hidden" id="edit-id" name="ShiftId">
                    <div class="form-group">
                        <label for="edit-server">Server IP</label>
                        <input type="text" class="form-control" id="edit-ip" name="serverip">
                    </div>
                    <div class="form-group">
                        <label for="edit-printer">Printer Name</label>
                        <input type="text" class="form-control" id="edit-printername" name="printername">
                    </div>
                    <div class="form-group">
                        <label for="edit-locationsdata">Location Name</label>
                        <input type="text" class="form-control" id="edit-Location"  name="Location">
                    </div>
                    
              
          
                    <div class="row">
                        

                        
                  

                    
                    
                    <div id="Blackdiv">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <h6 class="heading text-darker ml-9" style="margin-top: 12%;">Black Printer</h6>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-control-label" for="txtBlackIP">IP Address</label>
                                    <input type="text" id="txtblackip-id" asp-for="Blackserverip" name="blackipdata">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="form-control-label" for="txtBlackName">Printer Shared Name</label>
                                    <input type="text"  id="txtBlackName" value="@Model.Blackprintername" class="form-control">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                

          

            </div>
               
           
            </form>
        </div>
        
    </div>
    
</div>

Image for debugging issue as below :

Answer 1

On the ajax call, the handler updated the model values on the server for the request, but did not send them back to the browser. The handler should return them in the json rather than the string “success”, and JavaScript code should update the html based on the json response.

Answer 2

Hi @Ahmed Abd El Aziz

Since Jquery Ajax perform an asynchronous HTTP (Ajax) request, generally it is used to refresh the partial view, instead of refreshing the entire web page, So, in your scenario, in the OnGetCheckColors method, you should return a Json result with the black server IP and black printer name, then in the Ajax Success function, use JQuery to find the elements and set the value.

You can refer to the following sample code:

In the OnGetCheckColors:

        public ActionResult OnGetCheckColors(string LocationName)
        {

            // ...///your code to get the server Ip and Printer name.

            return new JsonResult(new { Blackprintername = "ZebraBlack", BlackServerip="172.168.1.1" });
        }

In the AJax function:

                // Show the modal
                $.ajax({
                    url: '?handler=CheckColors',
                    type: "GET",
                    data: { LocationName: rowData[6] },
                    success: function (result) {
                        $('#editshelflabelModal').modal('show');
                        //find the elements and set the value.                     
                        $("#txtblackip-id").val(result.blackServerip);
                        $("#txtBlackName").val(result.blackprintername);
                        console.log(result);
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });

The result like this:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion