Componentization of fabrics

Question

I have a web project in .NET Framework 4.6.1 and with Angularjs 1.2.29. Currently it perfectly serves our customers in Brazil.

The point is that the product has evolved, and now we are going to serve other countries, but each country, in addition to many things in common, also has some particularities.

A page would look like the illustration below:

Currently, we are working with conditions within the page, but this has brought complexity and difficult code to maintain:

<form ng-controller="serviceController">

    <h1>{{message}}</h1>

    <div class="row form-group">
        <input type="text" class="form-control" name="code" id="code" placeholder="Código" />
    </div>
    <div class="row form-group">
        <input type="text" class="form-control" name="serviceName" id="serviceName" placeholder="Nome do Serviço" />
    </div>
    <div class="row form-group">
        <select class="form-control" name="type" id="type">
            <option value="0">Principal</option>
            <option value="1">Taxa</option>
        </select>
    </div>
    <div class="row form-group">
        <select class="form-control" name="group" id="group">
            <option value="0">Solitários</option>
            <option value="1">Amigáveis</option>
        </select>
    </div>

    @if (ViewBag.CountryCode == "BR")
    {
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="ir" id="ir">
            <label class="form-check-label" for="ir">Possui imposto de renda?</label>
        </div>

    }
    else if (ViewBag.CountryCode == "CH")
    {
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="boleta" id="boleta">
            <label class="form-check-label" for="boleta">Exibir na boleta?</label>
        </div>
    }
    else if (ViewBag.CountryCode == "PY")
    {
        <div class="row form-group">
            <select class="form-control" name="iva" id="iva">
                <option value="0">Isento</option>
                <option value="5">5%</option>
                <option value="10">10%</option>
            </select>
        </div>
    }

</form>

1. There is some way to create components with Razor in the version of . NET Framework that we are using or the only way in our context would be with Angularjs?
2. Is there any other strategy used in the market to make the code easier to maintain and separate the context of each country’s implementation?

Answer 1

An alternative is to use sections. In the example quoted, we would have 4 separate files:

Index.cshtml

<form ng-controller="serviceController">

    <h1>{{message}}</h1>

    <div class="row form-group">
        <input type="text" class="form-control" name="code" id="code" placeholder="Código" />
    </div>
    <div class="row form-group">
        <input type="text" class="form-control" name="serviceName" id="serviceName" placeholder="Nome do Serviço" />
    </div>
    <div class="row form-group">
        <select class="form-control" name="type" id="type">
            <option value="0">Principal</option>
            <option value="1">Taxa</option>
        </select>
    </div>
    <div class="row form-group">
        <select class="form-control" name="group" id="group">
            <option value="0">Solitários</option>
            <option value="1">Amigáveis</option>
        </select>
    </div>

    @if (IsSectionDefined("Form"))
    {
        @RenderSection("Form")
    }

</form>

Index_br.cshtml

@{ 
    Layout = "index.cshtml";
}

@section Form {
    <div class="form-check">
        <input type="checkbox" class="form-check-input" name="ir" id="ir">
        <label class="form-check-label" for="ir">Possui imposto de renda?</label>
    </div>
}

Index_ch.cshtml

@{
    Layout = "index.cshtml";
}

@section Form {
    <div class="form-check">
        <input type="checkbox" class="form-check-input" name="boleta" id="boleta">
        <label class="form-check-label" for="boleta">Exibir na boleta?</label>
    </div>
}

Index_py.cshtml

@{
    Layout = "index.cshtml";
}

@section Form {
    <div class="row form-group">
        <select class="form-control" name="iva" id="iva">
            <option value="0">Isento</option>
            <option value="5">5%</option>
            <option value="10">10%</option>
        </select>
    </div>
}

Notice that in this way, all that is common is in the Index.cshtml, but what is specific can be separated into another View, and it is still possible to create several other sections on the same page.