2

I am using Angular js 1.4.3 and ASP.NET MVC 4.0 with framework 4.0 in Visual Studio 2015 community version.

I have used text control like this in view:

<input id="txtItemId" name="txtItemId" type="text" data-ng-model="ItemEdit.ItemId" value="ItemEdit.ItemId" value="ItemEdit.ItemId" disabled />

I want to get the txtItemId's value set by data-ng-model in Controller side I mean back end side (server side) but I am getting 0 value as output.

My code to get the record is:

FormCollection frm; (defined in function() defination)
string id = Convert.ToInt32(frm["txtItemId"]); // here I get 0 instead of already set value "1"

and second issue is the dropdownlist I have used it to bind the state record using Angular js and done perfectly fine but at the time of Edit angular not set the value as an id in dropdownlist:

<select id="ddlState" name="ddlState" data-ng-options="s.Text for s in stateoptions" data-ng-model="stateselectedOption"></select>

Any help would be appreciated.

3 rules
  • 1,359
  • 3
  • 26
  • 54
  • Can you please share your angularjs controller code – Midhun Murali Jan 12 '16 at 08:34
  • sorry for late response I have not used angular controller for edit purpose I have directly call the action method using form Action function. Actually I am getting the value in textbox but not in back end. – 3 rules Jan 12 '16 at 09:15

1 Answers1

3

This is the expected result as angular will automatically sync form inputs with the current scope - over-writing any values you have set server side.

You need to initialise the angular scope when the page loads. This can be achieved by converting your MVC model into Json in your view and setting the scope there.

Angular 

myApp.controller('myController', ['$scope', 'viewModel',
   function ($scope,  viewModel) {
        $scope.viewModel = viewModel;
   }]
);

View

<div ng-controller="myController"> ....  </div>
<script type="text/javascript">
 var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model));
 myApp.value("viewModel", model);
</script>
CountZero
  • 6,171
  • 3
  • 46
  • 59
  • I am not passing whole model so I think I don't need to serialize but I am just expecting the value that is shown in textbox at server side when I set as data-ng-model during Edit and Save the record. How it is working I don't know angular js that the record that is displayed in the textbox but I can't get it at server side. – 3 rules Jan 12 '16 at 10:28
  • You have set the input to disabled which will mean the value is not getting posted back. – CountZero Jan 12 '16 at 10:31
  • Ohhh you are right but why? I think disabled should not affect the value? – 3 rules Jan 12 '16 at 10:37
  • Thanks @CountZero for help – 3 rules Jan 12 '16 at 10:45
  • The default model binder will set integers to 0 if no value is present in the post. My suggestion would be to use angular to post your form values via ajax instead of manually posting the form as this goes against the angualr pattern and won't let you take advantage of many of its benefits. Hard to suggest anything else without you posting more code (MVC and Angular controller code) – CountZero Jan 12 '16 at 10:47
  • I understand what you are saying sir, I have to change all of that into angular side now thanks. Really appreciate. – 3 rules Jan 12 '16 at 10:50
  • My pleasure @padhiyar, good luck. Just getting started with Angular myself. – CountZero Jan 12 '16 at 10:52
  • One last issue sir that I am populating dropdownlist and set the values using angular js its done good but when I edit the record at that time the values I want to set perfectly set in the form controls except the dropdownlist it sets a new record but not set the exiting value as selected so for that What should I do? I have mentioned the code in question please refer it. – 3 rules Jan 12 '16 at 10:59
  • Not sure on that one. Setup a watch on the stateselectedOption vaue with a console.debug to make sure angular is aware of the changes. If it is then use ajax to post the value. Either that or use fiddler to check what value is being posted to the server and if it is an issue with front end or backend binding. – CountZero Jan 12 '16 at 11:34
  • I have checked it stateselectedOption is coming proper but when it is going to set in the dropdownlist I mean set in select it sets the blank value and add new one and text as well. Suppose I have set "New York" , "California" in the dropdownlist before and I am editing the record from grid on Edit click event at that time the model that contains the value of dropdownlist as "Id" not set the value in dropdownlist properly. – 3 rules Jan 12 '16 at 11:39
  • So your model contains the 'value' of the dropdown rather than the text within it? Take a look at this answer fella. http://stackoverflow.com/questions/14552976/how-to-get-option-text-value-using-angularjs – CountZero Jan 12 '16 at 11:45
  • No No No the model is just set the value from the existing records that are already in dropdownlist example set the dropdownlist value as selected when you are editing something. – 3 rules Jan 12 '16 at 11:54
  • Set the model (stateselectedOption) to the value you desire in the controller. – CountZero Jan 12 '16 at 13:45
  • I don't understand last comment can you please explain in brief – 3 rules Jan 12 '16 at 14:14
  • I'd suggest creating a new question with all the angualr js code and html with a description of the current behaviour and the desired behavior as comments section isn't the best place to solve. Add a link when you've created it and I'll take a look. will hopefully make it a bit more clear for me. – CountZero Jan 12 '16 at 14:27