Two way databinding in AngularJS using Asp.Net

Two way databinding in AngularJS

We have a two way data binding when a model variable is bound to a HTML element that can both change and display the value of the variable.

We use the ng-model directive to bind a model variable to the HTML element that can not only display its value, but also change it.

                                     DEMO


HTML CODING


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Two way databinding in AngularJS</title>
             <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script type="text/javascript">

        var myapp = angular.module("blogmodul", []);

        myapp.controller("blogcontroller", function ($scope) {

            $scope.message = "dotnetdrizzles";
            var blog = {
                name: "Dotnetdrizzles",
                domain: "blogspot.in",
                provider : "Google"
            }
            $scope.blog = blog;

        });

    </script>
</head>
<body ng-app="blogmodul">
    <form id="form1" runat="server">
    <div align="center" ng-controller="blogcontroller">
                <h1>Two way databinding in AngularJS</h1>

        <asp:TextBox ID="TextBox1" ng-model="message"  runat="server"></asp:TextBox>
        {{message}}   <br />
     NAME:  <asp:Label ID="Label1" runat="server" ForeColor="Red" Text="{{blog.name}}"></asp:Label><br />
      DOMAIN:  <asp:Label ID="Label2" runat="server" ForeColor="Red" Text="{{blog.domain}}"></asp:Label><br />
       PROVIDER: <asp:Label ID="Label3" runat="server" ForeColor="Red" Text="{{blog.provider}}"></asp:Label><br />
    </div>
    </form>
</body>
</html>


Add new web form -Add- Anjular.js plugins - create model and controller with some conditions below 






Next - Add ng-app in <body> tag  - Next - Add Controller in <div> tag - ng-model  bind to Textbox and changeable  - Next - Add object value bind from conditions 







Jquery event handling Bind,Live,Delegates

Jquery event handling Bind,Live,Delegates

Jquery evevts  used to copy from some <div>,<a>,<p> tags values append to same as another Bind Live Delegate using this 3 methods

                                        DEMO






 Syntax:

$('#Jquery').delegate('selector','event',function()

 {

});


           HTML CODING

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery event handling Bind,Live,Delegates</title>

    <script type="text/javascript" src="jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {

            $("#Jquery p").bind("click", function () {

                $(this).clone().appendTo("#Label1");
           })

        });
       
        $(function ()
        {
            $("#Jquery a").live("click", function ()
            {
             
                $(this).clone().appendTo("#Label1");

            })
        });

        $(function ()
        {
            $("#Jquery").delegate("h1", "click", function ()
            {
               
                $(this).clone().appendTo("#Label1");

            });
        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
    <div id="Jquery">
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

        <h1>Dot</h1><br />
         <p>Net</p><br />
        <a>Drizzles</a><br />
        <a href="#">blogspot.in</a></div>
    </div>
    </form>
</body>
</html>


Add - New Webform - add jquery 1.7.1.js plugin  - next add jquery div id and <a> and<p> append to label






Next - Add delegate  <h1> tag select text append to label control 





AngularJs Using in Masterpage Asp.Net

AngularJs Using in Masterpage Asp.Net

AngularJs is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. 


The AngularJS Components


1.ng-app   - AngularJS application to HTML.

2.ng-model - AngularJS application data to HTML input controls.


3.ng-bind AngularJS Application data to HTML tags.

Ex : {{ng-bind}}


DEMO



HTML


<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ng-app ContentPlaceHolderID="head" Runat="Server">

       <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
     
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div align="center" ng-app>
        <h1>AnjularJs Using in Masterpage</h1>
<table><tr><td>
    <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
    </td><td>
        <asp:TextBox ID="TextBox1" ng-model="name" runat="server"></asp:TextBox>
    </td><td style="color:red">{{name}}</td></tr>
    <tr><td>
        <asp:Label ID="Label2" runat="server" Text="Email"></asp:Label>
        </td><td>
            <asp:TextBox ID="TextBox2" ng-model="email" runat="server"></asp:TextBox>
        </td><td style="color:red">{{email}}</td></tr>
    <tr><td>
        <asp:Label ID="Label3" runat="server" Text="Mobile Number"></asp:Label>
        </td><td>
            <asp:TextBox ID="TextBox3" ng-model="mobile" runat="server"></asp:TextBox>
        </td><td style="color:red">{{mobile}}</td></tr>
    <tr><td colspan="2" style="color:deeppink">{{name}},{{email}},{{mobile}}</td></tr>
</table>

    </div>

</asp:Content>


First Add new webform - Add Masterpage - Head section Contentplaceholder inside add AngularJs Script Plugin





Next - Add ng-app add to div tab - ng-modal add for name,mobile,email  and bind {{ng-bind}} individually even with total binding