passing parameter datetime? in mvc with jquery

Question

Iam try pass a few parameters to controller with javasqcrip and jquery.

this is the code:

@using PagedList.Mvc;
@model PagedList.IPagedList<Universidad.Entidades.PER_PERSONAS>

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

    var titulo = ViewBag.Title = "Lista de personas";

    var listaTipoPersona = (IEnumerable<SelectListItem>)ViewBag.ListaTipoPersona;
}

@section Head
{
    <script src="/Scripts/bootstrap.js" type="text/javascript"></script>
    <link href="/Content/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-datepicker.js" type="text/javascript"></script>
    <link href="~/Content/bootstrap-datepicker.css" type="text/css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-select.js" type="text/javascript"></script>
    <link href="~/Content/bootstrap-select.css" type="text/css" rel="stylesheet" />
    <script src="~/Scripts/bootstrap-multiselect.js" type="text/javascript"></script>
    <link href="~/Content/bootstrap-multiselect.css" type="text/css" rel="stylesheet" />
}

@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $('.datepicker').datepicker({
                language: 'es',
                format: 'dd/mm/yyyy',
                autoclose: true
            });

            $('.selectpicker').selectpicker({
                style: 'btn-default btn-sm'
            });
        });


        $(document).ready(function () {
            $("#ddlTipoPersona").change(function () {
                debugger;
                FiltraPersonas();
            });
        });

        function FiltraPersonas() {

            var idTipoPersona = $("#ddlTipoPersona").val();
            var fechaInicio = $("#txtFechaIngresoDe").val();
            var fechaFin = $("#txtFechaIngresoHasta").val();
            var idPersona = $("#txtIdLinkPersona").val();

            var path = '@Url.Action("EnlistarPersonas", "Personas")' + '?idTipoPersona=' + idTipoPersona + '&idPersona=' + idPersona + '&fechaInicio=' + fechaInicio + '&fechaFin=' + fechaFin + '&page=1';
            window.location.href(path);
        }
    </script>
}
<br />
<h3>@titulo</h3>
<br />
<div class="form-group row form-group input-group-sm" style="margin: 5px; padding: 10px;">
    <div class="row">
        <div class="row" style="margin: 0 0 0 0; padding: 0 0 0 0;">
            <div class="form-group col-lg-offset-3 col-md-6">
                <div class="input-group input-group-sm">
                    @Html.Label("Fecha Ingreso de", new { @class = "input-group-addon" })
                    @Html.TextBox("txtFechaIngresoDe", null, new { @class = "form-control datepicker" })
                    @Html.Label("Hasta", new { @class = "input-group-addon" })
                    @Html.TextBox("txtFechaIngresoHasta", null, new { @class = "form-control datepicker" })
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="row" style="margin: 0 0 0 0; padding: 0 0 0 0;">
            <div class="form-group input-group-sm form-group-sm">
                <div class="col-lg-offset-2 col-md-4">
                    <div class="input-group">
                        @Html.Label("No de Persona", new { @class = "input-group-addon" })
                        @Html.TextBox("txtIdLinkPersona", null, new { @class = "form-control" })
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        @Html.Label("Tipo de Persona", new { @class = "input-group-addon" })
                        @Html.DropDownList("ddlTipoPersona", listaTipoPersona, new { @class = "selectpicker", data_live_search = true })
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br />
<div>
    <table class="table">
        <tr>
            <th>
                Id
                @*@Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })*@
            </th>
            <th>
                Nombre
            </th>
            <th>
                Apellido Paterno
                @*@Html.ActionLink("Enrollment Date", "Index", new { sortOrder = ViewBag.DateSortParm, currentFilter = ViewBag.CurrentFilter })*@
            </th>
            <th>
                Apellido Materno
            </th>
            <th>
                Fecha de ingreso
            </th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ID_PER_LINKID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.NOMBRE)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.A_PATERNO)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.A_MATERNO)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FECHAINGRESO)
                </td>
            </tr>
        }
    </table>

    <br />
    Pagina @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) De @Model.PageCount

    @Html.PagedListPager(Model, page => Url.Action("EnlistarPersonas", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
</div>

and the controller is

    [SessionExpireFilter]
    public async Task<ActionResult> EnlistarPersonas(int? page, DateTime? fechaInicio, DateTime? fechaFin, int? idTipoPersona, string idPersona)
    {
        Sesion();

        var sesion = (Sesion)Session["Sesion"];
        var servicioPersonas = new SvcPersonas(sesion);

        List<PER_PERSONAS> listaPersonas;

        if (fechaInicio == null && fechaFin == null && idPersona == null && idTipoPersona == null)
        {
            listaPersonas = await servicioPersonas.ObtenListaPersonas();
        }
        else
        {
            listaPersonas = await servicioPersonas.ObtenListaPersonasFiltro(idPersona, fechaInicio, fechaFin, idTipoPersona);
        }

        var listaTipoPersona = await servicioPersonas.ObtenCatTipoPersona();

        var enlistarTipoPersona = listaTipoPersona.Select(c => new SelectListItem
        {
            Value = c.ID_TIPO_PERSONA.ToString(CultureInfo.InvariantCulture),
            Text = c.TIPO_PERSONA
        }).ToArray();

        ViewBag.ListaTipoPersona = enlistarTipoPersona;

        const int pageSize = 7;
        var pageNumber = (page ?? 1);

        return View(listaPersonas.ToPagedList(pageNumber, pageSize));
    }

In the request y fill all the fiels and javascrip senden,in the controller the variable fechaInicio resive well the parameter but for some reason fechaFin always resive null in the controller action.

why is the problem?

Answer 1

There are a lot of tricks to play with dates on MVC, as you can see here and here .

Since you are not using a model, I suggest you to receive dates as string, changing your controller to:

using System.Globalization;
...

public async Task<ActionResult> EnlistarPersonas(int? page, string fechaInicio, string fechaFin, int? idTipoPersona, string idPersona)
{
    DateTime? fInicio = null;
    if (!string.IsNullOrEmpty(fechaInicio))
    {
        DateTime.TryParseExact(fechaInicio, "dd/MM/yyyy", CultureInfo.InvariantCulture, DateTimeStyles.None, out fInicio))
    }

    DateTime? fFin = null;
    if (!string.IsNullOrEmpty(fechaFin))
    {
        DateTime.TryParseExact(fechaFin, "dd/MM/yyyy", CultureInfo.InvariantCulture, DateTimeStyles.None, out fFin))
    }

    ... The rest of your controller
}

Also, you need to encode the bars on the URL:

var path = '@Url.Action("EnlistarPersonas", "Personas")' + '?idTipoPersona=' + idTipoPersona + '&idPersona=' + idPersona + '&fechaInicio=' + encodeURIComponent(fechaInicio) + '&fechaFin=' + encodeURIComponent(fechaFin) + '&page=1';