Angularjs inside MVC Razor

Question

i am very new to angular and have been doing some basic stuff.

I am trying to convert some view to use angular and i am stuck

can someone with help how i would do the following using angular

<a href="@Url.Action("Details","Home",new { propertyID=item.RentalID,PropertyType="Rentals" })"><img data-original="img/property/pic (2).jpg" alt="@item.Description" src="@Url.Action("GetImage", "Home", new { id = item.RentalID })" class="img-hover"></a>

i want to repleace the "item" with a data repeater {{i.Item}} for example

I've tried this but it wont work

<a href="@Url.Action("Details","Home",new { propertyID={{i.RentalID}},PropertyType="Rentals" })"><img data-original="img/property/pic (2).jpg" alt="{{i.Description}}" src="@Url.Action("GetImage", "Home", new { id = {{i.RentalID }}})" class="img-hover"></a>

jao · Accepted Answer · 2015-02-07 08:42:36Z

1

You can't, because the @Url.Action is rendered on the server whereas the angular stuff is done later, on the client.

You could however try this:

<a ng-href="@Url.Action("Details","Home",new { PropertyType="Rentals" })&propertyID={{i.RentalID}}"><img data-original="img/property/pic (2).jpg" alt="{{i.Description}}" ng-src="@Url.Action("GetImage", "Home")?id={{i.RentalID}}" class="img-hover"></a>

Please note that I used ng-href and ng-src since we are now using dynamic properties in the URL:

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error. The ngHref directive solves this problem.

answered Feb 7, 2015 at 8:42

jao

18.7k16 gold badges68 silver badges99 bronze badges

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

1 Comment

kayze Over a year ago

Thanks, How do i do this in angular: @{Html.RenderAction("getCityByName1", "Home", new {id = item.CityID});}

Collectives™ on Stack Overflow

Angularjs inside MVC Razor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related