Почему kendoDatePicker отключен в модальной начальной загрузке - PullRequest
Новая
       2

Почему kendoDatePicker отключен в модальной начальной загрузке

0 голосов
/ 02 июля 2019

Я делаю проект asp.net mvc, и у меня есть представление, как показано ниже: 

 <div class="content-wrapper">
         <div class="bs-example wow fadeInUp animated" data-wow-delay=".5s" data-example-id="contextual-table" style="border: 1px solid #eee">
                <table class="table table-bordered" id="">
                    <tr style="background-color: #555555; color: white">

                        <th>
                            @Html.DisplayNameFor(model => model.contractId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Customer.IdentificationNo)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Device.DeviceId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Vehicle.Vin)
                        </th>
                        <th></th>
                    </tr>

                    @foreach (var item in Model)
                    {
                        <tr>
                            <th>
                                @Html.DisplayFor(modelItem => item.contractId)
                            </th>
                            <td>
                                @Html.DisplayFor(modelItem => item.Customer.IdentificationNo)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Device.DeviceId)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Vehicle.Vin)
                            </td>
                            <td>
                                <a class="anchorDetail btn btn-1 btn-info" onclick="ContractDetail(@item.Id)">جزئیات</a>
                            </td>
                        </tr>
                    }

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


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLable">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" id="myModalLable">Modal title</h5>
            </div>
            <div class="modal-body" id="myModalBody">
                ...
            </div>
        </div>
    </div>
</div>



<script>
    function ContractDetail(Id) {
        $.ajax({
            url: "/Contract/EditContract/",
            type: "Get",
            data: { Id: Id }
        }).done(function (result) {
            $("#myModal").modal();
            $("#myModalLable").html("ویرایش قرارداد");
            $("#myModalBody").html(result);
        });
    }
</script>

Я хочу вызвать действие с функцией jquery в этом представлении.Действие выглядит следующим образом: 

public ActionResult EditContract(int Id)
    {
        if (Id == 0)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Contract contract = db.Contract.Where(c => c.Id == Id && c.IsDeleted != true).Select(c => c).SingleOrDefault();

        if (contract == null)
        {
            return HttpNotFound();
        }
        return PartialView("EditContract", contract);
    }

Как видите, это действие возвращает частичное представление.Частичное представление выглядит следующим образом: 

    @model DataLayer.Contract
    @{
        Layout = null;
    }

    <body class="hold-transition register-page">
        <div class="register-box">
            <div class="register-logo">
                <b>ویرایش قرارداد</b>
            </div>

            <div class="register-box-body">


                @using (Ajax.BeginForm("EditContract", "Contract", FormMethod.Post, new AjaxOptions()
                {
                    OnSuccess = "success",
                    UpdateTargetId = "listUsers"

                }))
                {
                    @Html.AntiForgeryToken()
                    @Html.HiddenFor(model => model.IsDeleted)
                    @Html.HiddenFor(model => model.Fr_CustomerId)
                    @Html.HiddenFor(model => model.Fr_DeviceId)
                    @Html.HiddenFor(model => model.Fr_VehicleId)
                    @Html.HiddenFor(model => model.CustomerIdentificationNo)


                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.PublicId, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.PublicId, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.PublicId, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.CreateDate, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.CreateDate, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.CreateDate, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.RegistererUser, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.RegistererUser, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.RegistererUser, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.C_key, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.C_key, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.C_key, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.C_id, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.C_id, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.C_id, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.C_rev, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.C_rev, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.C_rev, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.contractId, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.contractId, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.contractId, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.deviceId, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.deviceId, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.deviceId, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.vehicleId, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.vehicleId, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.vehicleId, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.vid, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.vid, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.vid, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.cid, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.cid, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.cid, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.did, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.did, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.did, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-md-12 row">
                            @Html.LabelFor(model => model.CustomerIdentificationNo, htmlAttributes: new { @class = "control-label col-md-12" })
                        </div>
                        <div class="form-group has-feedback">
                            @Html.EditorFor(model => model.CustomerIdentificationNo, new { htmlAttributes = new { @disabled = "true", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.CustomerIdentificationNo, "", new { @class = "text-danger" })
                        </div>
                    </div>


                    <div class="form-group has-feedback">
                        @Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @class = "", placeholder = Html.DisplayNameFor(x => x.StartTime) } })
                        @Html.ValidationMessageFor(model => model.StartTime, "", new { @class = "text-danger" })
                    </div>
                    <div class="form-group has-feedback">
                        @Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { @class = "", placeholder = Html.DisplayNameFor(x => x.EndTime) } })
                        @Html.ValidationMessageFor(model => model.EndTime, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group has-feedback">
                        @Html.EditorFor(model => model.StartMilage, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.StartMilage) } })
                        @Html.ValidationMessageFor(model => model.StartMilage, "", new { @class = "text-danger" })
                    </div>

                    <div class="form-group has-feedback">
                        @Html.EditorFor(model => model.state, new { htmlAttributes = new { @class = "form-control", placeholder = Html.DisplayNameFor(x => x.state) } })
                        @Html.ValidationMessageFor(model => model.state, "", new { @class = "text-danger" })
                    </div>
                    <div class="row">
                        <a class="btn btn-warning" id="EditContract">ویرایش قرارداد</a>
                        <a class="btn btn-danger" id="DeleteContract">پاک کردن قرارداد</a>
                        <a class="btn btn-normal">بروز رسانی</a>
                    </div>
                }
            </div>
        </div>
    </body>






    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/Content/js/kendo.all.min.js"></script>

<script>
    $(document).ready(function () {
    $("#StartTime").kendoDatePicker();
        $("#EndTime").kendoDatePicker();
    });
</script>

Хотя модальное изображение появляется, почему календарь kendoDatePicker не открывается в модальном режиме?

Ответы [ 2 ]

0 голосов
/ 02 июля 2019

Проблема была в версии jquery. Моя проблема решена путем изменения 

<script src="code.jquery.com/jquery-1.9.1.min.js"></script>

в 

 <script src="code.jquery.com/jquery-migrate-3.0.0.min.js">
0 голосов
/ 02 июля 2019

Это проблема синхронизации с JS.Вам нужно запустить код DatePicker после модальной загрузки: 

...
$("#myModalBody").html(result);

// initialize kendo elements on partial
$("#StartTime").kendoDatePicker();
$("#EndTime").kendoDatePicker();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...