how to use C# variable inside of javascript block variable using Razor?

Question

I have a view file(.cshtml) with this C# block in top of file:

@{
List<string> selectedCategories = new List<string>();

}

well I want to use the selectedCategories list in the following javascript block

@section scripts{
<script src="../../Scripts/jquery-1.6.4-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#list-all-categories").selectable({
            stop: function () {
                var result = $("#selectedCategories").empty();
                @selectedCategories.Clear()
                $(".ui-selected", this).each(function () {
                    var Mytext = $(this).text();

                    @selectedCategories.Add(Mytext.toString());

                });

            }
        });
    });
</script>

}

SO, it's does not work!... at all!!!

I have some errors like this: -Conditional compilation is turned off -The name 'Mytext' does not exist in the current context -...

what should I do?! help me please!

jgauffin · Accepted Answer · 2011-09-30 10:39:12Z

5

Javascript is run in the browser.
Razor code is run in the webserver

You can't mix them like that.

You need to create form elements by using jQuery only and then post them back to the sevrer.

<script type="text/javascript">
    $(document).ready(function () {
        $("#list-all-categories").selectable({
            stop: function () {
                $(".selectedItems").remove();
                $(".ui-selected", this).each(function () {
                var Mytext = $(this).text();
                $('#myform').append('<input type="hidden" name="selectedCategory" value="' + MyText + '" class="selectedItems" />');
            });
        });
    });
</script>

change "myform" to the form that is posted.

And then you get the items as:

public ActionResult YourAction(string[] selectedCategory)
{
}

edited Sep 30, 2011 at 10:39

answered Sep 30, 2011 at 10:04

jgauffin

101k45 gold badges245 silver badges378 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

amir-yeketaz Over a year ago

can you give me an example please?!

amir-yeketaz Over a year ago

I tested something like your example ... but it does not work! ... my selectedCatgory array is null! ... also i checked request.form and i didn't see selectedCategory parameter! ... I don't know the problem!!!

amir-yeketaz Over a year ago

I don't know what should i say ... but that's work now:D ... thanx a lot

Christoffer · Accepted Answer · 2011-09-30 10:09:13Z

1

The problem is that razor expressions are compiled server-side, before the web page reaches web browser. But the JavaScript is interpreted at "run time", at client-side. Therefore you cannot add stuff to a c#-list from JavaScript like that.

Perhaps, if you need to maintain a c#-list in the backend, you could make an action on the controller that you can send items to via Ajax.

answered Sep 30, 2011 at 10:09

community wiki

Christoffer

Comments

Keith · Accepted Answer · 2011-09-30 10:17:27Z

The Razor code is run by the web server as it's building text, at which point the Javascript is just plain text.

Razor just makes this stuff easier to read, but really it's just combining server execution with blocks of string text.

Your example is actually doing this:

Response.Write(@"
<script src=""../../Scripts/jquery-1.6.4-vsdoc.js"" type=""text/javascript""></script>
<script type=""text/javascript"">
$(document).ready(function () {
    $(""#list-all-categories"").selectable({
        stop: function () {
            var result = $(""#selectedCategories"").empty();");

Response.Write( selectedCategories.Clear() );

Response.Write(@"$("".ui-selected"", this).each(function () {
                var Mytext = $(this).text();");

Response.Write( selectedCategories.Add(Mytext.ToString()));

Response.Write(@"});

        }
    });
});
</script>");

So you get a compilation exception on Mytext because it doesn't exist server side - all that Javascript is just text strings to the server side .Net code.

Collectives™ on Stack Overflow

how to use C# variable inside of javascript block variable using Razor?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related