Help on ajax routing in admin (creating a new tab on the product page)

I am trying to create a plugin so I can ad some additional data to some products. I have copied some other plugins and I have got as far as creating the tab, but I am having problems rendering the tab view.

It look to be some kind of routing issue, the code is:


My controller to display the tab:

namespace Nop.Plugin.Shipping.ByWeightExtended.Controllers
{
    [AdminAuthorize]
    class ProductAdminController : BasePluginController
    {
        private IProductService _productService;
        private IGenericAttributeService _genericAttributeService;
        private IPermissionService _permissionService;

        public ProductAdminController(IProductService productService, IGenericAttributeService genericAttributeService,
            IPermissionService permissionService)
        {
            this._productService = productService;
            this._genericAttributeService = genericAttributeService;
            this._permissionService = permissionService;
        }

        
        public ActionResult GetShippingList(int id)
        {
            if (!_permissionService.Authorize(StandardPermissionProvider.ManageProducts))
                return null;

            var model = new ProductShippingByProductModel();

            var product = _productService.GetProductById(id);
            model.testField = "this is test data";

            return PartialView("~/Plugins/SPC.Shipping.ShippingByWeightExtended/Views/ProductAdmin/Configure.cshtml", model);
        }

    }
}

My Event to create the tab:

  class ProductAdminConsumer : IConsumer<AdminTabStripCreated>
    {
        private readonly IProductService _productService;
        private readonly IGenericAttributeService _genericAttributeService;
        private readonly ILocalizationService _localizationService;
        private readonly IPermissionService _permissionService;

        public ProductAdminConsumer(IProductService productService, ILocalizationService localizationService,
            IGenericAttributeService genericAttributeService, IPermissionService permissionService)
        {
            this._productService = productService;
            this._localizationService = localizationService;
            this._genericAttributeService = genericAttributeService;
            this._permissionService = permissionService;
        }

        public void HandleEvent(AdminTabStripCreated eventMessage)
        {
            if (eventMessage.TabStripName == "product-edit")
            {

                ProductAdminController controller = new ProductAdminController(_productService, _genericAttributeService, _permissionService);
                int productId = Convert.ToInt32(HttpContext.Current.Request.RequestContext.RouteData.Values["id"]);
                var actionName = "GetShippingList";
                var controllerName = "ProductAdmin";
                var routeValues = new RouteValueDictionary()
                                  {
                                      {"Namespaces", "Nop.Plugin.Shipping.ByWeightExtended.Controllers"},
                                      {"area", null},
                                      {"id", productId}
                                  };
                var urlHelper = new UrlHelper(eventMessage.Helper.ViewContext.RequestContext).Action(actionName, controllerName, routeValues);

                StringBuilder sb = new StringBuilder();
                sb.Append("<script>");
                sb.Append("$(document).ready(function() {");
                sb.Append("$('#product-edit > .nav-tabs').append('<li><a data-tab-name=\"spc-shipping-options\" data-toggle=\"tab\" href=\"#spc-shipping-options\">Shipping Options</a></li>');");
                sb.Append("$('#product-edit > .tab-content').append('<div class=\"tab-pane\" id=\"spc-shipping-options\"> Loading...</div>');});");
                sb.Append("$(document).one('click', 'a[data-tab-name=spc-shipping-options]', function() {$(this).tab('show');");
                sb.Append("$.ajax({async: true,cache: false,type: \"GET\",url:\"" + urlHelper + "\"}).done(function(data) {$('#spc-shipping-options').html(data);}); });");
                sb.Append("</script>");
                eventMessage.BlocksToRender.Add(new MvcHtmlString(sb.ToString()));

             
            }
        }
    }

The full ajax url comes out as:
http://nopcommercedev.bonjourltd.local/store/ProductAdmin/GetShippingList/1239?Namespaces=Nop.Plugin.Shipping.ByWeightExtended.Controllers&_=1471955932502

I have tried a few combinations such as below, but I can't find anything that works.
http://nopcommercedev.bonjourltd.local/store/ProductAdmin/GetShippingList?Namespaces=Nop.Plugin.Shipping.ByWeightExtended.Controllers&id=1239&_=1471955932502

Note, nopCommerce is in the /store subdirectory.

I've copied the JavaScript from another plugin which is working in 3.8, when the ajax call to get the tab data is called, I am getting a standard 404 error.
I suspect is is to do with route mapping, but I don't know how to troubleshoot this. Do I need to manually add a route? I thought the standard routing would be enough.

Any guidance on this?

P.S. This is in 3.8

Hello,

First of all thanks for your code it helps me to add tab in admin panel.

There is mistake in following lines

sb.Append("$(document).one('click', 'a[data-tab-name=spc-shipping-options]', function() {$(this).tab('show');");

replace "one" with "on"

second is

sb.Append("$.ajax({async: true,cache: false,type: \"GET\",url:\"" + urlHelper + "\"}).done(function(data) {$('#spc-shipping-options').html(data);}); });");

No need of "async:true" because ajax it self async

Thanks.