JQuery 日期选取器在将日历图像动态添加为分部视图的一部分后不呈现该图像
本文关键字:图像 视图 一部分 选取 日期 添加 动态 日历 JQuery | 更新日期: 2023-09-27 18:33:56
我在C# .Net Framework 3.5中有一个MVC Razor页面。
该页面要求用户能够在单击"添加票价"按钮时动态添加(航班(项目。 这些项目存储在整个页面的整体模型中的列表中。 单击按钮时,我调用一些序列化表单的 javascript(因此我可以访问模型(,将一个新项目添加到模型中的列表,并且该项目以部分表示,然后我将其附加到主页中的div。
但是,我遇到了一个问题,因为我正在使用 JQuery 日期选择器,虽然这在功能上工作正常(即当您单击它时,会弹出一个日历,您可以选择一个日期(,但实际的日历按钮没有在我的输入旁边呈现?
这是我尝试将部分视图添加到其中的形式。.
@using (Html.BeginForm("ManualFlight", "ShoppingBasket", FormMethod.Post, new {@class="manualFlightForm" }))
{
<div id="shoppingBasketManualFlight" class="whiteCanvas">
<div class="ManualFlightDetails">
<div class="ManualFlightFareContainer"></div>
</div>
<div class="buttonPanel">
<div>
<a class="button borderlessButton" onclick="shoppingBasketAddFare(); return false;">Add Fare</a>
</div>
</div>
</div>
}
这是我从onclick调用的javascript:
$.ajax({
type: "POST",
data: $('form.manualFlightForm').serialize(),
url: "/ShoppingBasket/ShoppingBasketAddFare",
cache: false,
traditional: true
}).done(function (responseHtml) {
$(".ManualFlightFareContainer").append(responseHtml);
$('.t2Datepicker').datepicker({
minDate: '+1d',
defaultDate: '+1d',
changeMonth: true,
buttonImage: '/App_Themes/Travel2/Images/calendar_icon.png',
changeYear: true,
dateFormat: 'dd/mm/yy',
maxDate: '+3y'
});
});
注意 在将从调用控制器收到的响应呈现后,我正在调用日期选取器。这是正在添加的部分(请忽略表格的使用,我正在尝试重新创建站点另一部分中已经存在的东西。
@model Travel2.WebUI.ViewModels.ShoppingBasket.ShoppingBasketManualFlightViewModel
<div class="shoppingBasketManualFlightFare">
<table id="tblManualFlight">
<thead>
<tr>
<th rowspan="2">Passenger Type</th>
<th colspan="2">Departure Details</th>
<th colspan="2">Arrival Details</th>
<th rowspan="2">Flight No.</th>
<th rowspan="2">Class</th>
<th rowspan="2">Cost</th>
<th rowspan="2">Sale Price</th>
<th rowspan="2">Commission</th>
<th rowspan="2">PEX</th>
</tr>
<tr>
<th>IATA</th>
<th>Date & Time</th>
<th>IATA</th>
<th>Date & Time</th>
</tr>
</thead>
<tr>
<td class="paxType middle">
@Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].PassengerType, ViewBag.PassengerTypes as IEnumerable<SelectListItem>)
</td>
<td class="iata">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].DepartureIATA)
</td>
<td class="dateTime">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].DepartureDate, new { Class="t2Datepicker" })
@Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].DepartureHour, ViewBag.Hours as IEnumerable<SelectListItem>)
@Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].DepartureMinute, ViewBag.Minutes as IEnumerable<SelectListItem>)
</td>
<td class="iata">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].DestinationIATA)
</td>
<td class="dateTime">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].DestinationDate, new { Class = "t2Datepicker" })
@Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].DestinationHour, ViewBag.Hours as IEnumerable<SelectListItem>)
@Html.DropDownListFor(m => m.Fares[Model.Fares.Count - 1].DestinationMinute, ViewBag.Minutes as IEnumerable<SelectListItem>)
</td>
<td class="middle">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].FlightNumber)
</td>
<td class="middle">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].FlightClass)
</td>
<td class="middle">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].Cost)
</td>
<td class="middle">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].SalePrice)
</td>
<td class="middle">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].Commission)
</td>
<td class="middle">
@Html.TextBoxFor(m => m.Fares[Model.Fares.Count - 1].PEX)
</td>
</tr>
</table>
</div>
为了完成,下面是控制器中处理向模型添加新实例并返回部分视图的方法。
[HttpPost, STPAuthorize]
public ActionResult ShoppingBasketAddFare(ShoppingBasketManualFlightViewModel model)
{
if (model.Fares == null)
{
model.Fares = new List<ShoppingBasketManualFlightFareViewModel>();
}
ViewBag.PassengerTypes = GetPassengerTypes();
ViewBag.Hours = GetHours();
ViewBag.Minutes = GetMinutes();
model.Fares.Add(new ShoppingBasketManualFlightFareViewModel());
return PartialView("ShoppingBasketAddFare", model);
}
关于为什么日历图像不呈现的任何想法?
提前致谢
您缺少showOn
选项。
从按钮图像文档
用于在显示时显示日期选取器的图像的 URL 选项设置为"按钮"或"两者"。
显示文档
$('.t2Datepicker').datepicker({
minDate: '+1d',
defaultDate: '+1d',
changeMonth: true,
buttonImage: '/App_Themes/Travel2/Images/calendar_icon.png',
changeYear: true,
dateFormat: 'dd/mm/yy',
maxDate: '+3y',,
showOn:'both'
});