CODEWITHSUNDEEP
javascriptc#jqueryasp.net-mvc
crazydev
crazydev

Reputation: 575

Passing a JavaScript variable to a razor function in jQuery DataTable

I have a function Convert(string name) defined in razor c#.

Next, I have a jquery data table that consists of a hyperlink on the first row. The issue is that I need to invoke this C# function within the jquery datatable. 

"render": function (data, type, row, meta) {
                        return '<a href="/Home/Detail?search=' + row.Id + '">'

I want to invoke this C# Convert(string name) function in the jquery datatable like follows: 

 "render": function (data, type, row, meta) {
                        return '<a href="/Home/Detail?search=' + @Check(row.Id) + '">

But it's not working as expected. Could someone please help?

Upvotes: 1

Views: 718

Answers (2)

Tetsuya Yamamoto
Tetsuya Yamamoto

Reputation: 24957

Certainly you can't pass client-side variable directly to server-side method like this:

"render": function (data, type, row, meta) {
                return '<a href="/Home/Detail?search=' + @Check(row.Id) + '">'
          }

The reason behind it is because all server side codes are executed immediately after the page is loaded and only client-side scripts remain afterwards. You need to use either JsonResult or Web API method and create a JS function to make AJAX callback with jQuery.ajax() (either using GET or POST method depending on your choice) and returns conversion result.

Here are examples for both ways:

1) Using AJAX callback with JsonResult

JS

function check(rowId) {
    var rid = { name: rowId };
    $.post('@Url.Action("Convert", "ControllerName")', rid).done(function (result) {
        // do something
        return result;
    }).fail(function (jqxhr, textStatus, err) {
        // error handling
    });
}

Controller

[HttpPost]
public JsonResult Convert(string name)
{
    // do something

    return Json(result);
}

2) Using AJAX callback with Web API (i.e. ApiController)

JS

function check(rowId) {
    var rid = { name: rowId };
    $.post('api/Convert', rid).done(function (result) {
        // do something
        return result;
    }).fail(function (jqxhr, textStatus, err) {
        // error handling
    });
}

Web API Controller

[HttpPost]
public IHttpActionResult Convert(string name) 
{
    // do something

    return new JsonResult<string>(result);
}

Both methods have same implementation in render part, just call check function and pass row.Id as argument:

DataTable

"render": function (data, type, row, meta) {
                return '<a href="/Home/Detail?search=' + check(row.Id) + '">';
          }

Note: The JS-based check function above should declared outside DataTable definition.

Upvotes: 1

TAHA SULTAN TEMURI
TAHA SULTAN TEMURI

Reputation: 5191

If that method can be easily implemented on javascript go with javascript else you need to create WebMethod on controller side in order to call C# method from javascript like this

[WebMethod]                                 
public static void Convert(string name)
{
//Your Logic
 }

Then call inside script like this

 $.ajax({
     type: "POST",
     url: 'Yourcontrollername/Convert',
     data: {name="somename"},
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function (msg) {
        //do something with result
     },
     error: function (e) {
        alert("Something Wrong.");
     }
 });

Upvotes: 0

Related Questions