How to use Angular and ASP.NET Razor together

Question

How to pass an ASP.NET model's parameter to the ng-click method?

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            <button class="btn btn-default" ng-click="addToBasket()"></button>
        </td>
    </tr>
}

I want to pass item.Id to the addToBasket method set by ng-click attribute.

Is there an easy way to do it?

Dai · Accepted Answer · 2020-03-04 04:38:07Z

2

<button class="btn btn-default" ng-click="addToBasket(@( item.Id ))"></button>

Razor's special @ character is (generally) interpreted regardless of location or surrounding HTML syntax (which is a problem if you ever want to embed a static e-mail address in Razor...)

To escape the @ (such as for putting an e-mail address) just put it twice:

<input type="email" value="foo@@bar.com" />

edited Mar 4, 2020 at 4:38

answered Oct 19, 2016 at 8:38

Dai

158k31 gold badges314 silver badges437 bronze badges

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

2 Comments

FrozenHeart Over a year ago

And why do you have brackets around item.Id? I thought that they're not required

Dai Over a year ago

@FrozenHeart Correct, they are not required, but I personally prefer to use parentheses to make it clearer - especially as I'm still a fan of the ASPX <%= %> syntax.

Collectives™ on Stack Overflow

How to use Angular and ASP.NET Razor together

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related