Click or drag to resize

Code Structure

This topic contains the following sections:

View file CSHTML

Header and order of statements in view file of type CSHTML.

  1. Header

  2. Data model

  3. Browser windows title.

    HTML layout

  4. Partial declaration, example dialogs

  5. Page title

  6. Page code HTML and C#

Example of Address/Details

XML
Copy
@*
    SOWI Informatik, www.sowi.ch
    Franz Schönbächler, fs@sowi.ch, 079 413 95 22
    12.04.2021 Created

    View: /Address/Details/
    Address.js region --- view Address/Details ---

*@

@model Velo.Data.Models.Address

@{
    ViewBag.Title = "Adresse";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.Partial("_DialogAddress")

<div>
  <h4>Adressen Details</h4>

</div>
JavaScript file

Header and order of regions in JavaScript files.

Example of Address.js

JavaScript
Copy
// SOWI Informatik, www.sowi.ch
// Franz Schönbächler, fs@sowi.ch, 079 413 95 22
// 29.06.2021 created
// 
// Java script code of View/Address *.cshtml files
// 

//#region --- declaration data fields ---

//#endregion

//#region --- view Address/_DialogAddress ---

//#endregion

//#region --- view Address/_DialogAddressList ---

//#endregion

//#region --- view Address/_ListHeader ---

//#endregion

//#region --- view Address/_List ---

//#endregion

//#region --- view Address/_Display ---

//#endregion

//#region --- view Address/_Edit ---

//#endregion

//#region --- view Address/Index ---

//#endregion

//#region --- view Address/Details ---

//#endregion

//#region --- view Address/Create ---

//#endregion

//#region --- view Address/Edit ---

//#endregion

//#region --- view Address/Delete ---

//#endregion
HTML elements

This section contains the following subsections:

Order of button

Navigation Tool Bar

  1. Add a new data entry

  2. Edit data item

  3. Details of data item

  4. Delete data item

  5. Rest of button example a list for adopt

Button

Order of parameters: id type class events title

An example

XML
Copy
<button id="DialogAddressListButtonAdopt" type="button" class="btn btn-primary" onclick="DialogAddressListAdopt();" title="Ausgewählte Adresse übernehmen und Dialog schliessen"><span class="glyphicon glyphicon-share"></span>&nbsp;&nbsp;Übernehmen</button>

Hyperlink as button

Example use in table row

XML
Copy
<a href="@Url.Action("Create")" role="button" class="btn btn-default btn-xs" title="Artikel hinzufügen"><span class="glyphicon glyphicon-plus"></span></a>

<a href="@Url.Action("Edit", new { pID = item.ID })" role="button" class="btn btn-default btn-xs" title="Artikel bearbeiten"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="@Url.Action("Details", new { pID = item.ID })" role="button" class="btn btn-default btn-xs" title="Artikel Details"><span class="glyphicon glyphicon-list"></span></a>
<a href="@Url.Action("Delete", new { pID = item.ID })" role="button" class="btn btn-default btn-xs" title="Artikel löschen"><span class="glyphicon glyphicon-trash"></span></a>
Dialog in CSHTML file

An example of dialog

XML
Copy
@*
    SOWI Informatik, www.sowi.ch
    Franz Schönbächler, fs@sowi.ch, 079 413 95 22
    04.07.2021 Created

    View partial: /Address/_DialogAddress
    Address.js region --- view Address/_DialogAddress ---

    Use code into a view in view folder Address (copy paste):
    @Html.Partial("_DialogAddress")

    Use code into a other view isn't folder Address (copy paste):
    @Html.Partial("~/Views/Address/_DialogAddress.cshtml")

    Patterns of button to show the dialog:
    <button type="button" onclick="AddressListEdit(0);" title="Neue Adresse erfassen"><span class="glyphicon glyphicon-plus"></span></button>
    <button type="button" onclick="AddressListEdit(@item.ID);" title="Adresse bearbeiten"><span class="glyphicon glyphicon-pencil"></span></button>
    <button type="button" class="btn btn-default navbar-btn" onclick="AddressDetailsEdit(@Model.ID);" title="Adresse bearbeiten"><span class="glyphicon glyphicon-pencil"></span></button>

*@

<div id="DialogAddress" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="alert alert-info hidden-print">
                <h4>
                    Adresse &nbsp;&nbsp;&nbsp;
                    <button id="DialogAddressButtonSave" type="button" class="btn btn-primary" onclick="DialogAddressSave();" title="Daten speichern und Dialog schliessen"><span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;Speichern</button>
                    <button id="DialogAddressButtonClose" type="button" class="btn btn-primary" onclick="DialogAddressClose();" title="Dialog schliessen ohne speichern"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Schliessen</button>
                </h4>
            </div>
            <div id="DialogAddressContent" class="modal-body">
                @* content: Address.js method DialogAddressShow *@
            </div>
        </div>
    </div>
</div>