Different name and id when rendering input elements with HTML helpers

Progress® Telerik® UI for ASP.NET Core Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 27 Apr 2023 10:55 by ADMIN

palhal

Created on: 20 Apr 2023 09:00

Category: UI for ASP.NET Core

Type: Feature Request

Different name and id when rendering input elements with HTML helpers

When using the ASP.NET Core helpers for input elements, it shall be possible to specify separate id and name attributes.

Example
Currently, when rendering a checkbox:

Html.Kendo()
    .CheckBox()
    .Name("enable")

Results in:

<input id="enable" name="enable" type="checkbox" value="true" data-role="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">

As you can see, this sets both the id AND name attributes to the same string. For more advanced web pages, this is not sufficient. The id attribute must be unique within the the whole page, whereas name does not.

Suggested solution
Add a new InputName() helper method to explicitly set the name for all applicable form/input elements. This is possible with e.g. RadioGroup, but not with CheckBox, RadioButton, DropDownList, etc.

3 comments

ADMIN

Aleksandar

Posted on: 27 Apr 2023 10:55

Hello palhal,

Thank you for the additional details. I see your point and while achieving the desired result is currently possible, I will change the status of the Feature Request to Unplanned, to monitor the interest of the community for such a feature. If there is indeed interest in such configuration option we will consider it for future implementation. Until then you could use the approach suggested in my previous reply.

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

palhal

Posted on: 27 Apr 2023 05:38

Thanks for the feedback. I know it's not impossible to set a different id and name. I should probably have written that more clearly in the original post. This is a request for getting a more convenient way to do so.

For example:

@(Html.Kendo()
.CheckBox()
.Name("uniqueCheckboxID")
.InputName("enable")
)

is in my opinion much more cleaner than:

@(Html.Kendo()
.CheckBox()
.Name("enable")
.HtmlAttributes(new {id = "uniqueCheckboxID"})
)

InputName() exists for some other controls and is something I presume would be very trivial for the developers to implement.

Thanks for the link about the ASP.NET hidden input rendering. I actually noticed this last week and initially thought it might be a bug.

ADMIN

Aleksandar

Posted on: 27 Apr 2023 04:34

Hello palhal,

You are indeed correct - the Name configuration will set both the id and name attributes of the generated inputs. It is, however, possible to set a different id attribute by using the HtmlAttributes configuration method, for example:

@(Html.Kendo()
    .CheckBox()
    .Name("enable")
    .HtmlAttributes(new {id = "uniqueCheckboxID"})
)

@(Html.Kendo()
    .RadioButton()
    .Name("radio")
    .HtmlAttributes(new {id = "uniqueRadioID"})
)

@(Html.Kendo()
    .DropDownList()
    .Name("ddl")
    .HtmlAttributes(new {id = "myDdlId"})
)

The above would generate the following markup:

div class="k-repl-preview-wrapper k-body k-p-6">
  <input id="uniqueCheckboxID" name="enable" type="checkbox" value="true" data-role="checkbox" class="k-checkbox k-checkbox-md k-rounded-md">
  <input id="uniqueCheckboxID" name="enable" type="hidden" value="false">
  <script>
    kendo.syncReady(function() {
      jQuery("#uniqueCheckboxID").kendoCheckBox({});
    });
  </script>
  <input id="uniqueRadioID" name="radio" type="radio" data-role="radiobutton" class="k-radio k-radio-md">
  <script>
    kendo.syncReady(function() {
      jQuery("#uniqueRadioID").kendoRadioButton({
        "checked": false
      });
    });
  </script>
  <span title="" class="k-picker k-dropdownlist k-picker-solid k-picker-md k-rounded-md" unselectable="on" role="combobox" aria-expanded="false" tabindex="0" aria-controls="myDdlId_listbox" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-describedby="b8d988af-ffe0-4a5d-bba9-b355a15760a9" style="">
    <span id="b8d988af-ffe0-4a5d-bba9-b355a15760a9" unselectable="on" class="k-input-inner">
      <span class="k-input-value-text"></span>
    </span>
    <span role="button" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="select" type="button">
      <span class="k-icon k-i-caret-alt-down k-button-icon"></span>
    </span>
    <input id="myDdlId" name="ddl" type="text" value="" data-role="dropdownlist" style="display: none;">
  </span>
  <script>
    kendo.syncReady(function() {
      jQuery("#myDdlId").kendoDropDownList({});
    });
  </script>
</div>

As you can see, the id attributes are different than the name.

I am sure you have noted the two inputs generated for the CheckBox. This is indeed expected and is a behavior related to the HTML5 checkbox and the framework - checkboxes in HTML5 don't submit a value when they're unchecked. To enable a default value to be sent for an unchecked checkbox, the framework helpers and the Telerik UI for ASP.NET Core Helpers (TagHelper and HTML Helper) generate an additional hidden input for checkboxes.

Regards,
Aleksandar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.