This is a curious case I have not figure out yet and has keeping me from using tag helpers for good.
I have a search form with lots of dropdown lists and options. Some of them I tried to do using tag helpers instead of HTML Helpers, since its syntax is more readable. And I realized, tag helpers does not bind correctly to the model, so when the controller action is invoked, the values are not passed. However, sometimes also HTML helpers stop working without apparent reason.
And this is my case right now:
I have a Search Model class like this:
public class Search : ISearch
{
public string Query { get; set; }
public int Page { get; set; }
public int SelectedDecision { get; set; }
public int SelectedSeccion { get; set; }
public int SelectedAccion { get; set; }
public int SelectedCampo { get; set; }
[Display(Name="Desde: ")]
[DataType(DataType.Date)]
public DateTime? DateRangeStart { get; set; }
[Display(Name = "Hasta: ")]
[DataType(DataType.Date)]
public DateTime? DateRangeEnd { get; set; }
public string Ponente { get; set; }
public string Demandante { get; set; }
//prperties for advanced search interface controls
public List<Decision> Decisiones { get; set; }
public List<Seccion> Secciones { get; set; }
public List<Accion> Acciones { get; set; }
public List<Campo> Campos { get; set; }
}
The View is like this: I think you should know the problem arises with the DateRangestart and DateRangeEnd properties.
@model AbAWeb.Models.Search
<form class="container" asp-action="Search" id="searchForm">
<div class="row">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="input-group col-lg-12">
<input asp-for="Query" class="form-control" style="border-right: 0px;" placeholder="Busca en las relatorías" />
<span class="input-group-btn">
<button class="btn btn-search-box" type="submit">
<span class="fas fa-search"></span>
</button>
</span>
</div>
<div class="input-group col-lg-12">
<div class="row">
<div class="col-lg-12">
<select asp-for="SelectedDecision" class="selectpicker" data-style="dropdown-select" data-width="fit"
asp-items="@(new SelectList(Model.Decisiones, "DecisionId", "DecisionName"))"></select>
<select asp-for="SelectedSeccion" class="selectpicker" data-style="dropdown-select" data-width="fit"
asp-items="@(new SelectList(Model.Secciones, "SeccionId", "SeccionName"))"></select>
<select asp-for="SelectedAccion" class="selectpicker" data-style="dropdown-select" data-width="fit"
asp-items="@(new SelectList(Model.Acciones, "AccionId", "AccionName"))"></select>
<select asp-for="SelectedCampo" class="selectpicker" data-style="dropdown-select" data-width="fit"
asp-items="@(new SelectList(Model.Campos, "CampoId", "CampoName"))"></select>
<div class="btn-group">
<button class="btn btn-dates" role="button" type="button" id="dateRange" data-toggle="modal" data-target="#exampleModal">
//HERE IT IS THE BUTTON LABEL
</button>
</div>
<div class="btn-group">
<button class="btn btn-dates" type="button" onclick="toggleAdvancedOptions();">Opciones avanzadas</button>
</div>
</div>
</div>
<!--ADVANCED OPTIONS-->
<div id="advancedOptionsPanel" class="col-12 offset-top" style="display:none;">
<div class="card" style="width:100%;">
<div class="card-header">
<h4 class="card-title">Opciones avanzadas</h4>
<h5 class="card-subtitle mb-2 text-muted">Escoja diferentes opciones para refinar su búsqueda.</h5>
</div>
<div class="card-body">
<div class="col">
<div class="form-group">
<label>Magistrado Ponente</label>
<input asp-for="Ponente" class="form-control" placeholder="escriba el nombre o parte del nombre del magistrado ponente" />
@*@Html.TextBoxFor(m=>m.Ponente, new { @class = "form-control", @placeholder = "escriba el nombre o parte del nombre del magistrado ponente" })*@
@*<small id="ponenteHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>*@
</div>
<div class="form-group">
<label>Demandante</label>
<input asp-for="Demandante" class="form-control" placeholder="escriba el nombre o parte del nombre del demandante" />
@*@Html.TextBoxFor(m=>m.Ponente, new { @class = "form-control", @placeholder = "escriba el nombre o parte del nombre del magistrado ponente" })*@
@*<small id="ponenteHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>*@
</div>
</div>
</div>
<div class="card-footer">
<a href="#" class="card-link" onclick="toggleAdvancedOptions();">Aceptar</a>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@*<h5 class="modal-title" id="exampleModalLabel">Periodo</h5>*@
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">Cerrar</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row offset-top">
<div class="col-4">
@Html.LabelFor(m => m.DateRangeStart)
</div>
<div class="col">
@Html.TextBoxFor(m => m.DateRangeStart, "{0:dd/MM/yyyy}", new { @id = "drs" })
</div>
</div>
<div class="row offset-top">
<div class="col-4">
@Html.LabelFor(m => m.DateRangeEnd)
</div>
<div class="col">
@Html.TextBoxFor(m => m.DateRangeEnd, "{0:dd/MM/yyyy}", new { @id = "dre" })
@*<input asp-for="DateRangeEnd" asp-format="{0:dd/MM/yyyy}" type="text" id="dre" />*@
</div>
</div>
<div class="row offset-top">
<div class="col offset-4">
<a href="#" onclick="clearDates();">Toda la historia</a>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
@*<button type="button" class="btn btn-primary">Aceptar</button>*@
</div>
</div>
</div>
</div>
<div class="col-md-offset-2 col-md-10">
<span asp-validation-for="Query" class="text-danger"></span>
</div>
<input type="hidden" asp-for="Page" id="pageIndex" />
</div>
</div>
</form>
As you can see I have tried with taghelpers and htmlhelpers. Right now, only DateRangeStart property is passing through to the controller Method. DateRangeEnd keeps passing as null.
I have done some changes in code, but not with that particular part because it was working fine and it is working fine on production.
So, first I want to know what could be wrong in DateRangeEnd HTML helper. Also, why sometimes taghelpers doesnot bind but htmlhelpers does.
UPDATE
I just change both DateRange textbox for html helpers to taghelpers, and I have the same behavior. Only DateRangeStart value is passed, DateRangeEnd is set to null.
UPDATE 2
I went to another workstation and check if it was working, and it was. I copy all the changes I did before, none of them touching the lines of code of that particular property. And it worked ok.
then I came back to my house workstation, updated and sync all commits. And in this machine the problems arises again. Onlu that property id not syncing here debugging on chrome or Edge it happens the same.
