How to pass value from cshtml file to the JS

Question

Hello I need to pass one param to the my JS function after pressing button.

Here is my button:

<button type="button" class="btn btn-default" id="UserClick" onclick="foo(@HttpContext.Current.User.Identity.Name)">Click here to add me as a user</button>

as You can see I try to send @HttpContext.Current.User.Identity.Name to the function foo.

Here my Foo function:

    function foo(value) {
         alert(value);
    };

I tried sollutions from those topics: One Two

But all I get get is this error:

Uncaught SyntaxError: Unexpected token ILLEGAL

How to bypass this?

@update

All files included:

<script src="/Scripts/CreateDevice.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>

full JS file:

$(document).ready(function () {

function foo(value) {
    alert(value);
};
})

I can access to the js file from page-source.

Satpal · Accepted Answer · 2014-01-17T15:08:19.547

First of all change you sequence of file to

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/CreateDevice.js"></script>

Declare your function outside document-ready handler. Like

$(document).ready(function () {
});

function foo(value) {
    alert(value);
};

Pass your parameter in quotes

onclick="foo('@HttpContext.Current.User.Identity.Name');"

Additionally, You can bind event using .on() and pass parameter using attributes

JS

$(document).ready(function () {
    //Bind Event
    $(document).on('click', '#UserClick', function(){
        alert($(this).data('user-name'))
    });
});

HTML

<button type="button" 
    class="btn btn-default" 
    id="UserClick" 
    data-user-name="@HttpContext.Current.User.Identity.Name"
    >Click here to add me as a user</button>

score 1 · Answer 2 · edited Jan 17 '14 at 15:15

1

onclick="foo('@HttpContext.Current.User.Identity.Name');"


$(document).ready(function () {

window.foo = function(value) {
    alert(value);
};
})

this will work...

You should consider removing the 'onclick' attribute in the html though, and binding the function to the button using jquery's .on() function.

edited Jan 17 '14 at 15:15

Satpal

132,252
13
159
168

answered Jan 17 '14 at 14:33

bedane

1,129
11
13

Uncaught ReferenceError: foo is not defined after this change – szpic Jan 17 '14 at 14:35
function foo(value) { alert(value); }; -- where did you write this ? the browser can't reach this code it seems – bedane Jan 17 '14 at 14:38

How to pass value from cshtml file to the JS

2 Answers2