1

Hi am a very beginner to AngularJS. I tried AngularJS in my ASP.NET application. I assigned a textbox with ng-modal and bind its values to a div in realtime without any issue. but the trouble is if I set some values to the textbox from server side its getting cleared for that textbox.

    txt_surveyname.Text = "123"

But when rendering the html, it is empty.

This is the markup of the textbox

<asp:TextBox runat="server" ID="txt_surveyname" ng-model="surveyname" ClientIDMode="Static" CssClass="form-control" />

But when I remove the ng-modal, the textbox shows the value from server side. How can I solve this issue?

Sandeep Thomas
  • 4,303
  • 14
  • 61
  • 132
  • FWIW, webforms (with `runat=server`) is a 15 year old abstraction which Microsoft has stopped active development on in favor of newer design patterns like MVC and WebAPI. You may want to consider one of these newer paradigms in your application. – Claies Sep 24 '15 at 15:12
  • 1
    @Claies `ng-model` does work with `runat=server` – jnthnjns Sep 24 '15 at 15:13
  • @Claies Any solution in such case – Sandeep Thomas Sep 24 '15 at 15:13
  • @Asok How can we fix this issue friend.. – Sandeep Thomas Sep 24 '15 at 15:14
  • I think your problem is actually how you are setting those values from the server side. AngularJS is finicky about wanting to retrieve those values. In other words, you would need to set `txt_surveyname.Text = server.response` within AngularJS's controller scope, preferably through an AngularJS service. – jnthnjns Sep 24 '15 at 15:14
  • @Asok Sorry I didnt get that.. Would you please help me in above case if to set just 123 to the textbox from server side.. – Sandeep Thomas Sep 24 '15 at 15:16
  • To be honest I am not 100% familiar with ASP.NET, but AngularJS pushes users towards using AJAX to retrieve data. I will post a very simplified example below. – jnthnjns Sep 24 '15 at 15:17

1 Answers1

0

This is a simplistic AngularJS Ajax example, I haven't tied in the ASP.NET application. I just wanted to show how AngularJS likes to work with server side information.

AngularJS:

// Angular setup
var app = angular.module('myApp', []);

// AngularJS Controller
app.controller('mainCtrl', ['$scope', 'myService', function ($scope, myService) {

    // Initialize scope object
    $scope.txt_surveyname = {};

    // Call the service to retrieve server data
    // currently setup to call as soon as the controller is loaded
    myService.getData().then(
        // On Promise resolve
        function (response) {
            // Notice how I am assigning to `data`
            // that way I can add debug reponse information to the response array if necessary
            $scope.txt_surveyname = response.data;
        }, 
        // On promise reject
        function () {
            // Handle any errors
        });
}]);

// Services to handle AJAX requests
app.service('myService', ['$q', '$http', function ($q, $http) {
    // return an object
    return {
        getData: function () {
            // Start a promise object
            var q = $q.defer();
            // Connect to the server to retrieve data
            $http.get('path/to/file.php', 
                // On Success
                function (response) {
                    q.resolve(response);
                }, 
                // On Error
                function (response) {
                    q.reject(response);
                });
            return q.promise();
        }
    };
}]);

Server Side Response path/to/file.php:

<?php

$sample = array (
    'data' => array (
        'Text' => '123'
    )
);

echo json_encode($sample);

There are other ways (hacks, if you will) that will allow you to assign data to AngularJS on page load, but the above is the preferred.

There also may be a better way with ASP.NET but I haven't used ASP.NET and AngularJS together yet, other than a little playing around here and there.

Possibly Helpful Links:

https://stackoverflow.com/a/20620956/1134705
AngularJS in ASP.NET
How to use AngularJS in ASP.NET MVC and Entity Framework

Community
  • 1
  • 1
jnthnjns
  • 8,962
  • 4
  • 42
  • 65
  • This is not an answer to the question, I am merely demonstrating an AngularJS Ajax request since you said you were new to Angular. There are plenty of examples online but I wanted to thoroughly comment the code so you could better understand. Let me know if you have any questions. – jnthnjns Sep 24 '15 at 15:47