Can't hide div with modal window

Im building an email subscription form into my asp.net site and I'm trying to show the modal window when the user adds their name to the subscribe list. I can't seem to get the div to hide on pageload. The modal loads on page load, but I want it to be hidden until the user submits the form.

Im building an email subscription form into my asp.net site and I'm trying to show the modal window when the user adds their name to the subscribe list. I can't seem to get the div to hide on pageload. The modal loads on page load, but I want it to be hidden until the user submits the form.

Ideally this would all be done server side since i don't want the modal to pop up until the form is submitted and doing it client side could trigger a false positive.

I'm not sure what the best way to achieve this would be, through code behind or possibly jQuery, which I don't know much about.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
.responsive {
width: 40%;
height: auto;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.simple-subscription-form {
background: #000000;
color: #94C60D;
padding: 2rem;
border-radius: 0;
align-content: center
}
</style>
<style>

.simple-subscription-form.button {
margin-bottom: 0;
border-radius: 0 0 0 0;
}
</style>
<style>
#dialog-message { display: none; padding: 5px; }
</style>
<style>
div.hidden {
display: none;
}
</style>
</head>
<body bgcolor="black">
<div class="simple-subscription-form" id="emailForm">

    &lt;form id="email" runat="server"&gt;
            &lt;script type="text/javascript"&gt;
    function showDiv() {
        div = document.getElementById('dialog-message');
        div.style.display = "block";
    }
&lt;/script&gt;
        &lt;h4&gt;Subscribe&lt;/h4&gt;
        &lt;p&gt;Receive updates and latest news direct from our team. Simply enter your email below :&lt;/p&gt;
        &lt;div class="input-group"/&gt;
        &lt;span class="input-group-label"&gt;
            &lt;i class="fa fa-envelope"&gt;&lt;/i&gt;
        &lt;/span&gt;
        &lt;input class="input-group-field" runat="server" id="emailSignupField" type="email" placeholder="Email" required/&gt;
        &lt;asp:button class="button" OnClientClick="javascript:showDiv(#dialog-message);" OnClick="emailSignupForm_click" runat="server" id="submitEmailForm" Text="Sign Up Now"&gt;&lt;/asp:button&gt;
      &lt;/form&gt;
       &lt;div id="dialog-message" title="Subscribed!" class="hidden" &gt;
        &lt;p&gt;
         &lt;span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"&gt;&lt;/span&gt;
            You have been successfully added to our Mailing List
        &lt;/p&gt;
        &lt;/div&gt;

</div>

</body>
</html>


How to Zoom Images In ASP.NET with JavaScript

How to Zoom Images In ASP.NET with JavaScript

This post is the JavaScript code snuppet that can be used to zoom images in ASP.NET.

This post is the JavaScript code snuppet that can be used to zoom images in ASP.NET.

<script type="text/javascript">  
$("#zoom_03").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: 'active' });  
</script>  
<script type="text/javascript">  
//pass the images to Fancybox  
$("#zoom_03").bind("click", function (e) {  
var ez = $('#zoom_03').data('elevateZoom');  
$.fancybox(ez.getGalleryList());  
return false;  
});  
</script>  
<script type="text/javascript">  
$(" #zoom_01").elevateZoom();  
</script>  
<script type="text/javascript">  
$("#zoom_04a").elevateZoom({ zoomWindowPosition: 1 });  
$("#zoom_04b").elevateZoom({ zoomWindowPosition: 12 });  
$("#zoom_04c").elevateZoom({ zoomWindowPosition: "demo-container", zoomWindowHeight: 200, zoomWindowWidth: 200, borderSize: 0, easing: true });  
$("#zoom_04d").elevateZoom({ zoomWindowPosition: 1, zoomWindowOffetx: 10 });</script>  
<script type="text/javascript">  
$("#zoom_05").elevateZoom({  
zoomType: "inner",  
cursor: "crosshair"  
});</script>  
<script type="text/javascript">  
$("#zoom_08").elevateZoom({  
zoomWindowFadeIn: 500,  
zoomWindowFadeOut: 500,  
lensFadeIn: 500,  
lensFadeOut: 500  
});  
</script>  
<script type="text/javascript">  
$("#zoom_09").elevateZoom({  
gallery: "gallery_09",  
galleryActiveClass: "active"  
});  
</script>  

Thank you!

Using Parcel.js in an ASP.NET Core Application

Using Parcel.js in an ASP.NET Core Application

In this post, we’re going to take an ASP.NET website template that uses Bootstrap 4 and set it up to use Parcel-generated bundles instead.

In this post, we’re going to take an ASP.NET website template that uses Bootstrap 4 and set it up to use Parcel-generated bundles instead.

Parcel.js is a “Blazing fast, zero configuration web application bundler.” In this post, we’re going to take an ASP.NET Core website template that uses Bootstrap 4 and set it up to use Parcel-generated bundles instead.

ASP.NET Core supports bundling and minifying static assets at design-time using the community supported BuildBundlerMinifier package that can be configured in a bundleconfig.json file. However it’s not well suited for scenarios that would benefit from a deploy-time bundling strategy, i.e. assets are built during deployment and output files are not checked in.

This is where Parcel.js comes in. Parcel is a “Blazing fast, zero configuration web application bundler.” The zero-configuration bit is its major selling point because it allows you to get started with minimal effort.

In this post, we’re going to take an ASP.NET website template that uses Bootstrap 4 and set it up to use Parcel-generated bundles instead.

Create & Set Up a New ASP.NET Project

  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
 	{
  "name": "aspnet-parcel-exp",
  "private": true,
  "version": "0.1.0"
}


  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
javascriptnpm install --save-dev [email protected]

  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]

If everything went right, your package.json should look something like this:

{
  "name": "aspnet-parcel-exp",
  "private": true,
  "version": "0.1.0",
  "devDependencies": {
    "parcel-bundler": "^1.11.0"
  },
  "dependencies": {
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1",
    "jquery-validation": "^1.19.0",
    "jquery-validation-unobtrusive": "^3.2.11",
    "popper.js": "^1.14.7"
  }
}


Set Up an Asset Bundle Using Parcel.js

  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
 	/AspNetParcelExp/ # project root
  - .sassrc       # sass configuration
  - assets/       # front end assets root
    - scss/       # Place for all styles
      - site.scss
    - js/         # Place for all scripts
      - site.js
    - bundle.js   # Entry point for our output bundle


  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
// Import styles  
import './scss/site.scss'  

// Setup jquery
import $ from 'jquery'
window.$ = window.jQuery = $

// Import other scripts
import 'bootstrap'  
import 'jquery-validation'  
import 'jquery-validation-unobtrusive'  

import './js/site'


We import everything we depend on. ‘bootstrap’ for example refers to the …/node_modules/bootstrap/ folder. If you want to import a specific file from a package only, you may do that too. The above code should be straightforward, except for maybe jQuery, which I’ll explain in a bit.

  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
 	{
  "includePaths": [
    "./node_modules/"
  ]
}


This will allow referencing package folders without a full path to it. See parcel-bundler/parcel#39 for more information.

  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
 	@import "~bootstrap/scss/bootstrap";


You may also just include the bootstrap SCSS files that you actually need to keep the output size down. Since we’re trying to replicate the template, we could also paste the code in the original template’s site.css here after the line.

  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
 	"scripts": {
  "build": "parcel build assets/bundle.js --out-dir wwwroot/dist/",
  "watch": "parcel watch assets/bundle.js --out-dir wwwroot/dist/"
},

This adds scripts that can be invoked as npm run build to build, for example. It passes the bundle.js entry point to Parcel, and instructs it to generate output files in the wwwroot/dist/ using the --out-dir option.

  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
npm run build

You should now see a bundle.css, bundle.js and a bundle.map file in the wwwroot/dist directory (the directory we specified for the build script above). It’s a good idea to ignore the wwwroot/dist from version control.

  1. Create a web project that uses Razor Pages. To do this on the command line, run:
  2. dotnet new webapp --name AspNetParcelExp cd AspNetParcelExp
  3. Delete the folders under wwwroot. (You may delete this later on, if you want it for reference — our goal is to generate these files using Parcel and use those instead.)
  4. Install npm Dependencies
  5. Add a package.json file to the project root like the following:
 	<script src="~/dist/bundle.js" 
        asp-append-version="true"></script>
 	And replace the stylesheet <link> tags with:
 	<link rel="stylesheet" 
      href="~/dist/bundle.css" 
      asp-append-version="true" />


That’s it. If you did everything right, running the program should display the same output as with the old files.

If it feels like a lot of work, it’s probably because you aren’t familiar with the npm, SCSS, etc., so take your time.

Watching Changes

Rather than running npm run build each time you make changes, you can use HMR (Hot Module Replacement), which will detect pages and reload for you, so that you don’t have to do it.

Open a new terminal instance and run npm run watch. Keep this running while performing any dev changes — it’ll speed you up.

Add a Pre-Publish Task

Add the following to the AspNetParcelExp.csproj file right before the closing

</Project> tag:
<Target Name="ParcelBeforePublish" 
        BeforeTargets="PrepareForPublish">
  <Exec Command="npm run build" />
</Target>


Now, every time you create a publish package, it will run the npm build script. This is particularly important in Continuous Delivery scenarios, because the wwwroot/dist is (usually) not under version control, and the build environment needs to build the files before deploying. You may test this step using dotnet publish: you’ll see output from parcel-bundler.

If you want the task to be run every time is the project is built, change PrepareForPublish to BeforeBuild.

A Note on CommonJS Modules

The parcel-bundler generates a CommonJS module, which means it doesn’t pollute the global window object. Now this can be a problem sometimes, because some libraries — particularly the old ones — have always been polluting window.

Take jQuery for instance. Libraries that require jQuery perform a test on the window object to check if it’s got a jQuery or a $ property. Since CommonJS libraries don’t pollute window, these checks will fail. So we’ll need to manually pollute the window object ourselves. We did that for jquery in bundle.js using:

import $ from 'jquery'
window.$ = window.jQuery = $

This is one thing you need to remember when using Parcel.js or other similar bundlers.

A few pointers and ideas

  • You do not have to use SCSS. LESS or even plain CSS is completely fine.
  • Parcel.js doesn’t have a config file of its own, unlike Grunt or webpack. You may, however, have config files for each tool, and parcel-bundler will honor them. E.g. tsconfig.json for typescript, .sassrc for SCSS, etc.
  • Parce.js has built-in support for PostCSS. For example, to automatically add CSS prefixes to the generated output using the autoprefixer-postcss plugin, add the following to .postcssrc at the project root:
 	{ 
  "plugins": { 
    "autoprefixer": true 
  } 
}


  • You do not have to use SCSS. LESS or even plain CSS is completely fine.
  • Parcel.js doesn’t have a config file of its own, unlike Grunt or webpack. You may, however, have config files for each tool, and parcel-bundler will honor them. E.g. tsconfig.json for typescript, .sassrc for SCSS, etc.
  • Parce.js has built-in support for PostCSS. For example, to automatically add CSS prefixes to the generated output using the autoprefixer-postcss plugin, add the following to .postcssrc at the project root:

Add info to txt file upon button click ASP.NET

I would like to store a int value(increases each time button is pressed) into a .txt file for each person.

I would like to store a int value(increases each time button is pressed) into a .txt file for each person.

I am clueless on how to store each individual's button value upon click. This is what i have came up with. Need help in this.

Actual question: Everybody who votes should be able to see the total number of votes as well as the vote of each candidate. You must use a file to record the vote.

@{
var dataFile = Server.MapPath(@"~/App_Data/data.txt");

string[] votesArr = File.ReadAllText(dataFile).Split(','); // your path
string toWrite = "";

for (int i = 0; i &lt; votesArr.Length; i += 2)
{
    if (votesArr[i].Equals("Harry")) // Equals here is hardcoded, replace with parameter
    {
        votesArr[i + 1] = "" + (Int32.Parse(votesArr[i + 1]) + 1);
    }

    else if (votesArr[i].Equals("John")) // Equals here is hardcoded, replace with parameter
    {
        votesArr[i + 1] = "" + (Int32.Parse(votesArr[i + 1]) + 1);
    }

    else if (votesArr[i].Equals("May")) // Equals here is hardcoded, replace with parameter
    {
        votesArr[i + 1] = "" + (Int32.Parse(votesArr[i + 1]) + 1);
    }
    else if (votesArr[i].Equals("Jane")) // Equals here is hardcoded, replace with parameter
    {
        votesArr[i + 1] = "" + (Int32.Parse(votesArr[i + 1]) + 1);
    }

    toWrite += votesArr[i] + votesArr[i + 1];
}
File.WriteAllText(dataFile, toWrite);

}
<!DOCTYPE html>
<html>
<head>
<title>Elections</title>
</head>
<body>
<p id="1">Harry</p>
<input id="1" type="submit" value="Vote Harry">

&lt;p id="2"&gt;John&lt;/p&gt;
&lt;input id="2" type="submit" value="Vote John"&gt;

&lt;p id="3"&gt;May&lt;/p&gt;
&lt;input id="3" type="submit" value="Vote May"&gt;

&lt;p id="4"&gt;Jane&lt;/p&gt;
&lt;input id="4" type="submit" value="Vote Jane"&gt;

</body>
</html>