Click here to Skip to main content
15,942,934 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am new on ASP.NET MVC5 - I am working in a project for the school and I have this problem.

I am opening a MODAL to add ,Edit and View a client, I have a BIRTH DATE text box, I can make it work the date picker the first time, Then when I saved the data to the DB and Try to create or edit a customer, DatePicker is not showing the calendar.

On the main view I generated the list of clients with datatables using Serverside processing for filtering, searching and Paging, this is working ok.

I added a bottom at the top of this table to create a new users and on the rows of the table I create a new column for the options Edit and View.

For now I would like to focus on the process of new customer, I guess finding the issue here I will fix the issue with the Edit option.

This is my main view


 @model IEnumerable<aseguradorasweb.models.cliente>



    <div class="row">
        <div class="col-md-12">
            <div class="container" style="width: 100%; margin-top: 2%">
                <div class="panel panel-primary list-panel" id="list-panel">
                    <div class="panel-heading list-panel-heading">
                        <h1 class="panel-title list-panel-title">Clientes</h1>
                    </div>
                    
                         Nuevo Cliente
                    
                    <div class="panel-body">

                        
                            @* Aqui va la tabla generada por AJAX*@
                        <table id="cliente-data-table" class="table table-striped table-bordered" style="width: 100%"></table>

                    </div>
                </div>
            </div>
        </div>
    </div>

    @section Scripts
    {

        
        

            var assetListVM;
            $(function () {
                assetListVM = {
                    dt: null,

                    init: function () {
                        dt = $('#cliente-data-table').DataTable({
                            "serverSide": true,
                            "processing": true,
                            "ajax": {
                                "url":
                                "@Url.Action("ListClientes", "clientes")",

                            },
                            "columns": [
                                {
                                    "title": "Nombre",
                                    "data": "NOM_Cliente",
                                    "searchable": true,
                                    "sortable": true
                                },
                                {
                                    "title": "Apellido",
                                    "data": "APE_Cliente",
                                    "searchable": true,
                                    "sortable": true
                                },
                                {
                                    "title": "RFC",
                                    "data": "RFC_Cliente",
                                    "searchable": false,
                                    "sortable": false
                                },
                                {
                                    "title": "Email",
                                    "data": "Email_Cliente",
                                    "searchable": false,
                                    "sortable": false
                                },
                                {
                                    "title": "Telefono",
                                    "data": "Tel_Cliente",
                                    "searchable": false,
                                    "sortable": false
                                },
                                {
                                    "title": "Celular",
                                    "data": "Cel_Cliente",
                                    "searchable": false,
                                    "sortable": false
                                },
                                {
                                "title": "Acciones",
                                "data": "ID_Cliente",
                                "searchable": false,
                                "sortable": false,
                                "render": function (data, type, full, meta) {
                                    return '<a href="@Url.Action("Edit","clientes")?id=' + data + '" class="EditCliente"><i class="glyphicon glyphicon-pencil"></i></a>  <a href="@Url.Action("Details","clientes")?id=' + data + '" class="DetailsCliente"><i class="glyphicon glyphicon-eye-open"></i></a>';
                                }
                                }
                            ],
                            "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                        });
                    }
                }
                // initialize the datatables
                assetListVM.init();

            });

            //Acciones para crear un nuevo cliente

            $("#btnCreateCliente").on("click", function () {

                var url = $(this).data("url");

                $.get(url, function (data) {
                    $('#createClienteContainer').html(data);
                    $('#createClienteModal').modal('show');
                    $("#FEC_NAC_Cliente").datepicker({
                    dateFormat: 'yy-mm-dd',
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-100:+0"
                });
                });

            });

            function CreateClienteSuccess(data) {

                if (data != "success") {
                    $('#createClienteContainer').html(data);
                    return;
                }
                $('#createClienteModal').modal('hide');
                $('#createClienteContainer').html("");
                //dt.ajax.reload();
                //location.reload();

            }
        
    }



<div class="modal fade" id="createClienteModal">
    <div id="createClienteContainer">
    </div>
</div>


When the bottom for NEW CLIENT is click, I go to the control and I get the Model

public ActionResult Create()
        {
            var model = new cliente();

            return View("_CreateClientePartial", model);
        }

and I show the partial view , The partial view is shown on a MODAL, inside of the modal I have TAB PAnels and the field call FEC_NAC_Cliente (Date of Birth).

Here is the Partial View



@model AseguradorasWeb.Models.cliente
@{
    Layout = null;
}



<div class="modal-dialog modal-lg">
    <div class="modal-content">
    <div class="modal-header">
        ×
        <h4 class="modal-title">Agregar Cliente</h4>
    </div>
    @using (Ajax.BeginForm("Create", "clientes", new AjaxOptions
    {   HttpMethod = "Post",
        OnSuccess = "CreateClienteSuccess",
        UpdateTargetId = "createClienteContainer",
        InsertionMode = InsertionMode.Replace
    }, new { @class = "form-horizontal", role = "form" }))

    {
        <div class="modal-body">

            <div class="col-lg-12">
                <div class="panel with-nav-tabs panel-primary">
                    <div class="panel-heading">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1primary">Generales</a></li>
                            <li><a href="#tab2primary">Direccion</a></li>
                            <li><a href="#tab3primary">Oficina y Contacto</a></li>
                            <li><a href="#tab4primary">Observaciones</a></li>
                            @*<li class="dropdown">
                                <a href="#">Dropdown </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#tab4primary">Primary 4</a></li>
                                    <li><a href="#tab5primary">Primary 5</a></li>
                                </ul>
                            </li>*@
                        </ul>
                    </div>
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="tab1primary">
                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                                <div class="form-group">
                                    @Html.LabelFor(model => model.NOM_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.NOM_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.NOM_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.APE_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.APE_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.APE_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.RFC_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.RFC_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.RFC_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.EMAIL_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.EMAIL_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.EMAIL_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.TEL_CASA_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.TEL_CASA_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.TEL_CASA_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.TEL_CEL_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.TEL_CEL_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.TEL_CEL_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.FEC_NAC_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.FEC_NAC_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.FEC_NAC_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.SEXO_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.DropDownListFor(model => model.SEXO_Cliente, new SelectList(new[] { "F", "M" }), new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.SEXO_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="tab2primary">
                                <div class="form-group">
                                    @Html.LabelFor(model => model.CALLE_NUM_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.CALLE_NUM_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.CALLE_NUM_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.COLONIA_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.COLONIA_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.COLONIA_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.CIUDAD_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.CIUDAD_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.CIUDAD_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.EDO_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @*@Html.EditorFor(model => model.EDO_Cliente, new { htmlAttributes = new { @class = "form-control" } })*@
                                        @Html.DropDownListFor(model => model.EDO_Cliente, new SelectList(new[] { "Aguascalientes","Baja California","Baja California Sur","Campeche","Chiapas","Chihuahua","Ciudad de Mexico","Coahuila","Colima","Durango","Guanajuato",
                    "Guerrero","Hidalgo","Jalisco","México","Michoacán","Morelos","Nayarit","Nuevo León","Oaxaca","Puebla","Querétaro","Quintana Roo","San Luis Potosi","Sinaloa","Sonora",
                    "Tabasco","Tamaulipas","Tlaxcala","Veracruz","Yucatán","Zacatecas" }), new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.EDO_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="tab3primary">

                                <div class="form-group">
                                    @Html.LabelFor(model => model.DIR_OFIC_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.DIR_OFIC_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.DIR_OFIC_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.TEL_OFIC_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.TEL_OFIC_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.TEL_OFIC_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.NOM_CONTAC_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.NOM_CONTAC_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.NOM_CONTAC_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.TEL_CONTAC_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.TEL_CONTAC_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.TEL_CONTAC_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                                <div class="form-group">
                                    @Html.LabelFor(model => model.CEL_CONTAC_Cliente, htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div class="col-md-10">
                                        @Html.EditorFor(model => model.CEL_CONTAC_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.CEL_CONTAC_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>

                            </div>
                            <div class="tab-pane fade" id="tab4primary">

                                <div class="form-group">
                                    @Html.LabelFor(model => model.Inactivo_Cliente, htmlAttributes: new { @class = "control-label col-md-3" })
                                    <div class="col-md-9">
                                        @Html.DropDownListFor(model => model.Inactivo_Cliente, new SelectList(new List<object> { new { value = 0, text = "Activo" }, new { value = 1, text = "Inactivo" } }, "value", "text", 2), new { @class = "form-control" })
                                        @Html.ValidationMessageFor(model => model.Inactivo_Cliente, "", new { @class = "text-danger" })
                                    
                                



                                <div class="form-group">
                                    @Html.LabelFor(model => model.Observaciones_Cliente, htmlAttributes: new { @class = "control-label col-md-3" })
                                    <div class="col-md-9">
                                        @Html.EditorFor(model => model.Observaciones_Cliente, new { htmlAttributes = new { @class = "form-control" } })
                                        @Html.ValidationMessageFor(model => model.Observaciones_Cliente, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            

                        
                    
                
            

       

            <div class="modal-footer">
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        Close
                        
                    </div>
                </div>
            </div>
        }
    




As I mention above the first time the DatePicker is working and I can see the calendar.

Once information is complete, I save the data using AJAX.BeginForm once the SUCCES is complete I call the function OnSuccess = "CreateClienteSuccess", This fucntion is on the Main View.

here is what I have on my controller to save the data



[HttpPost]
        public async Task<actionresult> Create(cliente newcliente)
        {
            if (!ModelState.IsValid)
                return View("_CreateClientePartial", newcliente);


            db.clientes.Add(newcliente);

            var task = db.SaveChangesAsync();
            await task;

            if (task.Exception != null)
            {
                ModelState.AddModelError("", "No se puede crear el cliente");
                return View("_CreateClientePartial", newcliente);
            }

            return Content("success");
        }


After information is save I return to my Main View.

The problem comes here If I try to add a new Client, this time the DatePicker is not showing the calendar.

After reading many cases here I understand is somethign about the DatePicker not being initialize again, I been trying many things but not luck.

Instead of put all the options I tried to make it worked, I rather just put the code that is workign fine and with your help find what I need.

BTW, I have on my _layout View all the scripts and css classes.

Thanks for your help.

What I have tried:

After reading many cases here I understand is somethign about the DatePicker not being initialize again, I been trying many things but not luck.

Instead of put all the options I tried to make it worked, I rather just put the code that is workign fine and with your help find what I need.</div></div></div></div></div></div></div></div></div></div>
Posted
Updated 2-Aug-17 14:51pm

1 solution

initialize your date picker in your partial view.

put script block like the following at the end of your partial view. it should work.

<script>
$(documement).ready(function(e){
$("#FEC_NAC_Cliente").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: "-100:+0"
});
}));
</script>
 
Share this answer
 
Comments
Member 13044878 4-Aug-17 12:35pm    
Hi Sung Shing.

Thanks for your help, but still the issue. Datepicker open fine the first time, second time it does not show, using Chrome and F12, there are not errors or somethig that can lead me to the error. Any oher idea?


Thanks
Sung Shing 25-Oct-17 0:37am    
when creating elements partial view, you will need to execute javascript to bind datepicker to the newly created input field. That's you have to put the javascript at the end of the partial view rendered.

without changing your code, run this javascript after your datepicker failed to show up. you will see what i mean.

$("#FEC_NAC_Cliente").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: "-100:+0"
});

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900