Jquery calender is not working if the razor view is referenced to a view model instead of a model

Question

Hi I am facing a strange issue with Jquery.UI.combined package. I am using it to get a calendar for picking the dates in front end.

It is working very fine when I use it in a view where the view is connected directly with a model, but it does not work when the view is connected with a view model.

Consider the following example:

This is the controller

    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);
    }

This is the view Model

 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>();

    }
}

And this is the View:

 @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>
 }

Now if I connect the above view directly to a model, instead of view model then the calendar shows up, but in terms of view model it is not working.

And based on my project requirements, I need to reference my razor view to a view model.

This is my 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; }
}

why have you called you action method `New`? That is a word to avoid imho... — jazb, Oct 13 '18 at 13:03
@ershoaib, i just added the PM_Main_Repository. Kindly Check the above code. — Ahmad, Oct 14 '18 at 08:45
@Ahmad Where does the PM_Main_Repository get populated? In this example it looks like you just create a new instance of it in the constructor. If you put a breakdown on the `return View(vm); ` line, does your view model have everything you expect to be there? — Topher, Oct 14 '18 at 08:56
Try this => var vm = new PM_InsertEdit_ViewModel { pm_evt_catgrss = pm_evt_cats, prvncs = provinces, pm_main_rep = new PM_Main_Repository() }; return View(vm); — er-sho, Oct 14 '18 at 13:43
@ershoaib thanks for answering, but still unfortunately the date picker is not showing up. — Ahmad, Oct 25 '18 at 15:51
@Ahmad, try to inspect html for your "Estimated_Date" text box in browser and let me know the attributr value for "id" and "name" — er-sho, Oct 25 '18 at 16:37
@ershoaib thank you very much, i finally figured it out, by inspecting i noticed that the id="pm_main_rep_Estimated_Date" and i was calling the wrong id inside the script. Now it is working fine. Many thanks, it helped alot — Ahmad, Oct 25 '18 at 19:09
@Ahmad, I'll add this as answer to your question soon, you can mark the tick on left sode on answer to make it green :) — er-sho, Oct 26 '18 at 00:57
@ershoaib thank you for helping in this question, I'm facing a similar kind of situation please have a look, https://stackoverflow.com/questions/53029412/file-upload-button-not-working-properly-with-view-models-it-generates-an-error — Ahmad, Oct 28 '18 at 07:49
@Ahmad, today m not in office so I'll take a look on it tomorrow :) — er-sho, Oct 28 '18 at 08:58
@ershoaib could you please answer this question. https://stackoverflow.com/questions/53084982/how-to-access-specific-rows-and-insert-values-into-specific-columns-of-a-table-i — Ahmad, Oct 31 '18 at 13:57
@Ahmad, i am not getting any response from questioner to my answer in above link... — er-sho, Nov 02 '18 at 13:40

score 0 · Accepted Answer · answered Oct 26 '18 at 09:46

As from the above comments.

You need to pass pm_main_rep to your View in your New action method like

var vm = new PM_InsertEdit_ViewModel
{
    pm_main_rep = new PM_Main_Repository(),     //<---
    pm_evt_catgrss = pm_evt_cats,
    prvncs = provinces,                
};

And id attribute for your input field where you are trying to bind datepicker is pm_main_rep_Estimated_Date and you bind datepicker to Estimated_Date. So change your script like.

<script type="text/javascript">

$(function (){
    $('#pm_main_rep_Estimated_Date').datepicker({
        dateFormat: "dd/MM/yy",
        showOn: "both",
        buttonText : "Select"
    });
});

</script>

Jquery calender is not working if the razor view is referenced to a view model instead of a model

1 Answers1