Update table content dynamically without the need to refresh the entire page while maintaining the original CSS

I have been encountering an issue with my ASP .NET code. I have spent hours researching but haven't found a solution that works for me. My problem is that when I click a button, the text inside a textbox should be added to a dropdown and update a table without refreshing the entire page. I attempted to use an UpdatePanel for this functionality, but when it triggers, the dropdown loses its Bootstrap CSS styling.

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <table>
              <tr>
                <td>
                </asp:Label> <asp:Label ID="Label1" runat="server" 
                Text="Clearance No."></asp:Label>
                </td>

                <td>
                <asp:TextBox ID="Textbox1" runat="server" Enabled="False">
                </asp:TextBox>
               </td>
              </tr>
              <tr>
                <td>
                   <asp:DropDownList ID="dropdown1" runat="server">
                   </asp:DropDownList>
                </td>
                   <asp:TextBox ID="Textbox2" runat="server" Enabled="true">
                   </asp:TextBox>
                <td>
                </td>

                <td>
                   <asp:Button ID="Button1" runat="server" Text="Add To 
                   Dropdown" OnClick="Button1_Click" />
                </td>
              </tr>
            </table>
        </ContentTemplate>
         <Triggers>
              <asp:AsyncPostBackTrigger ControlID="Button1" 
              EventName="Click" />
            </Triggers>
</UpdatePanel>

Answer №1

If you're looking to enhance your web development skills, I recommend delving into the world of AJAX. This technique utilizes Javascript to send and receive data asynchronously, eliminating the need for page refreshing.

For ASP.net users, JQuery is often bundled in default packages, simplifying the implementation of AJAX functionality.

Here's a snippet of code from a project I'm currently working on that demonstrates how to update a table using AJAX:

$.ajax({
        type: 'POST',
        url: '/Routing/GetRoutings',
        dataType: 'Json',
        data: { PID: $(this).val() },
        success: function (data) {
            data = JSON.parse(data);
            $('#DOPT tbody').empty();
            $.each(data, function (index, data) {
                $('#DOPT').append('<tr><td>' + data.Operation_Number + ' - ' + data.Operation_Description + '</td></tr>');
            });
            $('#DOP').show();
            $('#NWO').show();
        },
        error: function (ex) {

        }
    });

I trust this information will prove beneficial to your endeavors.

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

Chrome and Firefox browsers are not supporting HTML simple anchor links

Creating a portfolio page at this link (http://198.96.94.51/v2/) and encountering an issue with the navigationMenu. When rapidly clicking on the links on the side, they do not redirect to the correct anchor point (some don't move the page at all). I h ...

Show XDocument on a MasterPage

I am currently facing an issue with displaying an XDocument on a MasterPage that I have created using asp.net in C#. Despite dynamically creating the XDocument and using Response.Write to show it on the webpage, it seems to overwrite my MasterPage. I am st ...

Styling a div element in CSS so that it adjusts its size to fit its

How can I make a div element adjust to its content and also break the line so that the next element appears below it? I attempted setting the display property to inline-block, but then the div no longer breaks the line... Normally, it breaks the line, but ...

Utilizing the NG-CLASS directive within a material table to target a specific 'row' element for styling in CSS

I have a table with various columns, one of which is a status field. I am looking to display colored badges in that column based on the status of each record, which can be "Completed", "Deleted", or "Canceled". I have attempted to use ng-class to dynamical ...

Placement of text is incorrect on certain react cards

I have an application that retrieves videos and generates a card for each video, displaying the video title, creator, link, download option, views, and upload date on each card. Fetching and displaying these elements works well, for the most part. However ...

The value passed to the JavaScript function appears to be null, despite not actually being null

Here are the specific API functions I am using to call from JavaScript: function SuspendActionOp(barcode, owner) { //alert(barcode+" - "+num); alert(owner); if (owner == null) { alert('owner is null'); } else { $.ajax({ url: &apo ...

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

The Bootstrap card becomes compressed when conducting a search within the card grid

After inserting a new image into a card, I noticed that the card gets distorted when I perform a search. I'm unsure if this issue is related to Bootstrap's grid or the image size itself. Any suggestions on how to rectify this would be greatly app ...

Tips for adjusting label text color according to the background color

In order to achieve the desired effect where the label text color matches the background color (white on white, dark on dark), I have implemented the following code. However, I am facing an issue where the bgDelta value is always 0 and the label color va ...

Place the collapsible button on the right side of the navigation bar

Looking to position the collapsible button to the right of the navbar in Bootstrap v4, I attempted wrapping the button in: <div class='nav navbar-nav navbar-right'> I also tried adding the float-xs-right class without any luck. A sample ...

Searching for a property in JSON using C# can be done by parsing the

Ensuring that every request in our ASP.Net Web API project is logged is a priority. Each request requires a search for a specific property/token (PersonId) within the payload, which must then be stored in the log table. The challenge arises from the fact ...

Is it necessary to have uniform spacing between links in a responsive navigation menu?

I am attempting to create a horizontal menu navigation system. I have multiple links in the navigation, and my goal is to evenly space them horizontally. Is there a way to achieve uniform spacing between links in a horizontal menu? HTML: <div id= ...

The Chart feature in the ASP.NET WebHelpers Library

My goal was to incorporate a chart from the webhelpers library into my Visual Studio Webforms project. When I click the button, the chart should appear on the page. However, when I click the button, the chart takes over the entire page, causing the buttons ...

Adjusting the appearance of internal components with material-ui icons

Currently working on a project using react and material-ui where I am looking to customize the styles of specific elements within components. An example is the ListItem component which includes primaryText, leftIcon among others, and my goal is to modify t ...

Sharing specific calls from an established asp.net-mvc website with external REST clients on an internal network?

I currently have a functioning asp.net-mvc website and now I am seeking to make some of my internal calls available to external applications that are exclusively used within the site. This is all happening in an intranet setting within my organization. Af ...

Grid-based timekeeping design

Currently working on a clock grid layout and seeking some advice on the next steps. The layout has been created but still needs some adjustments to achieve perfection. What would be the most effective approach for correcting it? Would offsetting it using a ...

What's the best way to align a bottom navigation bar in the center?

Hey there! I recently added a bottom navigation bar to my website using HTML and CSS code. However, I'm having trouble centering it at the bottom of the page. Any suggestions or solutions would be greatly appreciated. Attached are screenshots of the H ...

Display radio buttons depending on the selections made in the dropdown menu

I currently have a select box that displays another select box when the options change. Everything is working fine, but I would like to replace the second select box with radio buttons instead. Can anyone assist me with this? .sub{display:none;} <sc ...

How can I avoid anti-aliasing in browsers when enlarging images?

Back in April 2012, Google's Chart Image API became deprecated but it was possible to generate QR codes using it. Although I know that I can adjust the size of the image produced by the API, I prefer to simply use CSS along with the width and height ...

Ensure that the height of the div element is equal to 100% of

I've been trying to figure out how to make my div take up all of the vertical height of the screen, but I haven't found a simple solution in the 100% div height discussions. Can anyone help? Here's my code: CSS #mother { width: 100%; ...