Vfrdtyky

I am realy struggling with this and would apprecate any advice.

I have this field

<input id="scanInput" type="text" placeholder="SCAN" class="form-control" />

For which I would like to make an ajax call when the field changes, so I tried

<script>

$("#scanInput").change(function () {

    console.log('ye');



    $.getJSON("?handler=GetPartDetails", function (data) {

        //Do something with the data.

        console.log('yay?');

     }).fail(function (jqxhr, textStatus, error) {

        var err = textStatus + ", " + error;

        console.log("Request Failed: " + err);

        });

});

</script>

Where my PageModel has this method

[HttpPost]

public IActionResult GetPartDetails()

{

    return new JsonResult("hello");

}

and the url for the page in question is /packing/package/{id}

Now when I change the input value, I see ye on the console, and I can see that the network called http://localhost:7601/Packing/Package/40?handler=GetPartDetails (the correct URL I think?) with status code 200

But My breakpoint in GetPartDetails never hits, and I don't see yay? in the console.

I also see this message from the fail handler:

Request Failed: parsererror, SyntaxError: JSON.parse: unexpected character at line 3 column 1 of the JSON data

But I'm not even passing any JSON data... why must it do this
I also tried this way :

$.ajax({

    type: "POST",

    url: "?handler=GetPartDetails",

    contentType : "application/json",

    dataType: "json"

})

but I get

XML Parsing Error: no element found
Location: http://localhost:7601/Packing/Package/40?handler=GetPartDetails
Line Number 1, Column 1:

I also tried

$.ajax({

    url: '/?handler=Filter',

    data: {

        data: "input"

    },

    error: function (ts) { alert(ts.responseText) }

})

    .done(function (result) {

        console.log('done')

    }).fail(function (data) {

        console.log('fail')

    });

with Action

    public JsonResult OnGetFilter(string data)

    {

        return new JsonResult("result");

    }

but here I see the result text in the console but my breakpoint never hits the action and there are no network errors..............
What am I doing wrong?

Excuse me for posting this answer, I'd rather do this in the comment section, but I don't have the privilege yet.

Shouldn't your PageModel look like this ?

[HttpPost]

public IActionResult GetPartDetails() {

  return new JsonResult {

    Text = "text", Value = "value"

  };

}

Somehow I found a setup that works but I have no idea why..

PageModel

    [HttpGet]

    public IActionResult OnGetPart(string input)

    {

        var bellNumber = input.Split('_')[1];

        var partDetail = _context.Parts.FirstOrDefault(p => p.BellNumber == bellNumber);



        return new JsonResult(partDetail);

    }

Razor Page

$.ajax({

    type: 'GET',

    url: "/Packing/Package/" + @Model.Package.Id,

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    data: {

        input: barcode,

        handler: 'Part'

    },



    success: function (datas) {

        console.log('success');

        $('#partDescription').html(datas.description);

    }

});

For this issue, it is related with the Razor page handler. For default handler routing.

Handler methods for HTTP verbs ("unnamed" handler methods) follow a
convention: On[Async] (appending Async is optional but
recommended for async methods).

For your original post, to make it work with steps below:

• Change GetPartDetails to OnGetPartDetails which handler is PartDetails and http verb is Get.


• Remove [HttpPost] which already define the Get verb by OnGet.


• 
  

  Client Request

  
  
  

   @section Scripts{ 
  
  <script type="text/javascript">
  
      $(document).ready(function(){
  
          $("#scanInput").change(function () {
  
              console.log('ye');
  
  
  
              $.getJSON("?handler=PartDetails", function (data) {
  
                  //Do something with the data.
  
                  console.log('yay?');
  
              }).fail(function (jqxhr, textStatus, error) {
  
                  var err = textStatus + ", " + error;
  
                  console.log("Request Failed: " + err);
  
              });
  
          });
  
      });
  
  </script>
  
  }
  
  

  
  

You also could custom above rule by follow the above link to replace the default page app model provider