Is there a way to make my JavaScript code function within an ASP.NET CSHTML file?

Question

Is there a way to make my JavaScript code function within an ASP.NET CSHTML file?

I am working on a web project where I have an HTML input for uploading a picture to my FTP server. I want to use JavaScript to detect changes on my upload button. This is the code in my CSHTML file:

    @using (Html.BeginForm("UploadFile", "Upload", FormMethod.Post, new { 
    enctype = "multipart/form-data" }))
    {

    <input id="uploadFile" placeholder="No file..." disabled="disabled" />
    <div class="fileUpload btn btn-primary">
        <span>Browse</span>
        <input id="uploadBtn" type="file" class="upload" />
    </div>
    <input type="submit" title="OK" />
}

Here is my JavaScript code:

<head>
<script type="text/javascript" language="javascript">
        document.getElementById("uploadBtn").onchange = function ()
        {
            document.getElementById("uploadFile").value = this.value;
        };
    </script>
</head>

However, when I run the code, I receive the following error message:

0x800a138f - JavaScript runtime error: Unable to get property 'onchange' of undefined or null reference

I have tested the HTML and JS in a fiddle and they work fine, so it seems that there may be some compatibility issues between Razor syntax and JavaScript. Any suggestions on how to resolve this?

javascript c#asp.net asp.net-mvc razor

Answer 1

Answer №1

Consider this suggestion:

1.

<head>
<script type="text/javascript" language="javascript">

$(document).ready(function(){
        document.getElementById("uploadBtn").onchange = function ()
        {
            document.getElementById("uploadFile").value = this.value;
        };
});
    </script>
</head>

Based on @StephenMuecke's input : It is advised to move your script right before the closing </body> tag for better practice.

<body> .............. .............

<script type="text/javascript" language="javascript">

$(document).ready(function(){
  $('#uploadBtn').on('change', function() {
   $("#uploadFile").val($(this).val());
 })
});   </script>

</body>

3.In case you are using a separate script file with extension .js, you can try this approach

     $(document).on('change','#uploadBtn' ,function() {
         $("#uploadFile").val($(this).val());
      });

Answer 2

Consider this suggestion:

1.

<head>
<script type="text/javascript" language="javascript">

$(document).ready(function(){
        document.getElementById("uploadBtn").onchange = function ()
        {
            document.getElementById("uploadFile").value = this.value;
        };
});
    </script>
</head>

Based on @StephenMuecke's input : It is advised to move your script right before the closing </body> tag for better practice.

<body> .............. .............

<script type="text/javascript" language="javascript">

$(document).ready(function(){
  $('#uploadBtn').on('change', function() {
   $("#uploadFile").val($(this).val());
 })
});   </script>

</body>

3.In case you are using a separate script file with extension .js, you can try this approach

     $(document).on('change','#uploadBtn' ,function() {
         $("#uploadFile").val($(this).val());
      });

Is there a way to make my JavaScript code function within an ASP.NET CSHTML file?

Answer №1

Similar questions

Exploring the process of cycling through "Fetch" JSON data in React.js for a dynamic slider component after setting it to state

Choose either null or Integer as the data type for the dbtype in the SQL output parameter

Inserting data into a table using variables in Mssql database management system

Next.js has a problem where it displays incorrect data when users navigate rapidly between pages

Why is the background image not loading properly on first hover with CSS?

Scrolling smoothly with React-Leaflet

Including a 3DS card to a Stripe Client for recurring payments

The GM_xmlHttpRequest POST method is not functioning properly when called within an event listener

Encountering an abrupt conclusion of JSON input error during a Post request on an API while utilizing an access token in a

Guide on repeatedly clicking the Cookie to enjoy Cookie Clicker on https://orteil.dashnet.org/cookieclicker/ with the help of Selenium and Python

Having difficulty assigning a value to the RadNumeric Text box during the OnBlur event

Struggling to update a document fetched through a Mongoose model and handled as a promise

Mastering the Art of Utilizing $(this) in jQuery

Ways to extract the first name and email address from a JSON payload

Enhancing Javascript Dialog Box with a Touch of Animation

Transforming MongoDB array into a string within the database

The initial click on a jQuery event is not registering as expected

Building a hybrid application in Angular using UpgradeModule to manage controllers

Using JavaScript to display dynamic data pulled from Django models

What is the best way to display a removed item from the Redux state?