jqueryajaxasp.net-core-mvcgetjson

Cannot Display Data from getJson Call on Live Server ASP.NET Core MVC 5


I have an issue with one particularly problematic Controller Method on my site. It is supposed to fetch the Price of an item based on the Product Id, Product Attribute i.e Length and the Product Attribute Value i.e. 1.5 mm. I am using a getJson request to achieve this. The method works perfectly within my local server, but when on the live server, it accesses the method, but does not serve up the price. The method looks something like this.

        [HttpGet]
        [ActionName("GetPriceFromSetAttributes")]
        public IActionResult GetPriceFromSetAttributes(int productId, string productAttributeName, string productAttributeValueName)
        {
            var price = _repository.GetProductPriceFromSetAttributes(productId, productAttributeName, productAttributeValueName);
            return new JsonResult(price);
        }

This is the getJson request.

                var controllerUrl = '@Url.Action("GetPriceFromSetAttributes", "Cart")';
                $.getJSON(controllerUrl, { productId: $("#productId").val(), productAttributeName: $(this).attr('id'), productAttributeValueName: $(this).val() }, function (data) {
                    if (data.attributePrice != null) {
                        $("#attributePrice").val("KES. " + data.attributePrice.toLocaleString() + "");
                        $("#attributePriceToPost").val("" + data.attributePrice + "");
                        $("#originalPriceAt").hide();
                        $("#attributePriceAt").show();
                    }
                    $('#addToCart').html('<i class="fas fa-cart-plus mr-2"></i> Add to Cart');
                    $('#addToCart').prop('disabled', false).removeClass('noHover');
                });

The site initially threw a cross origin exception, after enabling CORS using the code below,

            services.AddCors(options =>
            {
                options.AddPolicy("MyAllowSpecificOrigins",
                                  builder =>
                                  {
                                      builder.WithOrigins("https://localhost:44383",
                                                          "https://tendcorp.co.ke")
                                                          .AllowAnyHeader()
                                                          .AllowAnyMethod()
                                                          .AllowCredentials();
                                  });
            });
            
            
            

            app.UseCors("MyAllowSpecificOrigins");

there are no exceptions but the problem persists. I've even tried connecting to the SQL DB from my dev environment to no avail.

Screenshots for both the live server as well as my localhost are attached.

Live Environment

Localhost

Anyone with pointers? What could I be doing wrong?


Solution

  • getjson is not best choise in your case since it is converted to ajax afterword, try jquery ajax directly

     var controllerUrl = '@Url.Action("GetPriceFromSetAttributes", "Cart")'
    + '?productId='+ $("#productId").val() 
    +'&productAttributeName=' + $(this).attr('id')
    +'&productAttributeValueName='+ $(this).val();
    
      $.ajax({
                type: 'GET',
                dataType: 'json',
                url: controllerUrl,
                success: function (data) {
                 if (data.attributePrice != null) {
                    .... your code
                 }             
              }
      });