How to take the value of a Dropdownlist to choose the action to be executed

Question

I ask for your help to help me to assemble the following situation:

I have a structure in EF database first where I have a type that the user must select and after selecting this type in the dropdownlist it must trigger a corresponding action. For example:

If in Dropdonwlist is empty, nothing happens, if the user selects for example import file, must present in the view an input file where I will fetch the file and after clicking on Ubmit will perform the corresponding action in the controller.

Now if the user selects for example export, must present in the view a list of the files available for him to download, and if the user selects question for example, must assemble a form to send an email.

Today scaffold that VS has assembled, and already adapting set up the following structure in create:

public ActionResult Create()
{
  tbCliente usrCliente = _repositorio.ObterCliente(this.User.Identity.Name);
  SelectList(db.tbCliente, "IdCliente", "Nome");
  ViewBag.idTipoServico = new SelectList(db.TipoServicoes, "idTipoServico", "TipoServico1");
  return View();
}

---

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "idSolicitacao,idCliente,idTipoServico,idAviso,DataSolicitacao,AvisoEncaminhado,AvisoLido")] Solicitacao solicitacao)
{
  tbCliente usrCliente = _repositorio.ObterCliente(this.User.Identity.Name);
  if (ModelState.IsValid)
  {
    solicitacao.idCliente = usrCliente.IdCliente;
    solicitacao.idAviso = 2;
    solicitacao.AvisoEncaminhado = 1;
    solicitacao.AvisoLido = 0;
    solicitacao.DataSolicitacao = DateTime.Now;
    solicitacao.idStatus = 1;
    db.Solicitacaos.Add(solicitacao);
    db.SaveChanges();
    return RedirectToAction("Index");
  }
  SelectList(db.tbCliente, "IdCliente", "Nome", solicitacao.idCliente);
        ViewBag.idTipoServico = new SelectList(db.TipoServicoes, "idTipoServico", "TipoServico1", solicitacao.idTipoServico);
  return View(solicitacao);
}

---

In my view it is like this, but I would have to make it work the way I mentioned above.

@model FlowTec.Models.Solicitacao
@{
   ViewBag.Title = "Create";
   Layout = "~/Areas/Clientes/Views/Shared/_Layout.cshtml";
 }
 <h2>Create</h2>
 @using (Html.BeginForm()) 
 {
 @Html.AntiForgeryToken()
 <div class="form-horizontal">
    <h4>Solicitacao</h4>
    <hr />
    @Html.ValidationSummary(true)
    <div class="form-group">
        @Html.LabelFor(model => model.idTipoServico, "idTipoServico", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("idTipoServico", String.Empty)
            @Html.ValidationMessageFor(model => model.idTipoServico)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
}
<div>
   @Html.ActionLink("Back to List", "Index")
</div>

---

EF request table mapping.

namespace Empresa.Models
{
using System;
using System.Collections.Generic;

public partial class Solicitacao
{
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
    public Solicitacao()
    {
        this.tbArquivoes = new HashSet<tbArquivo>();
    }

    public int idSolicitacao { get; set; }
    public int idCliente { get; set; }
    public int idTipoServico { get; set; }
    public int idAviso { get; set; }
    public System.DateTime DataSolicitacao { get; set; }
    public byte AvisoEncaminhado { get; set; }
    public byte AvisoLido { get; set; }
    public int idStatus { get; set; }

    public virtual Aviso Aviso { get; set; }
    public virtual tbCliente tbCliente { get; set; }
    public virtual TipoServico TipoServico { get; set; }
    [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
    public virtual ICollection<tbArquivo> tbArquivoes { get; set; }
    public virtual StatusSolicitacao StatusSolicitacao { get; set; }
    }
}

Does anyone have any idea how I can put this together as dynamically as possible. What I need to do?

Answer 1

In short, jQuery, Ajax and Partials.

Explaining more, idTipoServico should be monitored by jQuery. Something like this:

$(document).on("change", "#idTipoServico", function() {
    switch ($(this).val()) {
        case 1:
            // Executa alguma coisa
            break;
        case 2:
            // Executa outra coisa
            break;           
        default:
            // Ação default
            break; 
    }
});

Each action will popular your screen in a different way. For each, it is good practice to implement a Action in Controller to return the Partial corresponding to the type of service:

    public ActionResult BlocoImportarArquivo()
    {
        return PartialView("_ImportarArquivo", new ViewModelDaImportacaoDeArquivo { Id = Guid.NewGuid() });
    }

In the Partial you put any and all HTML you need. Avoid putting JS not to become mess.

Returning to the code of switch, the following block inserts the HTML of a Partial generated in Controller within a <div> in View (this can be put into Partial, if you want):

$.get('/MeuController/BlocoImportarArquivo', function (template) {
    $("#div-do-bloco").append(template);
});