Displaying an ASP.NET control as visible on the client side using the onClick property of a LinkButton

Currently, my UserControl Page utilizes ASP.Net Controls such as TextBox and Drop down List which are all set to be invisible using the Edit function. On the same page, there is a Link Button for editing that I would like to make visible at the client side. Can anyone provide suggestions on how to achieve this or propose an alternative method?

Answer №1

If you want to achieve this functionality using JavaScript, the recommended approach is to remove the OnClick attribute from the LinkButton and utilize the OnClientClick attribute to invoke a JavaScript function instead:

<asp:LinkButton ID="lb_link_button" runat="server" Text="Click Me" OnClientClick="return ToggleShowHide()"/>

Below is an example of a JavaScript function that can show/hide a control named my_control by manipulating its style.display property:

<script type="text/javascript">        
    function ToggleShowHide() {
        var control = document.getElementById("<%= my_control.ClientID %>");
        if (control.style.display == "none") { control.style.display = "block"; }
        else { control.style.display = "none"; }
        return false;
    }
</script>

There are various ways to reference the controls for showing/hiding, and this is just a simple illustration.

It's important to note that the controls intended to be set as visible/invisible should not have their Visible property explicitly set to false. Instead, they should be initially declared with a style of display:none; like so:

<asp:Control runat="server" ID="my_control" Visible="true" style="display:none;"/>

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

Utilizing Ajax to serialize or transfer JSON objects

I have received a Json object and I am looking to extract the data using JavaScript. Specifically, I need help with looping through fields and extracting the data. def For_Sale_Listing(request,id): try: listing = Listing.objects.filter(pk=id) ...

Bookmarklet in JavaScript that automatically extracts and displays Meta keywords in a new tab within the browser

I successfully implemented a script that extracts site meta keywords and writes them into the DOM. javascript:(function metaKeywords() { metaCollection = document.getElementsByTagName('meta'); for (i=0;i<metaCollection.length;i++) { nameAttri ...

Converting VB6 encryption code into C#/.NET code: A step-by-step guide

Looking for assistance with converting a VB6 encrypting code to C#. I have inherited this encrypting code created by another developer, but I am not familiar with .NET and need help converting it to C#. Is there any guidance available on how to convert th ...

"React router location change fails to trigger a refresh in the application

I am encountering a situation with my code within a Navbar component: renderAccountButton = user => { const path = this.props.location.pathname; const regex = new RegExp(/^\/register/); if (user.isAuthenticated) { return ( <Butt ...

The function string.charAt() is returning a value of 0

I'm attempting to output each letter of a word separately by using the variable string. Here is the code I have so far: function typewriter() { var el = document.getElementById("typewr"); var string = "Hello"; for(var i=0;i<string.le ...

An unexpected token 'export' error occurred while working with Next.js in the next/server.js file

Whenever I attempt to run yarn dev for my Nextjs project, I encounter the error message of "Unexpected token 'export'". This issue arises after executing yarn build. The specific error is shown below: > Build error occurred /Users/.../my-repo/ ...

Issue encountered while attempting to remove a row from a table (JavaScript)

I'm encountering an error when attempting to delete a table row: "Uncaught ReferenceError: remTable is not defined index.html:1:1". When I inspect index.html to identify the issue, I find this: remTable(this) This is my code: const transact ...

I encountered a problem when trying to run the wcf

My service is hosted on the local IIS. I'm not sure why this error is occurring when I test the service on the browser. It works fine when I run it from Visual Studio, but when hosted on IIS, it stops working. This is my first time doing this. The s ...

The loading speed of Crystal Reports significantly decreases when executed on a database that is different from the one specified

Currently, I am integrating Crystal Reports 2008 SP2 with a C# .NET 4.0 application. Within the application, we utilize the Load method on ReportDocument to load Crystal Reports: CrystalDecisions.CrystalReports.Engine.ReportDocument.Load(fileName); While ...

Uploading a file to a .NET Framework API Controller using React

I am trying to figure out how to send files in the request body to an API controller in .NET framework using React. My goal is to achieve this without changing the request headers, so I want to send it as application/json. What I am looking for is somethi ...

Remove duplicate elements from a JSON array

How can I add each item in an array for each duplicate? Transform: [ { "uuid":"EE877ABD-932F-4B4C-AB23-B324363B0B60", "planning":[ { "uuid":"6D680178-9B05-4744-A004-163D4B3E1E84", "star ...

What is the best way to incorporate an onmouseover event so that when the mouse hovers over an image, play/stop/pause buttons are displayed

Furthermore, each button should trigger an event on click. When the pause button is clicked, the button text should toggle between pause and continue, and the action should correspond to the displayed text. This is the HTML code I currently have: Includi ...

Ensure that all radio buttons are selected before proceeding to the following page

I need to validate whether all radio buttons in five different groups are checked before moving on to the next division. Once the submit button is clicked, I want to ensure that all five radio button groups have been selected. Here is an example of the HT ...

The initial loading time of the Asp.Net application is slow

Currently, I am facing an issue with my ASP.NET application where it takes longer to load initially, but once loaded, subsequent page loads are faster. The main culprit seems to be the Image gallery on my page, which is dynamically loaded based on the cat ...

Steps for programmatically closing a Dialog Window in a showmodeldialog window

When opening the window, I follow this approach: var MyArgs = new Array(ParmA, ParmB, ParmC, ParmD, ParmE, ParmF); var leftpost = getWindow_TotalWidth() - 1000 - 100; var WinSettings1 = "dialogHeight:580px; dialogWidth:950px;edge:Raised; center:Yes; resi ...

Enhance your web form with an auto-suggest textbox that allows for multiple selections,

Looking for assistance in implementing an auto complete text box with the ability to select multiple options using Dojo. Any experts out there who can offer their guidance? ...

The click function is a member of an object within an emit event

I stumbled upon the code snippet below, which triggers the notification-alert event and passes an object as a parameter. this.$root.$emit('notification-alert', { text, type: 'warning', click: () = ...

Is MongoDB caching its collection in memory?

Utilizing mongoDB for storing a set of polygons and executing $geoIntersects queries to determine the polygon containing a specific point. My mongoose Schema is structured as follows: var LocationShema = mongoose.Schema({ name: String, geo: { ...

JQuery form not triggering the submit event

Currently, I am facing some issues with my code while trying to trigger on submit event on a form and validate it. The main problems I encountered are that the onsubmit event is not being triggered, and the input field of type email is not validated proper ...

Exploring Methods for Retrieving offsetHeight and scrollHeight in AngularJS

I am currently developing a directive that requires three specific values: scrollTop offsetHeight scrollHeight projectModule.directive('scroller', function ($window) { return { restrict: 'A', link: function (scope, elem, attrs) { ...