Using razor syntax and angular

Question

Is it possible to use AngularJS variable as Route Parameter in Razor Syntax like this?

<tr data-ng-repeat="job in jobs">
    <td>
        <a href="@Url.RouteUrl("editJob", new { id =  job.JobID })">
            <i class="glyphicon glyphicon-edit" style="color:#808080"></i>
        </a>
    </td>
</tr>

Right now I am using this.

<a href='@Url.Content("~/job/edit/"){{job.JobId}}'>

first one is not working and the second one is working. The first one is much cleaner — codeandcloud
– codeandcloud, Commented Feb 9, 2016 at 9:09
then use that. If works fine. As it understood string find replace in backend works for second condition. — Parth Trivedi
– Parth Trivedi, Commented Feb 9, 2016 at 9:12

Omri Aharon · Accepted Answer · 2016-02-09 09:09:19Z

5

I'd say no, since Razor is rendered server side and at that time Angular variables don't exist. Meaning new { id = job.jobID } will result in { id : null }.

Your second solution is working because the angular string is concatenated right after the Razor part ends.

answered Feb 9, 2016 at 9:09

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

Comments

iJungleBoy · Accepted Answer · 2016-02-09 11:11:37Z

1

I recommend neither solutions because mixing multiple templates is always a bit dangerous. The way our team solves this is

pass in all razor dependencies on in a separate script block with a dynamically created constant on in the ng-init (if only used in simple cases)
only use these in your angular template

A bit like this (pseudo-code, example using ng-init)

<div ng-app="..." ng-init="config = { rootUrl: '@Url.Content("~/job/edit/")', otherValue: ''}">

  <a href="{{config.rootUrl + job.JobId}}">...</a>
</div>

answered Feb 9, 2016 at 11:11

iJungleBoy

5,6711 gold badge11 silver badges22 bronze badges

2 Comments

codeandcloud Over a year ago

yes. the thing is that I want to use angular and the asp.net routing together.

iJungleBoy Over a year ago

@naveen this can be done fairly well like this. I'm assuming you want to use html5 pushstate for angular but map the same urls to the server with asp.net routing, correct? So I'm understanding your core question to be "can you use the same url-config to assemble the link url in razor/angular" - would that hit it?

Collectives™ on Stack Overflow

Using razor syntax and angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related