1

我在 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'
        }); 
        });

请注意，在我呈现从对控制器的调用中收到的响应后，我正在调用 datepicker。这是正在添加的部分内容（请忽略表的使用，我正在尝试重新创建另一部分中已经存在的内容网站的..

@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);
}

关于为什么日历图像不呈现的任何想法？

提前致谢

4

1 回答 1

1

你错过了这个showOn选项。

来自buttonImage 文档

当 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'
        });
于 2013-10-03T12:57:32.013 回答