How do I properly use jQuery.get() in a Razor/CSHTML Project?

Question

Quick Overview:

I am attempting to load an XML file "Barcode.label" using jQuery.get() function. However, jQuery.get() cannot locate the file. I believe the issue may be due to working in MVC5 and trying to find the file using the wrong conventions for paths. How do I get the correct path to a file in an MVC5 Razor/CSHTML Web Project?

If more information for this particular problem is needed, I posted it below. This is my first time asking a question here, so I apologize for any ambiguity in advance.

Preface:

I am working on a Razor/CSHTML Web Project under the MVC5 Framework where I must interface with the DYMO LabelWriter 450 Twin Turbo Printer. My end goal is to print data found on a webpage through the printer onto a label slip.

I started my work by following the samples provided on DYMO’s SDK page located here: http://developers.dymo.com/tag/javascript/

There was a sample of javascript code that was used in the sample demo, which is located here: http://labelwriter.com/software/dls/sdk/samples/js/QRCode/QRCode.js

Problem:

In attempting to follow the samples found in the SDK Page, I ran into a roadblock where my program does not properly assign barcodeLabel. It seems as though the jQuery.get() method is not locating the file. I determined this to be the issue based on feedback from Firebug testing, and the error shown below:

GET http://localhost:29138/device/Barcode.label   404 Not Found   2ms

Furthermore, post-evaluation of the particular code block reads that barcodeLabel and barcodeAsImageLabel are undefined. The code relevant to prepping barcodeLabel and barcodeAsImageLabel, and the source of my problem, is shown below:

function loadLabelFromWeb()
{                    
    // use jQuery API to load labels
    $.get("Barcode.label", function(labelXml)
    {
        barcodeLabel = dymo.label.framework.openLabelXml(labelXml);
        alert( "Load was performed for barcodeLabel." );
    });

    $.get("Barcode.label", function(labelXml)
    {
        barcodeAsImageLabel = dymo.label.framework.openLabelXml(labelXml);
        alert( "Load was performed for barcodeAsImageLabel." );
    });
}

Attempts to Solve:

As a sanity test, I ensured that loadLabelFromWeb() is called upon the loading of the page, and that was confirmed to work. However, I do not receive alerts from either load shown in the code above. Both the Print.cshtml file and the Barcode.label file are stored in the same directory. A snapshot of my solution directory is shown below, to mark locations of the files:

> Views
    > Device
        > Barcode.label
        > Print.cshtml

My tests to fix this error include relocating the Barcode.label file to many different locations within the solution, as well as changing the filepath using window.location.pathname to get the current URL, using relative paths with tilde ‘~’, and hard-coding a path to the file. None of these methods seemed to work, which leads me to believe that MVC5 has a different way of handling paths than I am accustomed to.

My specific goal is to figure out how to properly locate the Barcode.label file so that I may load information from the file using jQuery.get().

score 0 · Accepted Answer · edited May 23 '17 at 10:26

The most likely cause of your problem is the MVC routing engine.

Based on the URL http://localhost:29138/device/Barcode.label, the MVC routing engine is looking for an action method Barcode.label() on a DeviceController.

You can solve this using one of two methods:

Configure the routing engine to ignore routes requesting static XML files. See this question.
Create an action method that loads your XML file and outputs the XML as a response.

Here is how you would implement method #2:

public ActionResult LoadBarcodeXml()
{
    string filePath = "\The\Path\To\The\XML\File.xml";
    XmlDocument doc = new XmlDocument();
    doc.Load(filePath);
    return Content(doc.InnerXml, "text/xml");
}

How do I properly use jQuery.get() in a Razor/CSHTML Project?

1 Answers1