-1

Tenho um projeto Web em .NET Framework 4.6.1 e com AngularJS 1.2.29. Atualmente ele atende perfeitamente aos nossos clientes do Brasil.

A questão é que o produto evoluiu, e agora vamos atender outros países, mas cada país, além de muitas coisas em comum, também tem algumas particularidades.

Uma página ficaria semelhante a ilustração abaixo:

Página Web

Atualmente, estamos trabalhando com condições dentro da página, mas isso tem trazido complexidade e um código difícil de manter:

<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. Existe alguma forma de criar componentes com razor na versão do .NET Framework que estamos utilizando ou a única forma em nosso contexto seria com AngularJS?
  2. Existe alguma outra estratégia utilizada no mercado para deixar o código de uma forma mais fácil de dar manutenção e que separe bem o contexto da implementação de cada país?

1 Resposta 1

-1

Uma alternativa é utilizar sections. No exemplo citado, teríamos 4 arquivos separados:

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>
}

Perceba que dessa forma, tudo que é comum fica no Index.cshtml, mas o que é específico pode ficar separado em outra View, e ainda é possível criar várias outras sections na mesma página.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .