connecting controller to knockout js

Question

I have a grid in which i display columns and one of the columns has an icon and once clicked it should download a file based on the id of the item clicked.

Since i am using knockout and jquery javascript to display the grid along with the icon. how can i connect the method getting the file to the icon in my js file?

JS File:

onDataClick: function (row) {
//Call the method from controller to allow downloading file
                },

Controller - get method:

public FileResult GetFile(int id)
        {
            .....
        }

Update

View:

@{
    ViewBag.Title = "Some Title";
    string url = Url.Action("GetFile");
}

<div data-bind="template: { name: 'knockoutGridTemplate', data: grid }" class="gridWrapper"></div>

In one of the columns in the grid i have in js file:

builtColumns.push({
                property: 'hasStuff',
                header: 'File Download',
                dataCss: 'iconHolder',
                onDataClick: function (row) {


                },
                dataFormatter: function (row) {
                    if (row[this.property]) return ' ';
                    return '';
                },
                dataLinkCss: 'icon-file',
                grouping: 3
            });

Looks like you might be able to do this with an iframe and a custom KnockoutJS binding as detailed in the accepted answer of [Download CSV File by posting JSON data in ASP.NET MVC](http://stackoverflow.com/questions/18114322/download-csv-file-by-posting-json-data-in-asp-net-mvc). — Karl Anderson, Aug 23 '13 at 03:06

Bart Calixto · Accepted Answer · 2013-08-23T03:11:57.697

1

You can do in your view something like

@{
    string getFileUrl = Url.Action("GetFile");
}

/* in your viewModel, depend how you are doing it, you can do inside your item */ ~~item.getFileUrl = '@getFileUrl' + ?id= this.id;~~

and in your html :

<div data-bind="foreach: item">
    <a data-bind="attr : { href = getFileUrl}">get file</a>
</div>

*Note: no need for observables *

EDIT :

onDataClick: function (row) {
    //Call the method from controller to allow downloading file
    window.open('@getFileUrl' + '?id=' + row.id, "_blank");
},

edited Aug 23 '13 at 03:11

answered Aug 23 '13 at 03:04

Bart Calixto

19,210
11
78
114

since i don't have a direct view html page for this - the grid is being generated and displayed in js - can i add it to the onclick in js? – Masriyah Aug 23 '13 at 03:13
I think i am real close - i updated my code above if you can check and make sure that i have things how i am supposed to. From the view page i will be passing in an id for the controller. Thanks for you help – Masriyah Aug 23 '13 at 18:07
looks ok, i don't think is a good idea create a function for each row. I would say would be better to have a generic function that receives an id and call inside the row but not declaring on each row. – Bart Calixto Aug 23 '13 at 22:32

connecting controller to knockout js

1 Answers1