Applying a CSS Class to EditorFor in an ASPX C# view engine is not supported

I have created a user interface using basic HTML attributes and the Bootstrap framework. I am now looking to integrate Html.EditorFor() in place of

<input type="text" class="form-control" />
.

This is how I attempted to add it:

<%= Html.EditorFor(model => model.Name,new { @class = "form-control" }) %>

However, when I view my HTML page, it does not display as expected. Instead, it shows a standard HTML input field without the Bootstrap styling applied. Interestingly, the class attribute works well with Hrml.TextBoxFor().

I am using the ASPX C# View Engine rather than Razor.

After researching on Stack Overflow, it seems that my syntax is correct according to most answers.

How can I apply CSS classes to Html.EditorFor() successfully?

Answer №1

When using Html.EditorFor, you will be working with an additionalViewData object instead of the typical htmlAttributes used with TextBoxFor.

To implement attributes in Html.EditorFor, simply wrap your attributes in a separate object similar to how it is done in Razor. Update your call like this:

<%= Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" }}) %>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to start tiny-slider automatically once the video has ended?

I am currently using the tns-slider plugin and have a setup with 3 slides (2 photos and 1 video). <div class='tiny-slider'> <div class='slide slide1'> <div class='video-slide'> <video id=&qu ...

Launching a Popup in ASP.NET followed by a Redirect

I have a unique custom CSS/HTML popup lightbox along with a form that contains a button. My objective is, upon clicking the button: to open the popup followed by using Thread.Sleep and finally carry out a Response.Redirect to a different page. Do you th ...

Issue with setting a background image to a div in Next.js: not functioning as expected

I haven't used Next.js before and I'm having trouble setting a background image for a specific div. I have a folder named public in the root directory where I've placed the file art-thing.jpg. My styles.css is also in the root directory, whi ...

The issue with data targeting in Bootstrap 3 persists

header.php code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html lang="EN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=UT ...

"What is the best way to eliminate duplicate data from an ng-repeat loop in AngularJS

I have a query regarding appending data from the second table into $scope.notiData in AngularJS. Additionally, I need to figure out how to remove ng-repeat data when the user clicks on the remove symbol X. I have attempted some code but it is not functioni ...

Differences Between ASP.NET Web Service and WCF Service

Looking to enhance my existing https ASP.NET site by incorporating new remote services for calculations that can be accessed through AJAX methods on the site as well as a .NET desktop application. Historically, I have been utilizing ASP.NET WebServices ut ...

Creating a see-through cursor resembling the one found on the App Store using CSS

Currently, I’m struggling a bit with understanding how to accomplish this task: The issue is that the pointer/arrow within the nav-element appears transparent and displays the content rather than its parent, which is the nav-element. Here is my HTML co ...

Creating a dynamic image merger in ASP.NET: Combining multiple images into one and saving it in the application folder

I have multiple images stored in my application folder, and I need to merge them into a single image dynamically using code. Currently, I am able to do this statically by specifying the paths of each individual image in the code. However, I want to make th ...

What is the best way to restrict a string's length if it exceeds a certain limit?

I have a string that I need to limit to 200 characters, but I'm not sure how to format it so that if it's under 200 characters, it remains unchanged, and if it's over 200 characters, it gets trimmed. Just to clarify, this is in a ListView C ...

Tips for aligning box position in CSS regardless of screen size fluctuations

My header code includes: <link href="styles.css" rel="stylesheet" type="text/css"></link> The script placed in the body is: <input name="search" type="text" onKeyUp="getScriptPage('box','text_content')" id="text_content" ...

Set Column WidthConstraint

Many individuals continue to utilize tables for organizing controls, data, and more - a prime example being the widely-used jqGrid. It's perplexing how there appears to be some sort of sorcery involved (after all, we're talking about tables here, ...

Can the change listener be used to retrieve the selected option's number in a form-control?

This particular cell renderer is custom-made: drop-down-cell-renderer.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-drop-down-cell-renderer', templateUrl: './drop-down-cell-r ...

Adding complex JSON format to an HTML table involves formatting the data correctly and then using

Utilizing AJAX, I fetched a JSON response and am now looking to map the JSON data into an HTML table structured like this: { "records": [{ "type_id": 000001, "type_desc": "AAAAAA", "type_createby": "Adam" }, { "type ...

What is the best way to customize the color of selected items in a RadComboBox using CSS?

I'm curious if it's possible to modify the "background-color" value for the selected items in a radCombobox. Below is the CSS code I've been using: (Despite being able to change other elements, I can't seem to alter the color of highli ...

Retrieving data from a JArray embedded in JSON content

Greetings! Just starting out with C# While I know JSON questions have been covered extensively here, I'm struggling to find a solution for my specific scenario. I've stored a JSON string from an HTTP response in a variable, shown below: { & ...

Javascript code has been implemented to save changes and address resizing problems

Code Snippet: <script> function showMe(){ document.querySelector('#change').style.display = ''; document.querySelector('#keep').style.display = 'none' document.querySelector('#change1').style.d ...

Place a "sticky" button directly below a second "sticky" navigation bar

Within my app file, I have customized components like an appbar and various page elements: const styles = theme => ({ appBar: { width:'100%', }, }); class App extends Component { render() { const {classes} = this.props; ...

What is the best way to create a text input that is both secure and non-editable?

While I am aware of the <input type="text" readonly /> possibility, it is not entirely secure. For example, if there is an input field that must remain uneditable by users, making it "readonly" can still be bypassed by inspecting the code and remov ...

The datepicker feature has been programmed to only allow past or present dates

I've integrated a date picker on a website like so: <input type="text" id="popupDatepicker" placeholder="Select Date" name="from_date" class="input" size="50" /> Here's the script being used: $(function() { $('#popupDatepicker&apos ...

Employing the HTML post method in conjunction with checkboxes

I am facing an issue while trying to use the HTML post function with PHP to insert a value of 1 or 0 into a database based on whether a user has checked a checkbox or not. Every time I submit the form, I encounter index errors regardless of the checkboxe ...