Defining the Body HTML

Back to Content

Next step is to look at Planning.cshtml. Note that this page doesn’t have a head and a body section. It’s just the html code to implement the body. At the top of the page is some Razor code. What’s important is the statement ViewBag.InitModule. Here you define the Angular Javascript module to use. Next there’s a section scripts where you can add Javascript files that are specific to the Planning page. In this case we don’t have any specific Javascript files. After the Razor code comes the actual HTML. Note that I wrapped the html in a <DIV> node with a reference to the Angular controller named PlanningCtrl. In the HTML itself I implemented a form that references various functions in the
Angular.js controller. Button btnSave is coupled to the save() method for instance. You can also see I definied a Model object named Planning in my Angular.js file that can be referenced via statement data-ng-model=”Planning.typeTijdstip” (as an example).

@{
ViewBag.Title = “Planning”;
ViewBag.InitModule = “planningModule”;
Layout = “~/Views/Shared/_Layout.cshtml”;
}

@section scripts {

<div data-ng-controller=”planningCtrl” class=”col-md-12″>

<form name=”planningsForm” novalidate style=”width:100%”>
<table>
<tr>
<td width=”35%”><img src=”~/ahak_logo.png” alt=”A-Hak logo” height=”100″ width=”200″></td>
<td width=”65%” valign=”bottom”>
<h2>&nbsp;&nbsp;Add New Planning</h2>
</td>
</tr>
<tr>
<td width=”100%” colspan=”2″>&nbsp;</td>
</tr>
<tr>
<td width=”35%”><label for=”opdrachtid”>OpdrachtId</label></td>
<td width=”65%”><input type=”text” id=”opdrachtId” data-ng-model=”Planning.opdrachtid” />&nbsp;
<label id=”errorOpdrachtId”></label>
</td>
</tr>
<tr>
<td width=”35%”><label for=”typeTijdstip”>Type Tijdstip</label></td>
<td width=”65%”>
<input type=”radio” name=”typeTijdstip” data-ng-model=”Planning.typeTijdstip” value=”Wens” data-ng-click=”enterplanning()” checked> Wens &nbsp;
<input type=”radio” name=”typeTijdstip” data-ng-model=”Planning.typeTijdstip” value=”Definitief” data-ng-click=”enterplanning()”> Definitief &nbsp;
<input type=”radio” name=”typeTijdstip” data-ng-model=”Planning.typeTijdstip” value=”Voorlopig” data-ng-click=”enterplanning()”> Voorlopig &nbsp;
<input type=”radio” name=”typeTijdstip” data-ng-model=”Planning.typeTijdstip” value=”Beletmelding” data-ng-click=”enterbeletmelding()”> Beletmelding &nbsp;
</td>
</tr>
<tr>
<td width=”35%”><label id=”lblstarttijd” for=”starttijd”>StartTijd</label></td>
<td width=”65%”>
<input id=”startdatum” type=”text” data-ng-model=”Planning.startdatum” style=”width:80px”/>&nbsp;
<label id=”errorStartdatum”></label>&nbsp;
<select id=”selstarttijd” name=”selstarttijd” data-ng-model=”Planning.starttijd”>
<option value=”08:00″ selected>08:00</option>
<option value=”10:00″>10:00</option>
<option value=”13:00″>13:00</option>
<option value=”15:00″>15:00</option>
</select>
</td>
</tr>
<tr>
<td width=”35%”><label id=”lbleindtijd” for=”eindtijd”>EindTijd</label></td>
<td width=”65%”>
<input id=”einddatum” type=”text” data-ng-model=”Planning.einddatum” style=”width:80px” />&nbsp;
<label id=”errorEinddatum”></label>&nbsp;
<select id=”seleindtijd” name=”seleindtijd” data-ng-model=”Planning.eindtijd”>
<option value=”10:00″ selected>10:00</option>
<option value=”12:00″>12:00</option>
<option value=”15:00″>15:00</option>
<option value=”17:00″>17:00</option>
</select>
</td>
</tr>
<tr>
<td width=”35%”><label id=”lblredencode” for=”redencode”>RedenCode</label></td>
<td width=”65%”>
<select id=”selRedenCode” name=”selRedenCode” data-ng-model=”Planning.redencode”>
<option value=”KlantNietThuis” selected>KlantNietThuis</option>
<option value=”VergunningNietGereed”>VergunningNietGereed</option>
<option value=”AfspraakGeplandMetKlant”>AfspraakGeplandMetKlant</option>
<option value=”Overmacht”>Overmacht</option>
</select>
</td>
</tr>
<tr>
<td width=”35%” valign=”top”><label id=”lbltoelichting” for=”toelichting”>Toelichting</label></td>
<td width=”65%”>
<textarea id=”toelichting” cols=”40″ rows=”5″ data-ng-model=”Planning.toelichting”></textarea>
</tr>
<tr>
<td width=”35%”><label id=”lblisBenodigd” for=”isBenodigd”>OpdrachtgeverBenodigd</label></td>
<td width=”65%”>
<input type=”radio” name=”isBenodigd” data-ng-model=”Planning.isBenodigd” value=”true”><label id=”lblisBenodigdTrue”>true</label> &nbsp;
<input type=”radio” name=”isBenodigd” data-ng-model=”Planning.isBenodigd” value=”false”><label id=”lblisBenodigdFalse”>false</label>
</td>
</tr>
<tr>
<td width=”100%” colspan=”2″>&nbsp;</td>
</tr>
<tr>
<td width=”35%”><label id=”lblContacttijdstip” for=”contacttijdstip”>contactTijdstip</label></td>
<td width=”65%”><input id=”contacttijdstip” type=”text” data-ng-model=”Planning.contacttijdstip” />
<label id=”errorContacttijdstip”></label>&nbsp;
</td>
</tr>
<tr>
<td width=”35%”><label id=”lblTypeContactpoging” for=”typeContactpoging”>Type Contactpoging</label></td>
<td width=”65%”>
<select id=”seltypeContactpoging” name=”seltypeContactpoging” data-ng-model=”Planning.typeContactpoging”>
<option value=”Telefonisch” selected>Telefonisch</option>
<option value=”LangsGegaan”>LangsGegaan</option>
<option value=”Schrijven”>Schrijven</option>
<option value=”Anders”>Anders</option>
</select>
</td>
</tr>
<tr>
<td width=”35%” valign=”top”><label id=”lblOpmerking” for=”opmerking”>Opmerking</label></td>
<td width=”65%”>
<textarea id=”opmerking” cols=”40″ rows=”5″ data-ng-model=”Planning.opmerking”></textarea>
</td>
</tr>
<tr>
<td width=”100%” colspan=”2″>&nbsp;</td>
</tr>
<tr>
<td width=”100%” colspan=”2″>
<button id=”btnCancel” data-ng-click=”cancel()” style=’width:100px’>Reset</button>
<button id=”btnSave” data-ng-click=”save()” style=”width:100px;background:#f9b000″>Verzend</button>
</td>
</tr>
</table>
</form>

<div>
<h2>{{message}}</h2>
</div>
</div>

Back to Content

Leave a Reply

Your email address will not be published. Required fields are marked *