Hi Ranjit,
It looks like you are trying to render your table rows using Razor, but
then trying to sort them with Angular's ngRepeat directive. For ngRepeat
to do the sorting, however, it needs to handle the rendering, as well. You
cannot use both, in my experience.
I think that the best way to get MVC Razor and Angular to work together is
to adopt this kind of strategy:
1. Use Razor to render content that does not need Angular. This will
primarily include static content on the page, like the table heading in
your code.
2. For the content that does need Angular, "dump" your model data to JSON,
and then "consume" it using a controller. You might try something like
this, at the bottom of your view:
<script>
// "Dump" it to JSON
var modelDataFromMVC = @Html.Raw(Json.Encode(Model);
angular.module("myApp", [])
.controller("mainController", ["$scope", function($scope){
// Do stuff with your modelDataFromMVC variable here.
// For example...
$scope.myServerData = modelDataFromMVC;
}]) ;
</script>
Note that this is kind of a sloppy way to do it, but it is a good
proof-of-concept. If it works for you, I would recommend standardizing how
you "dump" your MVC model data, and do it in a very disciplined and
predictable way. Angular services work well for this. It will make your
MVC/Angular integration a lot easier, especially when it comes to
prototyping and testing.
Good luck!
On Wednesday, May 14, 2014 2:41:12 PM UTC-4, Ranjit Menon wrote:
>
> Hi
>
> I have a requirement to sort a table in my MVC razor UI. The table was
> generated using scaffolding option in MVC and bound to a model. The code
> looks something like below
>
> @model
> IEnumerable<Avanade.Bureau.DataAccessLayer.DatabaseModel.SubscriptionType>
>
> @{
> ViewBag.Title = "Subscriptions";
> Layout = "~/Views/Shared/_Layout.cshtml";
> }
>
> <h2>Subscriptions</h2>
>
> <table class="table">
> <tr>
> <th>
> @Html.DisplayNameFor(model => model.Code)
> </th>
> <th>
> @Html.DisplayNameFor(model => model.Description)
> </th>
> <th></th>
> </tr>
>
> @foreach (var item in Model)
> {
> <tr ng-repeat="table in Model | orderBy:predicate:reverse">
> <td>
> @Html.DisplayFor(modelItem => item.Code)
> </td>
> <td>
> @Html.DisplayFor(modelItem => item.Description)
> </td>
> <td>
> @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
> @Html.ActionLink("Subscribe", "Index", "Subscription", new
> { id = item.Id }, null)
> </td>
> </tr>
> }
>
> </table>
>
>
> I want to use Angularjs to do sorting.All the examples that I have seen so
> far taken show examples of data that is hardcoded in the view. As you can
> see my view is bound to the model which gets the data from the database via
> the controller. Could someone help.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
