Using AngularJS expressions to sum two numbers in ASP.NET MVC 4

Question

I have been searching for this for a while now but I could not find anything that solved my problem.

Problem:

I have been given a task to show sum of two numbers on the run, For Example:

TextBox1 = 2

TextBox2 = 3

Result = 5

Now as soon as the user changes any of the TextBox1 or TextBox2 value the Result should display their sum immediately and I have to do this using AngularJs.

What have I done so far:

I started learning AngularJs and I think adding two numbers is very simple as described above, My code below can do it:

<div data-ng-app="" data-ng-init="numberA=2;numberB=3">
    Number 1: <input type="number" ng-model="numberA">
    Number 2: <input type="number" ng-model="numberB">
    <p><b>Sum:</b> {{numberA + numberB}}</p>
</div>

What I can not do is, do the exact same thing in ASP.NET MVC 4, I created a new Project and the above worked fine but when I started using the Models it does not work.

Model:

public class Check
{
    public int numberA { get; set; }
    public int numberB { get; set; }
}

View:

<div data-ng-app="">
    @Html.TextBoxFor(model => model.numberA, new { @data-ng-model = "numberA" })
    @Html.TextBoxFor(model => model.numberB, new { @data-ng-model = "numberB" })
    <p>Result: {{ numberA + numberB }} </p>
</div>

Now I know the above will not work because I did some research and found out that this won't work but I could not find another way of completing my task. Most of the results showed me that I will need to create simple .html files to make this work.

Question:

Is there a simple way of doing the above? For example something that lets me integrate AngularJs into Razor view easily?
If the answer to above question is no, then what will be the best way to do the task above?
Is there no way to do this using Razor Views and AngularJs together?

Can you clarify what you found? Why would it not work, is it because you can't set `@data-ng-model`? See [Hyphenated html attributes with asp.net mvc](http://stackoverflow.com/q/2897733/247702) — user247702, Oct 22 '14 at 08:20
@Stijn This worked, such a small mistake :( but any ways now my expression `{{ a + b }}` is concatenating `a` and `b` not performing arithmetic sum, but If I do `{{ a * b }}` it is performing multiplication fine. — Syed Farjad Zia Zaidi, Oct 22 '14 at 08:39
What's the rendered HTML? `public int numberA` should render as an ` — user247702, Oct 22 '14 at 08:41

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

There are two problems.

The first one is that you're not properly setting the data-ng-model attribute, you must use underscores instead of hyphens.

The second one is that while EditorFor will correctly set type="number" for an int, TextBoxFor will not do this, so you need to set it manually.

<div data-ng-app="">
    @Html.TextBoxFor(model => model.numberA, new { data_ng_model = "numberA", @type="number" })
    @Html.TextBoxFor(model => model.numberB, new { data_ng_model = "numberB", @type="number" })
    <p>Result: {{ numberA + numberB }} </p>
</div>

edited May 23 '17 at 11:44

Community

1
1

answered Oct 22 '14 at 08:48

user247702

23,641
15
110
157

Thank you this worked, however Can you please tell me how can I render this expression `{{ a + b }}` into `@Html.TextBoxFor(model => model.b, new { ng_model = "numberB", @type = "number" })`? – Syed Farjad Zia Zaidi Oct 22 '14 at 08:51
@SyedFarjadZiaZaidi I don't understand what you mean, sorry. I assume that the result is now correctly calculated instead of doing string concatenation? What's the desired HTML? – user247702 Oct 22 '14 at 08:53
Yes the result is calculated and it's working fine, but for example I want to set the result to a `TextBox` rendered using `Html Helper function`... – Syed Farjad Zia Zaidi Oct 22 '14 at 08:56
1

Ok Its working now, I meant this: `@Html.TextBoxFor(model => model.b, new { ng_value = "numberA + numberB" })` – Syed Farjad Zia Zaidi Oct 22 '14 at 08:57

Using AngularJS expressions to sum two numbers in ASP.NET MVC 4

1 Answers1