CODEWITHSUNDEEP
c#jqueryasp.net-mvcactionlink
petko_stankoski
petko_stankoski

Reputation: 10723

ActionLink in jQuery

This is my method:

$(document).ready(function () {
    $('td.clickableCell').click(function () {
        var currentObject = null; 
        currentObject = $(this).text();
        @Html.ActionLink("GetThis", "Get", new {theName = currentObject} )
    });
});

but it says that currentObject doesn't exist in the current context. How to resolve this?

Upvotes: 1

Views: 23234

Answers (3)

John Kalberer
John Kalberer

Reputation: 5800

Instead of @Html.ActionLink you should use the jQuery.get function. `@Html.ActionLink is run on the server whereas the javascript is run on the client.

$(document).ready(function () {
    $('td.clickableCell').click(function () {
        var currentObject = $(this).text();
        $.get('@Url.Action("GetThis", "Get")', {theName : currentObject});
    });
});

The Url.Action is rendered on the server and will give you the appropriate url. The $.get will run a get request on the client.

Keep in mind, if this javascript is in a .js file, the Url.Action will not be run. In that case you may simply want to replace it with /Get/GetThis or render the url in a hidden field on the page and get the value of the hidden field in your .js file.

You need an action method that looks like this in order to access the parameter:

public ActionResult GetThis(string theName)
{
    // manipulate theName
    return View();
}

Upvotes: 5

Russ Cam
Russ Cam

Reputation: 125538

currentObject is a JavaScript String object that you are trying to pass into server side code. If you need to do this on the client side,

$(function () {
    $('td.clickableCell').click(function () { 
        var currentObject = $(this).text();

        // find the anchor element that you need to change,
        // then change the property on it to the value
        // of currentObject
        $('a').attr('title', currentObject);
    });
});

Alternatively, it's possible that you need to send the value to the server in some way. If the JavaScript above is within a Razor view, then

$(function () {
    $('td.clickableCell').click(function () { 
        var currentObject = $(this).text();

        // make a HTTP GET request and pass currentObject as a queryparam
        window.location = '@Url.Action("Action", "Controller")' + '?theName=' + encodeURIComponent(currentObject);
    });
});

The '@Url.Action("Action", "Controller")' portion will have been evaluated on the server-side and been resolved by the UrlHelper to the URL to route to that controller action. We put this value in single quotes as we need to use it on the client side in a JavaScript variable. Then we add currentObject as a query parameter (and encode it at the same time).

Upvotes: 4

David
David

Reputation: 219127

You're mixing client-side code with server-side code. This line is being executed on the server before anything is sent to the client:

@Html.ActionLink("GetThis", "Get", new {theName = currentObject} )

That line, by itself, references something which doesn't exist. currentObject won't exist until it's created in JavaScript on the client. That JavaScript code, from the perspective of the server, is nothing more than text.

Upvotes: 1

Related Questions