Monday, August 4, 2014

How to bind dynamically HTML Ordered List in Asp.net using AngularJS?

Today I will show you a very simple example on binding HTML Ordered List dynamically in Asp.net using AngularJS.

Follows the steps:

Step 1: Create a project with asp.net empty web application and add web form in it.

Step 2: Now, paste following code in ".aspx" page
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div ng-app="" ng-controller="itemController">
            <ol>
                <li ng-repeat="item in items">{{ item }}
                </li>
            </ol>
        </div>

        <script>
            function itemController($scope) {
                $scope.items = [<%=items%>];
            }

        </script>
        <script 
            src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">

        </script>

    </form>
</body>
</html>


Step 3: Now, paste following code in ".aspx.vb" code behind page
Public Class WebForm1
    Inherits System.Web.UI.Page

    Public items As String = ""

    Protected Sub Page_Load(ByVal sender As Object,
                            ByVal e As System.EventArgs) Handles Me.Load

        If Not Page.IsPostBack Then
            'You can change this items dynamically '
            items = "'Orange', 'Apple', 'Banana', 'Grape', 'Watermelon'"
        End If

    End Sub

End Class


Result will be:

1.Orange
2.Apple
3.Banana
4.Grape
5.Watermelon


No comments:

Post a Comment

React-select is very slow on larger list - Found solution - using react-window

 I had more than 4000 items in searchable dropdownlist. I have used react-select but it was very slow. finally I found complete solution to ...