Call controller method from javascript

Question

I want to call the controller method from jquery call. Here is my code .

<script>
function showImage(id) {
    $.get('/Canvas/getPath?id=' + id, function (data) {
        if (data != '') {
            var ext = /[^.]+$/.exec(data);
            var filename = data;
            if(ext == 'tif')
            {                    
                //window.open('/DocViewer/DocViewer.aspx?FilePath=' + data, 'WindowPopup', 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
                window.open('/DocViewer/DocViewer.aspx', 'WindowPopup', 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
            }
            else if(ext == 'xml'){
                $.ajax('/Canvas/getXml?filePath=' + filename, function (xmldata) {
                    alert(xmldata);
                    window.open(xmldata, "WindowPopup", 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
                }); 
            }
        }
        else {
            alert('Document does not exists. Please make sure the document is on location.');
        }
    });
};
</script>

Edit

Here is my controller method

    public JsonResult getXml(string filePath)
    {
        if (System.IO.File.Exists(filePath))
        {
            string xmlString = System.IO.File.ReadAllText(filePath);
            return Json(xmlString, JsonRequestBehavior.AllowGet); ;
        }
        else
        {
            return Json("", JsonRequestBehavior.AllowGet);
        }
    }

Here what I want if ext if xml then I want to call the method of controller . In above code it gives me error on new { filePath = filename } filename doesn't exists. Basically I trying to open xml file in browser. In data I receive the filePath of xml file. How can I call controller method or open xml file in browser?

Answer 1

$.ajax({
      url: '@Url.Action("getXml", "Canvas")'+'?filePath'+=filename,
      type: 'GET',
      success: function(data) 
      { 
      alert(data); 
      }
});

Your code is not working and giving parameter undefined because you are mixing javascript and razor method call.

function showImage(id) {
    $.get('/Canvas/getPath?id=' + id, function (data) {
        if (data != '') {
            var ext = /[^.]+$/.exec(data);
            var filename = data;
            if(ext == 'tif')
            {                    
                //window.open('/DocViewer/DocViewer.aspx?FilePath=' + data, 'WindowPopup', 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
                window.open('/DocViewer/DocViewer.aspx', 'WindowPopup', 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
            }
            else if(ext == 'xml'){
                $.ajax({
                url: '@Url.Action("getXml", "Canvas")'+'?filePath'+=filename,
                type: 'GET',
                success: function(data) 
                { 
                alert(data); 
                }
                });
                //window.open(data, "WindowPopup", 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
            }
        }
        else {
            alert('Document does not exists. Please make sure the document is on location.');
        }
    });
};

Answer 2

Hi guys my problem is solved. Here my full script

<script>
function showImage(id) {
    $.getJSON('/Canvas/getPath?id=' + id, function (data) {
        if (data != '') {
            var ext = /[^.]+$/.exec(data);
            var filename = data;
            if(ext == 'tif')
            {
                //window.open('/DocViewer/DocViewer.aspx?FilePath=' + data, 'WindowPopup', 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
                window.open('/DocViewer/DocViewer.aspx', 'WindowPopup', 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
            }
            else if(ext == 'xml'){                    
                $.getJSON('/Canvas/getXml?filePath=' + filename, function (xmldata) {
                    alert(xmldata);
                    window.open('data:text/xml,' + encodeURIComponent(xmldata), "WindowPopup", 'height=auto,width=auto,status=no,toolbar=no,resizable=yes,scrollbars=yes');
                });                    
            }
        }
        else {
            alert('Document does not exists. Please make sure the document is on location.');
        }
    });
};