Guide on displaying data from a list in aspx with javascript/Jquery from aspx.cs

Code in aspx.cs file

protected void Page_Load(object sender, EventArgs e)
 {

            foreach (UserDetail l in liststUser)
                            {
                                UserName = l.Name;
                                Dob = l.dob;
                                gender = l.gender;
                                ScriptManager.RegisterStartupScript(this, GetType(), "print User's bio.", " PersonBlockCreator('" + UserName + "','" + Dob + "','" + gender + "');", true);
                            }
}

Code in .aspx file

<html>
    <head>
        <script type="text/Javascript">

            targetId = "#userData"; //Constant value, please do not modify 
            BoxName = "box"; //Constant value, please do not modify
            j = 0;


            function PersonBlockCreator(UserName, Dob, gender) {
                $(targetId).append("<div class=" + BoxName + ">" + (j + 1) + "<div class='box-color'><h2>" + sSubjectName + "</h2><h5>"+Dob+"‏</h5><p>"+gender+" </p></div></div>");

                $(".tile").addClass(tileColor);
            }
        </script>
    </head>
    <body>
           <div class="Box" id="UserData">

                //each user data should be printed in an box
                //Example:
                //           ---------------   -----------
                //         | Nethan Walter | | Deen         |
                //         | 10-01-1990    | | 10-01-1990   |
                //         | Male          | | Male         |
                //          ---------------   --------------
           </div>

    </body>
</html>

How can I implement this using JavaScript and C# or solely with C#. My goal is to display a list of user details stored in a listObject in the aspx.cs file on the aspx page when it loads. Currently, only the details of the first user are being displayed, while the rest are being ignored or not printed.

Answer №1

To easily print your table using JavaScript, follow these steps: Firstly, make sure to include the div id when calling the function below:

function PrintTable(tableid) {

var table = document.getElementById(tableid);
if (table) {

    var contentToPrint = table.innerHTML;

    var printWindow = window.open("print.html", "printWindow");
    printWindow.document.open();
    printWindow.document.write(contentToPrint);
    printWindow.document.close();
    printWindow.print();
}

}

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

Creating input fields in Vue 3: Best practices

I am looking to create an input field that automatically removes entered characters if they do not match a specific pattern. Here is the template: <input type="text" :value="val" @input="input" /> And here is the ...

How can we guide the user to a different page when a particular result is retrieved by AJAX?

Whenever my PHP function makes a database call, I receive multiple results. The ajax then displays these results in a div element. My question is: How can I redirect the user to the next page once I obtain a specific result from the PHP function? Current ...

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

Is ES5 essentially the same as ES6 in terms of my lambda search?

After doing a search on an array using ES6, I am having trouble figuring out how to rewrite the code in ES5 due to restrictions with Cordova not allowing me to use lambda functions... $scope.Contact.title = $scope.doctitles[$scope.doctitles.findIndex(fu ...

Determining the starting and ending position of text within an element using jQuery

Delving into the world of jQuery/JS has been both challenging and exciting for me. However, I've encountered a problem that's got me stumped. Here is a snippet of text that I need to work with: blablablabla <b data-start="" data-end="">#fo ...

How can you update the options within a select tag depending on the selected index of another select tag using AngularJS?

Consider the following code snippet: $scope.letters = ['A', 'B', 'C', 'D']; $scope.numbers = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; $scope.selectedLetter = 0; There are two select tags in t ...

Angular 7 - Issue with rendering only the "dist" folder on the browser, not the "src" folder when using nodejs

Greetings! I'm embarking on a new project involving a nodejs app with angular7. Below is the content of my mail server.js file in nodejs: var express = require('express'); var mysql = require('mysql'); var bodyParser = require(&a ...

Utilize Laravel in conjunction with AngularJs by implementing a base path in place of the current one when using ng-src

Let me try to explain my issue clearly. I am delving into using angularJs in my Laravel project for the first time. The controller is responsible for fetching the uploaded photos from the database. public function index() { JavaScript::put([ ...

Preventing CSRF attacks using AJAX in a Django application

After some troubleshooting, I discovered the mistake in my HTML code. Simply adding {% csrf_token %} resolved the issue :) Big thanks to everyone who helped! (I followed the JavaScript snippet provided in the initial response but I'm still encounte ...

Obtain element values using Protractor and WebDriverJS and store them in an array of objects

Coming from a Java+WebDriver background, I am new to Protractor, WebdriverJS, and Jasmine. In the image displayed, my goal is to hover over all bubbles and retrieve the tool tip values (city, sold, connected), assign them as objects to an array, and return ...

Is it possible for $templateCache to preload images?

Is there a way to preload images in Angular without using a spinner after the controller is initialized? I've heard about caching templates with $templateCache. Can this be used to also preload images when the template contains <img> tags or sty ...

Combining disparate arrays with serialized name/value pairs

Is there a way to merge an unassociated array with serialized name/value pairs without manually iterating over them? //First, I select certain values from mytable var data = $('#mytable input:checked'); console.log(data); //Object[input attribu ...

Dependency tree resolution failed during VUE installation

After pulling my project from another computer where it worked fine, I encountered an error when trying to npm install on this machine. Can someone please provide some guidance on how to resolve this issue and prevent similar problems in the future? npm ER ...

Group JSON elements based on their values

Good day, I am currently working on creating a JSON file that organizes Portuguese parishes by district, municipality, and parish. The structure I am aiming for is as follows: { "district": "Aveiro", "OfficialCodeDistrict" ...

Utilize an array of objects to present information within a React Native Text element

I can't seem to access an array of objects in my JSON data to show in a React Native Text component. JSON data { "name": "Pizza Joint", "when": [{ "day": ["Sat", "Sun"], "start_time": "11:00", "end_time": "23:00" ...

Phonegap enables iOS keyboard to dynamically adjust screen size during use

Currently, I am developing an iOS app using phonegap 3.0 and have encountered a particular issue. In my app, there is a window where users are required to enter a promo code. The problem arises when I click on the input area (see this example) and then pr ...

Is there a way to create a diagonal movement for an image by clicking on another HTML element?

<!DOCTYPE html> <html> <head> <meta charset="UTF-9"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function() { $(document).re ...

Choose and Send pictures through a Form with JavaScript

Currently, I am exploring different methods for allowing users to submit a form with the images they have selected. My idea is to present users with a set of images from which they can choose multiple options. Potential Solution 1: One approach could invo ...

Submitting HTML forms in SilverStripe using Ajax

I need to transfer data from a basic HTML form to a controller using Ajax, then handle the data and send a response back. Currently, my setup looks like this: HomePage.ss <form method="POST" class="form-horizontal submit-form" onsubmit="return checkf ...

In my PHP loop, I am creating radio buttons and I only want one of them to be selected at a time

How can I ensure that only one radio button is selected out of the 99 radio buttons generated in this for loop? for($x = 2; $x <= 101; $x++){ $out .= "<img src='/img/channel_icons/".$icons[$x]."' class='ch ...