AngularJS: How to Set MVC Model Data value using AngularJS instead of Razor?

Question

I use Razor to display all the data in my MVC project:

@Html.TextBoxFor(model => model.Birthday, new {id = "birthday"})

I'm pretty new in AngularJS; Now, I want to use AngularJS,( Example).

But now, I don't know how I can set the model.Birthday in this way.
I've set

ng-app="myApp"

for the div tag, which includes

<label>Birthday:</label>
<adm-dtp ng-model='date'></adm-dtp>  

@*@Html.TextBoxFor(model => model.Birthday, new {id = "birthday"})*@

and,

<script>
    var app = angular.module('myApp', ['ADM-dateTimePicker']);
    app.controller('dateController',function() {
        var self = this;
    });
</script>

Darin Dimitrov · Accepted Answer · 2016-04-10 11:07:11Z

Well, you could always set the date model in your Angular controller:

<script>
    var app = angular.module('myApp', ['ADM-dateTimePicker']);
    app.controller('dateController',function() {
        var self = this;
        self.date = '@Model.Birthday';
    });
</script>

This assumes that you have placed your Angular code inside the Razor view, instead of a separate javascript file. Usually it's bad practice to mix ASP.NET MVC and AngularJS. If you are going to write a SPA application based on AngularJS then you probably don't need any Razor or ASP.NET MVC whatsoever. What you need is an ASP.NET Web API that will be consumed by your pure SPA Angular application. A simple static html to serve and bootstrap your SPA application will be more than enough. This SPA application will then simply query your RESTful API in order to retrieve whatever information it needs in order to bootstrap. Right now you seem to be trying to create some hybrid which might not be the best approach in this case.

You are right! My purpose was experimenting AngularJS DatePicker Instead of bootstrap. So exactly I replaced the new one and tried to reconfigure the html page! Also I've tried the code above, but I faced run-time errors as NullReferenceException s, (since after loading it's not valued yet-maybe) even after using conditions. So, according to your answer its not a good approach, at all.

Ravi Anand · Accepted Answer · 2017-03-08 17:58:06Z

0

if you are using separate angular controller file store value in java script global variable in your view as follows:

<script>
 var date = '@Model.Birthday';
</script>

now in angular controller file:

$scope.self.date = date ;

answered Mar 8, 2017 at 17:58

Ravi Anand

5,54211 gold badges54 silver badges81 bronze badges

Collectives™ on Stack Overflow

AngularJS: How to Set MVC Model Data value using AngularJS instead of Razor?

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related