How can I mix Razor syntax with JavaScript inside JavaScript file?

Question

I need to mix and match JavaScript and C# using Razor syntax in the same statement. I could be using @: wrong for writing JavaScript inside of Razor code because the last expression in the Razor code block breaks all the JavaScript after the block.

var myVar = document.getElementById("myId");
var linkText = "someText";
var JSVar = X;  //X represents some number
@{
    int ID = JSVar;
    @:myVar.innerHTML = @Html.ActionLink(@:linkText, "Details", "Cards", new { Id = ID});
}

I've also tried to accomplish this as a single expression without the code block, like this:

myVar.innerHTML = @Html.ActionLink(@:linkText, "Details", "Cards", new { Id = @:IdVar });

This breaks the following JavaScript as well.

X is irrelevant to the question. It represents a JavaScript var value (it's a number). — tocoolforscool
– tocoolforscool, Commented Mar 27, 2017 at 18:29
X doesn't even exist when while view is creating at server side. Are you trying to append X value to ULR when myId is clicked at client-side? — Win
– Win, Commented Mar 27, 2017 at 18:33
@Win Disregard 'X'. The variable is valid. The above is only an excerpt of my code, the only code in question is the Razor block. The JS variables are just to give readers context of how I'm trying to mix the JS and Razor. — tocoolforscool
– tocoolforscool, Commented Mar 27, 2017 at 18:47

Win · Accepted Answer · 2017-03-27 19:10:49Z

1

Based on the question, it seems that you want to contract a link dynamically at client-side with value from JSVar.

If so, you could just append JSVar to URL. For example,

<input id="txtValue" type="text" value="Stackoverflow" />
<a id="myId">Navigate to Page</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#myId").click(function () {
            var JSVar = $("#txtValue").val();
            location.href = "@Url.Action("About", "Home")/id=" + JSVar;
        });
    })
</script>

answered Mar 27, 2017 at 19:10

Win

62.4k13 gold badges106 silver badges190 bronze badges

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

6 Comments

tocoolforscool Over a year ago

I didn't realize that you could mock an html element like that. However I am a little confused as to where 'location.href' comes from and what it represents.

tocoolforscool Over a year ago

Also I tried this since I posted the question: row.insertCell(0).innerHTML = '<a asp-action="Details" asp-controller="Cards" new {Id =' + cardId + '}>' + cardName + '</a>'; and it generates this : <a asp-action="Details" asp-controller="Cards" new {Id = "1}">cardName</a> and therefore renders the link useless due to incorrect syntax. I can't imagine why those quotations are appearing there.

Win Over a year ago

You cannot place asp-* inside JavaScript. You need to approach from different angle such as using link's click event. You need to understand basic knowledge of jQuery and how DOM works; without jQuery you will be straggling with very basic thing in ASP.Net Core.

tocoolforscool Over a year ago

I'm fairly familiar with DOM and jQuery but I wasn't aware that jQuery was advantageous to asp.net core. Before this poject I used jQuery exclusively but I wanted to use basic library and master JS.

Win Over a year ago

You can try row.insertCell(0).innerHTML = '<a href="@Url.Action("Details", "Cards", new {Id = cardId })">' + cardName + '</a>';. Obviously, cardId must be server-side variable.

|

BrianLegg · Accepted Answer · 2017-03-27 17:07:33Z

0

I don't think this is possible to do. What I do (when I can't come up with a better alternative) is to store razor variables (like an href or model value) in a hidden field or div which I can then pull out via javascript.

What are you trying to accomplish exactly? There may be a more elegant way to achieve it?

answered Mar 27, 2017 at 17:07

BrianLegg

1,7003 gold badges21 silver badges40 bronze badges

1 Comment

tocoolforscool Over a year ago

I'm trying to make the innerHTML of a table cell a link to somewhere else in my app. I've inserted the 'linkText' in the html table already as plain text but am having trouble making it a link.

Collectives™ on Stack Overflow

How can I mix Razor syntax with JavaScript inside JavaScript file?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related