Mandatory property in Model

[Maurizio]

Hello Telerik,

I'm having some trouble implementing the scenario I need (not a very complex one, indeed), which is the following.

I use the Policy class as Model, which contains a Contractor property, marked with [Required] attribute. The Contractor class contains the "Id" and "Name" properties. On the View, I need to add a DropDownList which loads and displays the available contractors list (only when the user opens it), stores the selected contractor, validates it (it is mandatory), and keeps it persistently stored also when refreshing the page (e.g. after a callback which notifies failed validations on the page).

On the View I added:

<td>
    @(Html.Kendo ( ).DropDownListFor ( model => model.Contractor )
      .DataTextField ( "Name" )
      .DataValueField ( "Id" )
      .HtmlAttributes ( new { style = "width: 200px;", id = "contractorComboBox" } )
      .AutoBind(false)
      .DataSource ( source =>
      {
          source.Read ( read => read.Action ( "searchcustomers", "customer" ) ).ServerFiltering ( true );
      } )
    )
</td>
<td>
    @Html.ValidationMessageFor(model => model.Contractor, "", new { @class = "text-danger" })
</td>

 

The SearchCustomers method on the Customer controller simply retrieves a list of available Customer instances.

With this code, the list is correctly retrieved and bound, and also the validation appears. Unfortunately, when some data is selected in the dropdown, it is not posted on the Controller (the Contractor property is null). Furthermore, when the page is refreshed, also the error message "The value '3' is invalid" appears in the validation field.

Could you please give me a hand to understand what I am doing wrong?

Thank you

[Dimitar]

Hello Maurizio,

In general, the Kendo UI DropDownList uses a simple <input> element under the hood. The input element holds the content received in DataValueField as its value. That being said, when the form is submitted, the input value is posted to the controller end-point. What this means is that the end-point expects to receive an integer and should work successfully on your end by modifying the page view model as so:

public class HomeViewModel
{
  public int ContractId { get; set; }
}

In case you would like to send the DropDownList's data item to the server(the entire Contractor object), then this could be achieved through ajax:

<script>
    $("#formSubmit").click(function (e) {
        e.preventDefault();

        var ddl = $("#ContractorId").data("kendoDropDownList");

        $.ajax({
            url: "/Home/Index",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({ Contractor: ddl.dataItem(), ContractorId: ddl.value() })
        })
    });
</script>

I am also attaching an ASP.NET MVC solution, where the above described approach with ajax is demonstrated. You will notice that the Model has both Contract and ContractId properties and both of them are received successfully on the server when the form is submitted.

Concerning the validation issues, I would suggest to check out the following documentation article, where different validation scenarios in ASP.NET MVC are covered in details.

Regards,
Dimitar
Progress Telerik

[Maurizio]

Hi Dimitar,

Thank you for your answer and the attached sample project.

With some refactoring, this approach should suit my needs.

Regards