如果將剃刀視圖引用到視圖模型而不是模型，則jQuery calender無法正常工作

Question

嗨，我遇到了一個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; }
}

Answer 1

從以上評論。

你需要傳遞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>