Switching Formview mode using javascript

Currently, I have a formview on my website and I am looking to change the formview mode using JavaScript. Specifically, I want the formview to switch between insert mode and edit mode based on different interactions with buttons.

I have a repeater on my page which contains buttons. There is also a button outside of the repeater that triggers a popup displaying the formview in insert mode. On the other hand, clicking a button within the repeater should display the formview in edit mode. Unfortunately, I have not been successful in achieving this functionality using C#, so I am considering utilizing JavaScript to accomplish this task.

<asp:ToolkitScriptManager ID="toolkitmanager1" runat="server"></asp:ToolkitScriptManager>
        <asp:LinkButton runat="server" ID="lnkFake" />
        <asp:ImageButton  ID="img1" runat="server"  PostBackUrl="javascript:$find('popUpBehavior').show();"/>
        <asp:ModalPopupExtender BackgroundCssClass="modalBackground" ID="popUpCompanyEmployee"
            runat="server" PopupControlID="panel1"
            TargetControlID="lnkFake" BehaviorID="popUpBehavior" CancelControlID="btnKapat">
            </asp:ModalPopupExtender>
        <asp:Panel ID="panel1" runat="server" CssClass="modalPopup">
            <asp:UpdatePanel ID="updatepanel1" runat="server">
                <ContentTemplate>
                    <asp:FormView ID="fv1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="ID" DefaultMode="Insert">
                        <InsertItemTemplate>
                            <asp:Label ID="lblProductName" runat="server" Text="ProductName"></asp:Label>
                            <asp:TextBox ID="txtProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:TextBox>
                            <asp:Label ID="lblQuantity" runat="server" Text="Quantity"></asp:Label>
                            <asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>'></asp:TextBox>
                            <asp:Label ID="lblUnitPrice" runat="server" Text="UnitPrice"></asp:Label>
                            <asp:TextBox ID="txtUnitPrice" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:TextBox>
                        </InsertItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblProductName" runat="server" Text="ProductName"></asp:Label>
                            <asp:TextBox ID="txtProductName" runat="server" Text='<%# Eval("ProductName") %>'></asp:TextBox>
                            <asp:Label ID="lblQuantity" runat="server" Text="Quantity"></asp:Label>
                            <asp:TextBox ID="txtQuantity" runat="server" Text='<%# Eval("Quantity") %>'></asp:TextBox>
                            <asp:Label ID="lblUnitPrice" runat="server" Text="UnitPrice"></asp:Label>
                            <asp:TextBox ID="txtUnitPrice" runat="server" Text='<%# Eval("UnitPrice") %>'></asp:TextBox>
                        </EditItemTemplate>
                    </asp:FormView>

                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger  ControlID="btnKapat"/>
                </Triggers>
            </asp:UpdatePanel>
            <asp:Button  ID="btnkapat" runat="server" Text="Close"/>
        </asp:Panel>
        <asp:Repeater ID="rpr1" runat="server" DataSourceID="SqlDataSource1">
            <ItemTemplate>
                <asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                <asp:Label ID="lblProductName" runat="server" Text='<%#Eval("ProductName") %>'></asp:Label>
                <asp:Label ID="lblQuantity" runat="server" Text='<%#Eval("Quantity") %>'></asp:Label>
                <asp:Label ID="lblUnitPrice" runat="server" Text='<%#Eval("UnitPrice") %>'></asp:Label>
                <asp:ImageButton ID="imgPopup" runat="server" PostBackUrl="javascript:$find('popUpCBehavior').show();" />
            </ItemTemplate>
        </asp:Repeater>
        <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:NET2ConnectionString %>' SelectCommand="SELECT * FROM [ProductsRA]"></asp:SqlDataSource>

Answer №1

Essentially, altering the mode of a FormView dictates which controls (html) will be displayed on the page.

This process cannot solely occur on the client-side. One option is to utilize an update panel, allowing for only an asynchronous post back, refreshing only the form view html.

For further information, please refer to this Formview discussion

Additional documentation can be found here

I hope this helps clarify your question

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

Steps on removing a file type from a Material UI textfield

I've been struggling to figure out how to clear a Material UI textfield with type="file" even after trying multiple approaches. My issue arises when I set a file size limit and display an error message if a user tries to upload a file larg ...

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

Having a multitude of JavaScript files loaded on a single page can result in decreased performance. My inquiry is this: Is it preferable to have individual files or combine them into one JavaScript file? If consolidating all scripts into one file is the ...

What is the best method for properly inserting images into a Vue Carousel 3D slider?

I'm currently exploring the Vue Carousel 3D documentation and I am having trouble displaying a single image on each slide. Let me elaborate: I aim to create a slider similar to the one shown in the Controls Customized example in the documentation. Th ...

Using the .val method on an input element modifies the HTML content without affecting the value displayed

Currently, I am working on validating the range input type by utilizing JavaScript along with jQuery's val method. While it successfully displays the output in HTML, I encountered an issue where changes to the value are not being logged in the console ...

What is the best way to attach two separate event listeners to a single button?

I'm attempting to have one button trigger two different functions, but I haven't been successful so far. I tried adding the second event listener as indicated by the // part, but it didn't work. The two functions should be executed sequentia ...

When attempting to establish a socket connection to a node server from an HTTPS protocol, a mixed

I have recently enhanced my website by adding a nodejs+socket.io based conversation server to it. This server is hosted on a separate AWS instance while the main website runs on HTTPS. However, I encountered an issue when trying to establish a socket conn ...

When using ng-repeat in Angular.js, an additional td is created

https://jsfiddle.net/gdrkftwm/ https://i.sstatic.net/CTi2F.jpg I have encountered a problem while creating a table from a Json object. There seems to be an extra td being generated, and I'm not sure why. I want the structure of my table to resemble ...

Revolutionizing user experience: New feature seamlessly triggers button actions with the power of "enter"

I need assistance with modifying a form that contains two buttons and several text inputs. Currently, if the enter key is pressed, it triggers a click event on the first button. However, I want to modify this behavior so that if any of the text boxes are f ...

Unable to access .root in the unmounted test renderer while performing React Native unit testing

Hello, I am currently in the process of testing my app using react-native-testing-library. Unfortunately, when I run the test, it fails. I'm encountering an error that says: Can't access .root on unmounted test renderer There appears to be a ...

When we typically scroll down the page, the next section should automatically bring us back to the top of the page

When we scroll down the page, the next section should automatically bring us back to the top of the page without having to use the mouse wheel. .bg1 { background-color: #C5876F; height: 1000px; } .bg2 { background-color: #7882BB; height: 1000px; } .bg3 ...

Efficiently uploading multiple files using AJAX in conjunction with Codeigniter

Greetings! I'm attempting to utilize ajax and codeigniter to upload multiple images. As a beginner in ajax and jquery, I would greatly appreciate any assistance in identifying where I might be going wrong or missing something. Below is my controller ...

Creating custom directives in AngularJS can be a rewarding and powerful

When working with two directives, a situation arose where it was necessary to clear the value in Directive A by using a button located in Directive B. However, when attempting to do this using typical DOM manipulation tools like jQuery, an error occurred w ...

Streamline the process of sorting through 2 arrays

Is there a more concise and elegant way to achieve the same functionality as my current method? I am looking for a shorter solution to create an array of items that haven't been used in the form previously, which are then used to populate a select dro ...

Ways to effectively conceal an HTML div element with CSS or JavaScript

Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery? I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m <style> .my-radio{ border: 1px solid #F0F; } &l ...

Is it possible to use HTML elements to trigger actions in order to display or conceal divs using JavaScript?

Beginner - I am currently working on a webpage using TinyMCE wysiwyg and I would like to implement a functionality where I can display or hide certain divs upon clicking a link/button. Unfortunately, due to the structure of the page, it seems that I ca ...

Redirecting script upon successful connection detection

I have created a script that checks for internet connectivity using an image, and redirects if internet is available. However, the issue is that it caches the images, leading to attempts to load them even when offline. Is there a different approach I can ...

Unable to successfully interact with Paypal button using selenium automation

I'm facing an issue with Selenium where I am unable to click on the PayPal button. https://i.sstatic.net/Xx62H.png https://i.sstatic.net/lZg88.png Despite trying various methods recommended in the Selenium documentation, the button remains unrespon ...

Guiding motion of a parental container using a button

This seems like a fairly straightforward task, but I'm getting a bit frustrated with it. Is there a way to move an entire div by simply holding down the mouse button on a particular button? let container = document.getElementById('abo ...

The chosen option does not display any information

I am new to databinding an html control using ajax for the first time. After checking and debugging my ajax call, I can see that the data is retrieved successfully, but it does not show up in the select option. My javascript code is positioned at the botto ...

Give a class to the element contained within an anchor tag

One way to add a class to the <a>-tag is through this line of code. $("a[href*='" + location.pathname + "']").addClass("active"); However, I am looking to add the class to an li element inside the <a>-tag. What would be the best ap ...