Jquery datepicker仅在部分视图上第一次工作 [英] Jquery datepicker working the first time only on partial view
本文介绍了Jquery datepicker仅在部分视图上第一次工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是ASP.NET MVC5的新手 - 我正在为学校的一个项目工作，我有这个问题。
我打开一个MODAL来添加，编辑和查看客户端，我有一个BIRTH DATE文本框，我可以让它第一次使用日期选择器，然后当我将数据保存到数据库并尝试创建或编辑客户时，DatePicker没有显示日历。
在主视图中，我使用Serverside处理过滤，搜索和分页生成了带有数据表的客户端列表，这个工作正常。
我在这个表的顶部添加了一个底部来创建一个新用户，在表的行上我为Edit和View选项创建了一个新列。
现在我想关注新客户的流程，我想在这里找到问题我会用编辑选项解决问题。
这是我的主要观点
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>
<span class="glyphicon glyphicon-new-window"></span> 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 <span class="caret"></span></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>
推荐答案
（function（）{
assetListVM = {
dt：null，
init：function（）{
dt =
(function () { assetListVM = { dt: null, init: function () { dt =
（'＃cliente-data-table'）。DataTable（{
serverSide：true，
processing：true，
ajax：{
url：
@ Url.Action（ListClientes，clientes），
}，
栏目：[
{
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，
数据：Tel_Cliente，
可搜索：false，
可排序：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）{
返回'< a href =@ Url.Action（编辑，客户）？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]]，
}）;
}
}
//初始化数据表
assetListVM.init（）;
}）;
// Acciones para crear un nuevo cliente
('#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 =
("#btnCreateCliente").on("click", function () { var url =
这篇关于Jquery datepicker仅在部分视图上第一次工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
