[英]Jquery calender is not working if the razor view is referenced to a view model instead of a model
嗨,我遇到了一个Jquery.UI.combined包的奇怪问题。 我正在使用它来获取日历,以便在前端选择日期。
当我在视图直接与模型连接的视图中使用它时,它工作得很好,但是当视图与视图模型连接时,它不起作用。
考虑以下示例:
这是控制器
public ActionResult New()
{
var pm_evt_cats = _context.pm_events_catgrs.ToList();
var provinces = _context.prvncs.ToList();
var vm = new PM_InsertEdit_ViewModel
{
pm_evt_catgrss = pm_evt_cats,
prvncs = provinces,
};
return View(vm);
}
这是视图模型
public class PM_InsertEdit_ViewModel
{
public PM_Main_Repository pm_main_rep { get; set; }
public List<PM_Event_Categories> pm_evt_catgrss { get; set; }
public List<Provinces> prvncs { get; set; }
public PM_InsertEdit_ViewModel()
{
pm_main_rep = new PM_Main_Repository();
pm_evt_catgrss = new List<PM_Event_Categories>();
prvncs = new List<Provinces>();
}
}
这是视图:
@model Myproject.ViewModel.PM_InsertEdit_ViewModel
@{
ViewBag.Title = "New";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm("Store","PM"))
{
<div class="form-group">
@Html.LabelFor(a=> a.pm_main_rep.PM_Event_CategoriesId)
@Html.DropDownListFor(a=>a.pm_main_rep.PM_Event_CategoriesId, new
SelectList(Model.pm_evt_catgrss, "Id","type_of_event"), "Select a category", new { @class="form-control"})
</div>
<div class="form-group">
@Html.LabelFor(a => a.pm_main_rep.Estimated_Date)
@Html.TextBoxFor(a => a.pm_main_rep.Estimated_Date, new { @class = "form-control" })
</div>
<div class="form-group">
@Html.LabelFor(a => a.pm_main_rep.ProvincesId)
@Html.DropDownListFor(a => a.pm_main_rep.ProvincesId, new SelectList(Model.prvncs, "Id","name_of_province"), "Select a Province", new { @class = "form-control" })
</div>
<button class="btn btn-primary">Save</button>
}
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
@section scripts{
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript">
$(function (){
$('#Estimated_Date').datepicker({
dateFormat: "dd/MM/yy",
showOn: "both",
buttonText : "Select"
});
});
</script>
}
现在,如果我将上述视图直接连接到模型,而不是视图模型,则会显示日历,但是就视图模型而言,它不起作用。
根据我的项目需求,我需要将剃刀视图引用到视图模型。
这是我的Pm_main_repository
public class PM_Main_Repository
{
public int Id { get; set; }
public PM_Event_Categories PM_Evt_Cat { get; set; }
public int PM_Event_CategoriesId { get; set; }
public DateTime Estimated_Date { get; set; }
public Provinces provncs { get; set; }
public int ProvincesId { get; set; }
}
从以上评论。
你需要传递pm_main_rep
你View
你的New
的操作方法一样
var vm = new PM_InsertEdit_ViewModel
{
pm_main_rep = new PM_Main_Repository(), //<---
pm_evt_catgrss = pm_evt_cats,
prvncs = provinces,
};
而id
为您的输入字段,您试图绑定属性datepicker
是pm_main_rep_Estimated_Date
和绑定datepicker
来Estimated_Date
。 因此,像更改您的script
。
<script type="text/javascript">
$(function (){
$('#pm_main_rep_Estimated_Date').datepicker({
dateFormat: "dd/MM/yy",
showOn: "both",
buttonText : "Select"
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.