How to Update DIV Content in a Child Page Using C#, Javascript, and ASP.NET

I have a master page that sets the basic layout of my website. My goal is to change the contents of a specific div on the child page. I am aware that I can achieve this using the following code snippet:

//((HtmlGenericControl)this.Page.Master.Master.FindControl("friends")).InnerHtml = "";

However, I am unable to insert tags using this method. For example, if I want to change the div and add an unordered list.

If anyone knows how I can accomplish this or can provide an example, I would greatly appreciate it. Thank you.

c#javascriptasp.netajaxhttp

Answer №1

To convert a div into a server-side control, consider using a PlaceHolder and adding a control to it using the syntax div.Controls.Add(control); in the server-side code of child forms.

Answer №2

 HtmlGenericControl parentDiv = (HtmlGenericControl)Page.FindControl("<<div id>>");
HtmlGenericControl unorderedList = new HtmlGenericControl("ul");
HtmlGenericControl listItemToAdd = null;
HtmlGenericControl linkToAdd = null;

for (int index = 0; index < 10; index++)
{
    listItemToAdd = new HtmlGenericControl("li");
    linkToAdd = new HtmlGenericControl("a");
    linkToAdd.InnerText = "demo";
    linkToAdd.Attributes.Add("href", "");
    listItemToAdd.Controls.Add(linkToAdd);
    unorderedList.Controls.Add(listItemToAdd);
}

parentDiv.Controls.Add(unorderedList);

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

How can I use AngularJS to save selected assets?

<div style="z-index: 1; position: absolute"ng-show="ctrl.company.selected"> <div style="" ng-repeat="Asset in ctrl.company.selected.Assets"> <div class="pd-5"style="width: 300px; background-color: white; border-bottom: gray solid ...

javascripthtmlangularjs

A type error was thrown: $.ajax function does not exist within another function

I encountered a persistent ajax error on the website. Error : Uncaught TypeError: $.ajax is not a function at Hei Here is my code for reference: Can anyone pinpoint where I may be going wrong? The suggested solutions from other sources have not resol ...

javascriptjqueryajax

Printing 'undefined' to the console after making an API call with Vue

After authenticating and fetching data from a 3rd party API in my Laravel Controller, I'm encountering an issue where 'undefined' is being logged in the console instead of the actual data that I want to store in a Vue component. I've t ...

javascriptvue.js

Error occurred due to an unexpected end of JSON input following a pending promise

I am currently developing a data handler that requires downloading a file for parsing and processing within the handler. To handle this, I have implemented the file request within a promise and called it asynchronously from other methods. Including the h ...

javascriptnode.jspromise

Why is the button missing from the codepen?

I attempted to recreate the code from this Codepen link: https://codepen.io/jakaric/pen/mjJQvg However, unlike what you see here (in the run result), the liquid "Pretty little button" is not showing up in my local files. On Codepen, there is no library me ...

javascriptbutton

jquery sequential fade effect

I am trying to make each div fade in one by one. Visit this link for reference <div id="w"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> $(function() { $(&a ...

javascriptjquerycss

Obtain custom parameter data from a string

Searching for custom parameter values within a string is necessary. For instance, given the following string: aaa[111] bbb[222] ccc[333] ddd[444] I am looking to extract the value 111 associated with the parameter aaa, and so on... The specific paramete ...

javascriptjqueryregex

Form featuring a mandatory checkbox that must be selected in order to proceed; failure to do so will result in an

So here’s the situation: I have a form with a checkbox for agreeing to the terms of service, and I want to make sure it is checked before proceeding with the donation process. I only have the HTML code and no idea how to implement this functionality. Ide ...

javascriptjqueryhtmlcheckboxrequired

Struggling to generate a functional link with Laravel and Vue?

For the past few days, I've been facing a problem. The issue I'm encountering is this: I have created a link in my .vue page to download a simple PDF file: <a href= {{ asset('download/form.pdf') }}> Download here. </a> (Th ...

javascriptphplaravelvue.js

The Ajax response is not received when submitting a form using Ajax with jQuery validation

My current code includes form submission using ajax with jQuery form validation, however the response is not functioning correctly. This is my AJAX code: $("#save_form4").validate({ rules: { name: { required: true ...

jqueryajaxcodeigniterjquery-validatesmarty

Is there a way to transform this JSON string into a particular format?

When moving a string from view to controller, I have encountered an issue. Below is the ajax code I am using: var formData = $('#spec-wip-form, #platingspec-form').serializeArray(); var platingId = @Model.PlatingId; var form = JSON.s ...

javascriptajaxasp.net-core-mvc

Tips for showcasing validation errors within the same dialogue box?

Employing codeigniter HMVC, I endeavor to craft a sign-up form that pops up upon clicking the sign-up button. Nevertheless, the validation errors for said form emerge on the parent page where the login form is situated and the dialog shuts post submitting ...

phpjqueryajaxcodeigniterhmvc

Showing information to several classes using JavaScript

I am currently developing a "Gamebook Engine" that enables users to set a custom username. The user name is extracted from an input element with the id="setUserNameInput" and stored using the function setUserName(). It is then displayed or loaded into an e ...

javascripthtmlcssclass

After manipulating the array, Vue fails to render the input fields generated by the v-for directive

After setting the value externally, Vue component won't re-render array items. The state changes but v-for element does not reflect these changes. I have a component that displays items from an array. There are buttons to adjust the array length - &a ...

javascriptvue.js

The request body for MERN full stack development is returning empty

I am currently facing an issue while trying to establish a connection between my client and the backend. Here is the snippet of code I am using: //client const body = { email: value, }; axios.get("http://localhost:5000/checkEmail", body) // ...

javascriptnode.jsreactjsexpressaxios

Describing a function in Typescript that takes an array of functions as input, and outputs an array containing the return types of each function

Can the code snippet below be accurately typed? function determineElementTypes(...array: Array<(() => string) | (() => number) | (() => {prop: string}) | (() => number[])>) { /// .. do something /// .. and then return an array ...

javascriptarraystypescripttypescript-generics

Adding CSS styles to an HTML page using JavaScript

Unfortunately, I do not have the ability to access the HTML directly as it is generated dynamically by a program. However, I do have access to the JS page that is linked to it. As an example, I am able to manipulate elements using JavaScript like so: ...

javascripthtmlcss

Having trouble with my TinyMCE Editor not loading content data in the Edit.vue component of my Vue 3 project with Vite

I am currently working on a Vue 3 project using Vite and incorporating Editor.vue components with TinyMCE. The code snippet for my Editor.vue component is shown below: My Editor.vue code: <template> <div class="mb-6"> < ...

javascriptvue.jstinymcevite

Converting a PHP SoapClient request example to Ruby on Rails

I am looking to access a web service through its API. The documentation provides an example request using PHP SoapClient, but I work with RoR and do not have experience with PHP. Can someone guide me on how to translate this to RoR code, or explain it in s ...

phpruby-on-railshttpsoap-client

Why isn't useEffect recognizing the variable change?

Within my project, I am working with three key files: Date Component Preview Page (used to display the date component) useDateController (hook responsible for managing all things date related) In each of these files, I have included the following code sn ...

javascriptreactjstypescriptecmascript-6