1

C# .Net Framework 3.5 に MVC Razor ページがあります。

このページでは、ユーザーが [運賃の追加] ボタンをクリックしたときに (フライト) 項目を動的に追加できるようにする必要があります。アイテムは、ページ全体の全体モデルのリストに格納されます。ボタンがクリックされると、フォームをシリアル化する JavaScript を呼び出して (モデルにアクセスできるように)、モデルのリストに新しいアイテムを追加すると、アイテムがパーシャルで表され、それが div に追加されます。メインページで。

ただし、JQuery datepicker を使用しているため、問題があります。これは機能的には問題なく動作しますが (つまり、クリックするとカレンダーがポップアップし、日付を選択できます)、実際のカレンダー ボタンは表示されません。入力の横にレンダリングされますか?

部分ビューを追加しようとしているフォームは次のとおりです..

    @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 オプションが「button」または「both」に設定されている場合に、日付ピッカーを表示するために使用する画像の URL。

showOn ドキュメント

$('.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 に答える