我正在做一个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">×</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的日历？
答案 0 :(得分：0)
这是JS的计时问题。您需要在模式加载后运行datepicker代码：
...
$("#myModalBody").html(result);
// initialize kendo elements on partial
$("#StartTime").kendoDatePicker();
$("#EndTime").kendoDatePicker();
答案 1 :(得分：0)
问题出在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">