Asp-for tag helper in Material Design Lite with .NET Core

Question

I'm trying to get the StatusId of the selected item in my list.

I have a list of status created with Material Design Lite:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select getmdl-select__fix-height">
    <input type="text" value="" class="mdl-textfield__input" id="statusList" asp-for="Status" readonly>
    <input type="hidden" value="" name="statusList" asp-for="StatusId">
    <i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i>
    <label for="statusList" class="mdl-textfield__label">Status</label>
    <ul for="statusList" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
        @foreach (var status in ViewBag.Status)
        {
            <li class="mdl-menu__item" data-val="@status.Id">@status.Name</li>
        }
    </ul>
</div>

I set the StatusId here:

<li class="mdl-menu__item" data-val="@status.Id">@status.Name</li>

And I noticed that the StatusId go to this input when I select an item in the list:

<input type="hidden" value="" name="statusList" asp-for="StatusId">

I added asp-for in it but it is not working. The value in the Controller after the submit is ZERO.

The asp-for="Status" in the following input works perfeclty and the bind to the Controller occurs perfectly:

<input type="text" value="" class="mdl-textfield__input" id="statusList" asp-for="Status" readonly>

Controller method:

public async Task<IActionResult> Create([Bind("StatusId,CNPJ,Name,BusinessName,State,City,Street,District,CEP,Observation,Phone,Cellphone,Email,Status")] Company company)
{}

CompanyStatus model:

public class CompanyStatus
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Company model:

public class Company
{
    public int Id { get; set; }
    public int StatusId { get; set; }
    public string CNPJ { get; set; }
    public string Name { get; set; }
    public string BusinessName { get; set; }
    public string State { get; set; }
    public string City { get; set; }
    public string Street { get; set; }
    public string District { get; set; }
    public string CEP { get; set; }
    public string Observation { get; set; }
    public string Phone { get; set; }
    public string Cellphone { get; set; }
    public string Email { get; set; }
    public string Status { get; set; }
}

Any ideas what I am doing wrong?

status.Id is not the same as StatusId. What does your model type look like? — poke
– poke, Commented Sep 2, 2018 at 21:56
Maybe the problem is the input type='hidden'? Does the bind occurs with hidden inputs? — gregoryp
– gregoryp, Commented Sep 2, 2018 at 22:01
Your input element’s value is "" – Do you ever change that value on the client side? Otherwise, it will stay empty, and the empty value will be deserialized into the default value for int which is zero. — poke
– poke, Commented Sep 2, 2018 at 22:06
@poke When I select an item in the list, the value is filled up with the selected value and in the hidden input, the Id is set to the value as well. — gregoryp
– gregoryp, Commented Sep 2, 2018 at 22:09

itminus · Accepted Answer · 2018-09-03 07:54:34Z

1

Let's review the your action method on server :

public async Task<IActionResult> Create([Bind("StatusId,CNPJ,Name,BusinessName,State,City,Street,District,CEP,Observation,Phone,Cellphone,Email,Status")] Company company)
{}

Here the Company Model expects fields of StatusId, Status , and so on .

However , the input TagHelper on the server-side

<input type="text" value="" class="mdl-textfield__input" id="statusList" asp-for="Status" readonly>
<input type="hidden" value="" name="statusList" asp-for="StatusId">

will be rendered into html tags as below when in browser :

<input type="text" value="" class="mdl-textfield__input" id="statusList" readonly="" name="Status">
<input type="hidden" value="" name="statusList" data-val="true" data-val-required="The StatusId field is required." id="StatusId">

Note that when rendered in browser , the name attribute of the hidden <input> element is statusList instead of statusId.

The reason is that your name property of the input TagHelper on the server side overrides the name attribute generated attribute by asp-for property .

As a result , the payload you send to server will be:

Status=your-status-name&statusList=1&__RequestVerificationToken=xxx

Since the server doesn't care about a statusList field , it will simply ignore it .

I'm not sure how your Material Design Lite and client scripts binds value to the input#statusId when user select a <ul>/<li> . But if you want to send the request by form , you should change your viewcode from :

<input type="hidden" value="" name="statusList" asp-for="StatusId">

to be :

<input type="hidden" value="" asp-for="StatusId">

edited Sep 3, 2018 at 7:54

answered Sep 3, 2018 at 7:42

itminus

25.5k2 gold badges63 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gregoryp Over a year ago

Yes, you're right. The problem is with the 'name' property. But if I remove that property, the Material Design Lite binding doesn't happen.

itminus Over a year ago

@perozzo Is it possible to change your ul[for='statusList'] (will be token by Material Design Lite) to ul[for='statusId'] , and set the input[name='statusId'] at the same time ?

gregoryp Over a year ago

Yes, it is possible. I did that and it worked like a charm. I was thinking if it can be a problem in the future because of the same name of all elements.

Collectives™ on Stack Overflow

Asp-for tag helper in Material Design Lite with .NET Core

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related