Hello,

It should be possible to just keep everything as it is and add a little Angular that only does a few things. For example the form could look like this:

@using (Html.BeginUmbracoForm("SendOrderCoinsAndBills", "OrderCoinsAndBills", null, new { @id = "orderForm", ng_controller = "OrderController" }))

Then you can do some nice Angular stuff:

<tr ng-repeat="coin in coins" ng-show="coin.allowed" class="coinscount">
    <td ng-model="coin.image"><img ng-src="/images/{{coin.image}}" /></td>
</tr>

You can also use Angular to change some input fields. As long as the name attribute is the same as the model property you can still just post it back to your SurfaceController.

Jeroen

Thanks, Jeroen,

As soon as our Angular dev gets back from vacation, I'll have him try it and let you know how it goes :-)

~Heather

Hi Jeroen,

So, I was doing some experimenting with this...

The angular fancy-stuff we have is a tool which, if you enter a zip-code, will lookup the city/state and pre-populate that data.

My Angular guy has it setup like this:

using (Html.BeginUmbracoForm("HandleSubmit", "AddEditLocationForm", null, new { @class = "row" }))
{
    ...some other fields...
    <div data-ng-controller="CustomCode.PostalCodeController">
        <div class="row">
            <label class="col-s-3 col-xs-4 col-xxs-8">
                <span>Postal Code</span>
                @*@Html.EditorFor(x => Model.PostalCode, new { @type = "text" })*@
                <input type="text" name="PostalCode" data-ng-model="postalCode" />
            </label>

            <span class="col-xs-3 col-xxs-4">
                <button type="button" class="next" data-ng-click="getCitiesByPostalCode()" style="margin-top: 2em;">Search</button>
            </span>
            <span class="help-alt city-state col-s-6 col-xs-5 col-xxs-12" data-ng-show="!hasCitiesList()">Enter POSTAL CODE for City & State</span>
            <label class="col-s-6 col-xs-8 col-xxs-12 city-state" data-ng-show="hasCitiesList()">
                <select data-ng-model="selectedCity" data-ng-options="city for city in cities" data-ng-change="checkIfManuallyNeedToEnterCity()"></select>
            </label>
        </div>

        <div class="row" data-ng-show="needsManualCityEntry">
            <label class="col-s-8 col-xs-6 col-xxs-12">
                <span>City</span>
                @*@Html.EditorFor(x => Model.Locality, new { @type = "text" })*@
                <input type="text" name="Locality" data-ng-model="locality" />
            </label>
            <label class="col-s-4 col-xs-6 col-xxs-12">
                <span>State</span>
                @*@Html.EditorFor(x => Model.Region, new { @type = "text" })*@
                <select name="Region" regiondata-ng-model="selectedState" data-ng-options="state.name for state in states"></select>
            </label>
        </div>
    </div> 
    ...some more fields & a submit button...
}

(You can see that I have commented-out the standard Html.EditorFor() controls that I would use if we didn't have the angular.)

I added name="{My model property}" data to the standard input controls. I was hoping that would magically make it work, but unfortunately, the data I have made available in the model (via an initial RenderForm action on the controller) doesn't populate for those few address fields. It doesn't recognize the connection between the model.PostalCode and the input name="PostalCode".

I also realized that I couldn't handle it the other way around:

@Html.EditorFor(x => Model.PostalCode, new { @type = "text", data-ng-model="postalCode" })

causes a compile error at data-ng-model= due to the dashes. Similarly, this also doesn't work:

@Html.EditorFor(x => Model.PostalCode, new { @type = "text", @data-ng-model="postalCode" })

Could you explain a bit more specifically what we'd need to do to make this work both ways?

Thanks so much!

~Heather

Try the following: @data_ng_model

Thanks, Moshe.

I changed it to :

@Html.EditorFor(x => Model.PostalCode, new { @type = "text", @data_ng_model="postalCode" })

Which doesn't cause compiling issues... and when the page renders, I see the value in the postal code field... but the Angular attribute isn't present in the rendered markup which is this:

<input class="text-box single-line" data-val="true" data-val-required="LocationPostalCodeRequired" id="PostalCode" name="PostalCode" type="text" value="97013">

So... still not quite there.

~Heather

Ps. Similar result if I leave the "@" off:

@Html.EditorFor(x => Model.PostalCode, new { @type = "text", data_ng_model="postalCode" })

is working on a reply...