title: ASP.Net Razor Pages - How do you return json from a razor page to javascript $.getJson?
body: <p>I am very new to web development and I've been searching around for a while now and I can't seem to find a solution to this. I am using razor pages in asp.net core 2.0 and I want to fill a drop down box based on another drop down box's selection. I set up the below javascript to hit a procedure in my razor page when the value of the first drop down box changes. When I run the code though, I can't get it to work. I think it is due to my return value but I can't seem to get that to be a json value as it keeps throwing an error at me when I try to. The error is that "JSON is not valid in this context". Can anyone suggest to me how to return JSON from razor pages to a javascript call?</p>
  
  <p>Any help would be appreciated!</p>
  
  <pre><code>    @section Scripts {
  &lt;script type="text/javascript"&gt;
      $('#Department').change(function () {
          var selectedDepartment = $("#Department").val();
          var cardSelect = $('#Card');
          cardSelect.empty();
          if (selectedDepartment != null &amp;&amp; selectedDepartment != '') {
              $.getJSON('@Url.Action("GetCardsByDivisionAndStatus")', { divisionID: selectedDepartment }, function (cards) {
                  if (cards != null &amp;&amp; !jQuery.isEmptyObject(cards)) {
                      cardSelect.append($('&lt;option/&gt;', {
                          Card_ID: null,
                          Card_Number: ""
  
                      }))
                      $.each(cards, function (index, card) {
                          cardSelect.append($('&lt;option/&gt;', {
                              Card_ID: card.Card_ID,
                              Card_Number: card.Card_Number
                          }));
  
                      });
  
                  };
  
              });                                
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>}</p>
  
  <p>And here is my C# code (I tried used JsonResult but that's not working either):</p>
  
  <pre><code>           // If the user selects a division then make sure to get the cards for that division only
      [HttpGet]
      public ActionResult GetCardsByDivisionAndStatus(string divisionID)
      {
          int checkinStatus;
          int intdivisionID;
  
          if (divisionID != "0" &amp;&amp; divisionID != null)
          {
              // Retrieve a status of checked in so that only cards with a checked in status can
              // be checked out.
              checkinStatus = linqQuery.GetCardStatusByStatusDesc("Checked In", _Context);
  
              intdivisionID = Convert.ToInt32(divisionID);
  
              // Retrieve list of cards that have the checkin status ID
              CardList = linqQuery.GetCardListByStatusIDandDeptID(checkinStatus, intdivisionID, _Context);
  
              // Create the drop down list to be used on the screen.
              carddropdown = new List&lt;CardDropDown&gt;();
              carddropdown = loaddropdowns.ReturnDropDownList(CardList);
              return new JsonResult(CardList);
          }
  
          return null;
      } 
  </code></pre>
  
  <p><strong>EDIT----------------------------------------------------------------------</strong></p>
  
  <p>So I changed the code as below and now I'm getting a parse error "JSON.parse: unexpected character at line 1 column 1 of the JSON data" I can't figure out what is going on as I can't see what the data is coming back that it can't parse. Is my code below not converting to JSON and if not, what am I missing?</p>
  
  <pre><code>    @section Scripts {
  &lt;script type="text/javascript"&gt;
      $('#Department').change(function () {
          var selectedDepartment = $("#Department").val();                 
          var cardSelect = $('#Card');
          cardSelect.empty();
          if (selectedDepartment != null &amp;&amp; selectedDepartment != '') {
              $.getJSON('@Url.Action("/CheckOutCard?handler=CardsByDivisionAndStatus")', { divisionID: selectedDepartment }, function (cards) {
                  if (cards != null &amp;&amp; !jQuery.isEmptyObject(cards)) {
                      cardSelect.append($('&lt;option/&gt;', {
                          Card_ID: null,
                          Card_Number: ""
  
                      }))
                      $.each(cards, function (index, card) {
                          cardSelect.append($('&lt;option/&gt;', {
                              Card_ID: card.Card_ID,
                              Card_Number: card.Card_Number
                          }));
  
                      });
  
                  };
  
              });                                
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is my C# code for the procedure that I updated:</p>
  
  <pre><code>            // If the user selects a division then make sure to get the cards for that division only
      [HttpGet]
      public JsonResult OnGetCardsByDivisionAndStatus(string divisionID)
      {
          int checkinStatus;
          int intdivisionID;
  
          if (divisionID != "0" &amp;&amp; divisionID != null)
          {
              // Retrieve a status of checked in so that only cards with a checked in status can
              // be checked out.
              checkinStatus = linqQuery.GetCardStatusByStatusDesc("Checked In", _Context);
  
              intdivisionID = Convert.ToInt32(divisionID);
  
              // Retrieve list of cards that have the checkin status ID
              CardList = linqQuery.GetCardListByStatusIDandDeptID(checkinStatus, intdivisionID, _Context);
  
              // Create the drop down list to be used on the screen.
              carddropdown = new List&lt;CardDropDown&gt;();
              carddropdown = loaddropdowns.ReturnDropDownList(CardList);
              var converted = JsonConvert.SerializeObject(carddropdown);
              return new JsonResult(converted);
          }
  
          return null;
      }
  </code></pre>