What is the process for including CSS in the .ashx.cs code-behind file in ASP.NET?

How can I insert a css class in the .ashx file while the .aspx UI page displays it as a string? What is the method to include css in the code behind of the .ashx page?

I would like the text "Cook" to be displayed in red.

Problem:

https://i.sstatic.net/wweT7.png

     try
            {
    for (int i = 0; i < dsSeaech.Tables[0].Rows.Count; i++)
                {
                    var myString = new StringBuilder();
                    myString.Append("<span style=\"color:red\">(Cook)</span>");                 
                    lstRecipeName.Add(dsSeaech.Tables[0].Rows[i]["RecipeName"].ToString());
                    if (Convert.ToInt32(dsSeaech.Tables[0].Rows[i]["UserType"]) == AppConstant.chefuser)
                    {
                        lstChefName.Add(dsSeaech.Tables[0].Rows[i]["FullName"].ToString() + "(" + "Chef" + ")");
                    }
                    else if (Convert.ToInt32(dsSeaech.Tables[0].Rows[i]["UserType"]) == AppConstant.cook)
                    {
                        lstChefName.Add(dsSeaech.Tables[0].Rows[i]["FullName"].ToString() + myString);
                    }
                }
                
                JavaScriptSerializer js = new JavaScriptSerializer();
                context.Response.Write(js.Serialize(lstRecipeName));
                }
                 catch (Exception ex)
            {
                throw ex;
            }

Answer №1

To enhance the functionality of the autocomplete feature, you can utilize the _renderItem event.

$.ui.autocomplete.prototype._renderItem = function(ul, item) {
  return $("<li></li>")
    .data("item.autocomplete", item)
    .append('<a>'+item.label+'</a>')
    .appendTo( ul );
};

If you want to see it in action, check out this fiddle: https://jsfiddle.net/192m0uyc/9/

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 steps can be taken to default to a Google web font when Helvetica is not available on the user's device?

Is there a way to have a font fall back to a specific one on Google Web Fonts (Open Sans) if the user does not have Helvetica installed? I'm looking for an efficient method where downloading the font is only necessary if needed. For example, I don&ap ...

Is there a way to prevent hover effects on the outer div when hovering over the inner div?

I am facing an issue with disabling hover effects on an outer div when hovering over an inner button. I have tried various methods but haven't been successful in achieving the desired outcome. .container { background-color: #e6e6e6; width: 400p ...

Disappearing sticky-top navbar in Bootstrap when scrolling

I'm having trouble with the navbar on my website. Currently, it sticks to the top until I scroll out of the hero-image and then disappears. I would prefer the navbar to remain present throughout the entire page. Any suggestions on how to achieve this? ...

Is there a way to mimic disabled input fields?

Is there a way to simulate input being disabled without actually changing the value in the input field, but still have that value sent with POST using a form? <input class="dis" type="text" disabled="disabled" value="111"> <input class="no" type= ...

Data loading issue with asp.net mvc Ajax

I am currently facing an issue while attempting to fetch data from the controller using ajax. Controller [HttpGet] public ActionResult GetServices() { var data = _bbdb.ListServices.Where(d => d.Status == true).ToList(); return Json(data, JsonR ...

Ensure that the CSS grid has a minimum span of 3 columns, and if a class object is the only item in a grid row, it

I am currently utilizing CSS grid to create the layout for my web application. I need to specify that a particular class should have a minimum grid-column span of 3 frames and extend across the entire grid row if it is the only object in that specific row. ...

Unusual alterations to HTML and CSS to meet specific needs

Struggling with bringing my website ideas to life! My header contains a navigation bar, followed by a centered chat box within a fixed <section>. Want the left and right side of the chat box to be content areas that scroll in sync while the chat box ...

CSS- The ultimate guide to perfectly centering a webpage without the need for extra margins!

Our SharePoint 2013 generated web page has a width of 1024. The main content div is styled as follows: #container_master { width:1024px !important; margin-left: auto !important; margin-right: auto !important; background-color:#FFF !impor ...

background image alteration when scrolling

I've been attempting to change the background image on scroll, but I haven't had any luck finding a guide. So, I'm hoping someone here can help me out. I found a video that showcases exactly what I'm trying to accomplish - https://www.y ...

Steps to create a clickable button wrapper label in React

Contained within the components below: <CheckboxGroupLabel htmlFor={option.label}> <FormCheckbox onClick={() => onChange} key={option.label} defaultChecked={defaultChecked} {...rest} /> {option.value} ...

Creating a navigation bar that smoothly slides into view from the top

In my Angular app (version 2+), the current code I have is: .header { background: rgba(white, 0); &.fixed-top { background: rgba(white, 1); border-bottom: solid whitesmoke 1px; position: fixed; top: 0; right: 0; left: 0; ...

How to Make a Doughnut Chart Using CSS

For a while now, I've been working on filling in 72% of a circle with a hole cut out of the middle. Throughout this process, I have been consulting different resources - like this method for calculating and this one for other aspects. However, I’ve ...

implement a night mode with a single click

I attempted to implement a dark mode using jQuery, but it is not working as expected. I am seeking assistance. I would like to enable the dark mode when clicking on the #btntheme ID, but for some reason, it is not functioning correctly. My goal is to be ...

Place a single div above two divs in a flexbox container

I am struggling with aligning the fourth div, which has a class of "details", above the second and third div in a flex box layout. Despite my efforts, I have not been successful in achieving this alignment. Can someone please assist me? .flex-container ...

React's Material-UI AppBar is failing to register click events

I'm experimenting with React, incorporating the AppBar and Drawer components from v0 Material-UI as functional components. I've defined the handleDrawerClick function within the class and passed it as a prop to be used as a click event in the fun ...

How can you style the modal image to center it? Which <div> should you target for styling?

I'm facing an issue with my modal image within a Bootstrap 4 carousel that uses JQuery. When I open the modal, it doesn't appear centered on the screen. Could you advise me on which parent div to style and how? Additionally, how can I ensure the ...

The issue of empty strings not converting to null when passing a JSON object to a controller

My observation in ASP.NET Core 2.1 is quite the opposite of a similar question raised about string.empty being converted to null when passing JSON object to MVC Controller. In my case, when a JSON object with properties containing empty strings is sent ba ...

What is the best way to compile an array of permissible values for a specific CSS property?

One interesting aspect of the CSS cursor property is its array of allowed values, ranging from url to grabbing. My goal is to compile all these values (excluding url) into an array in JavaScript. The real question is: how do I achieve this without hardco ...

Change the right border style for the second and third ToggleButtons in the ToggleButtonGroup

I've been working on this for a few hours now and I can't seem to get it right. Currently, I'm using Mui v5 and trying to style the ToggleButtons to look like regular MUI buttons. So far, I was able to achieve this transformation: https:/ ...

Why do MVC3 Razor Edit/Create scaffold templates utilize the DisplayName annotation while Delete/Details do not?

Starting my journey with MVC3, please excuse the newbie question. I'm currently working on annotating my data model for the UI layer. In my model, I have the following: [DisplayName("First Name")] public string firstName { get; set; } Upon creating ...