This is a migrated thread and some comments may be shown as answers.

Mandatory property in Model

2 Answers 31 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Maurizio
Top achievements
Rank 1
Maurizio asked on 09 Jul 2018, 09:10 AM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 11 Jul 2018, 08:44 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Maurizio
Top achievements
Rank 1
answered on 13 Jul 2018, 07:29 AM

Hi Dimitar,

Thank you for your answer and the attached sample project.

With some refactoring, this approach should suit my needs.

Regards

 

Tags
DropDownList
Asked by
Maurizio
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Maurizio
Top achievements
Rank 1
Share this question
or