Get combo box selected index on post in a Razor page

[FIMS Computing Services FIMS - UWO]

Hi,

I am trying to get the id of the selected entry in a combo box on a Razor page.

I modelled the code on the DatePicker example from the Razor examples.

I added a DatePicker to my page along with my Combo box.

The page loads and the combo box loads its entries. When I make a selection, the page does a post and my OnPost handler is called.

The value for the DatePicker is there but the ComboBox returns a null value.

I have enclosed screen shots of my cshtml and cshtml.cs pages. The DatePicker and ComboBox are setup identically as far as I can tell.

Any suggestions on what I might be doing wrong. 

Thanks,

Charlotte

[FIMS Computing Services FIMS - UWO]

 <form method="post">

        @(Html.Kendo().DateTimePicker()
            .Name("SelectedDate")
            .Value(Model.SelectedDate)
    )

        @(Html.Kendo().ComboBox()
            .Name("SelectedCommittee")
            .Value(Model.SelectedCommittee)
            .DataTextField("ShortName")
            .DataValueField("CommitteeId")
            .AutoBind(true)
            .HtmlAttributes(new { style = "width:50%;padding-left:25%;" })
            .Events( e => e
                        .Select(@<text>
                            function() {
                                $("form").submit();
                            }
                         </text>)
            )
            .DataSource(ds => 
            { 
                ds.Ajax()
                    .ServerOperation(true)
                    .Read(r => r.Url("/Availability/ClassesForTerm?handler=Read").Data("forgeryToken"));
            }

            )
        )


    </form>

  public void OnPost(DateTime? selectedDate, String? selectedCommittee)
        {
            SelectedDate = selectedDate;
            SelectedCommittee = selectedCommittee;

 

[Alexander]

Hi Charlotte,

I see the current thread is a duplicate of a support ticket where I have already provided an answer. I am posting the solution here as well so that members of the community can benefit from the information too. 

Тhe select event is fired when an item from the popup is selected by the useр, but before setting the value for the component. Therefore the selected value won't be submitted when posting the form. I may suggest using the change event instead. In comparison to the select event, the change event is fired when the value of the widget is changed by the user.

You can achieve the desired result by changing from a select event to a change instead. For example:

Form:

<form method="post">
    @(Html.Kendo().DateTimePicker()
            .Name("SelectedDate")
            .Value(Model.Sample.SelectedDate)
    )
    @(Html.Kendo().ComboBox()
            .Name("SelectedCommittee")
            .Value(Model.Sample.SelectedCommittee)
            .DataTextField("ShortName")
            .DataValueField("CommitteeId")
            .Events( e => e
                        .Change(@<text>
                            function() {
                                $("form").submit();
                            }
                         </text>)
            )
            .HtmlAttributes(new { style = "width:50%;padding-left:25%;" })
            .DataSource(ds =>
            {
                ds.Ajax()
                    .ServerOperation(true)
                    .Read(r=>r.Url("/Index/?handler=Read").Data("forgeryToken"));
            }

            )
        )

</form>

IndexModel:

public class IndexModel : PageModel
{
    public SampleModel Sample { get; set; }

    public void OnGet()
    {
        Sample = new SampleModel()
        {
            SelectedDate = DateTime.Now,
            SelectedCommittee = "2"
        };
    }
    public JsonResult OnPostRead([DataSourceRequest] DataSourceRequest request)
    {
        var committees = new List<CommitteeViewModel>()  //model for the ComboBox
        {
            new CommitteeViewModel(){ CommitteeId=1,ShortName="Mark"},
            new CommitteeViewModel(){ CommitteeId=2,ShortName="George"},
            new CommitteeViewModel(){ CommitteeId=3,ShortName="Michael"}
        };
        return new JsonResult(committees.ToDataSourceResult(request));
    }
    public void OnPost(DateTime selectedDate, string selectedCommittee)
    {
        Sample = new SampleModel()
        {
            SelectedDate = selectedDate,
            SelectedCommittee = selectedCommittee
        };
    }

}

Also, you can review the ComboBox Events Demo which shows some of the sequences for the ComboBox events.