How to call jquery in Blazor

Anonymous

I am not able to call Jquery in Blazor please suggest how

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="Burned.aspx.cs" Inherits="Weight.Burned" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<head>
    <body style="background-color:powderblue;">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
 <title>METS APP</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
     $(document).ready(function () {
         setOption();
         setCateOption();
         $('#CategoryDDL').change(function () {
             setOption();
         });

         $('#Calculate').click(function Calculate() {
             var weigth = 0;
             var weightsel = '';
             var time = 0;
             var perform = 'y';
             var MEts = $('#DescriptionDDL option:selected').val();
             weigth = $('#DropDownList1 option:selected').text() == 'lbs' ? $('#tb_Weight').val() / 2.2 : $('#tb_Weight').val();
             time = $('#DropDownList2 option:selected').text() == 'min' ? $('#tb_time').val() / 60 : $('#tb_time').val();

             if (weigth < 30 || weigth > 200) {
                 alert("Weight out of range !");
                 perform = 'n';
             }

             if (time > 4) {
                 alert("Time out of range !");
                 perform = 'n';
             }

             if (perform == 'y') {
                 $('#result').val(weigth * time * MEts);
             }
         });
     });

     function setOption() {
         $('#DescriptionDDL').html('');
         var DefaultOption = '<option selected  disabled>' + "- Select -" + '</option>';
         $('#DescriptionDDL').append(DefaultOption);
         var Category = $('#CategoryDDL option:selected').text();
         if (Category != '- Select -') {
             $.getJSON('Employees.json', function (data) {
                 for (var act of data.burned.ACTIVITY) {
                     if (act.CATEGORY.toLowerCase() == Category.toLowerCase()) {
                         var str = act.DESC.replace(/\uFFFD/g, '');
                         var option = '<option value=' + act.METS + '>' + str + '</option>';
                         $('#DescriptionDDL').append(option);
                     }
                 }
             });
         }
     }
     function setCateOption() {
         $('#CategoryDDL').html('');
      
         $.getJSON('Employees.json', function (data) {

             const unique = [...new Set(data.burned.ACTIVITY.map(item => item.CATEGORY))];
             var flag = 'n';
             for (var act of unique) {
                 if (flag == 'n') {
                     var option = '<option selected  disabled>' + "- Select -" + '</option>';
                     $('#CategoryDDL').append(option);
                     flag = 'y';
                 }

                 var option = '<option value=' + act + '>' + act + '</option>';
                 $('#CategoryDDL').append(option);

             }
         });
     }
 
 </script>
</head>



<div>
    <h1>Burned Calories</h1>
     <br />
    Weight            : <br /><input name="tb_Weight" type="number"   id="tb_Weight"   /> 
    <select name="DropDownList1" id="DropDownList1">
       <option value="0">kg</option> 
        <option value="1">lbs</option>
    </select>
    <br />
    Activity Time     : <br /><input name="tb_time" type="number" id="tb_time"  />  
    <select name="DropDownList2" id="DropDownList2">
        <option value="0">min</option>
        <option value="1">hr</option>
    </select>
   Activity           :
    <br />
    <select name="CategoryDDL" id="CategoryDDL">
        <option selected="selected" value="- Select -" disabled="">- Select -</option>

    </select>
    <br />
    Description       : <br /><select id="DescriptionDDL"></select>
    <br />
    <button type="button" id="Calculate" value="Calculate">Calculate</button>
    <br />
    Result In Calories: <input name="result" type="text" id="result" readonly/>


</div>
  </body>
</asp:Content>

Farid Uddin Kiron MSFT 456 Reputation points Microsoft Vendor

2023-11-01T08:17:16.5766667+00:00

Actually, blazor modified the DOM property externally using JS directly or via JS Interop, the DOM may no longer match Blazor's internal representation, which can result in undefined behavior. In that scenario, there might be some security risk as well. So, have you tried the suggestion @Bruce explained? In addition to this, please refer to this official document how should you proceed with JavaScript for blazor app.

Accepted answer

Bruce (SqlWork.com) 61,731 Reputation points

2023-10-30T01:34:35.3633333+00:00

in general you should not use jquery with blazor apps. in particular you should not modify dom objects created by blazor. a cascading dropdown can and should be written with blazor code with no javascript.

note: javascript dom manipulation in Blazor apps is an advanced technique. You need to really understand the Blazor render tree processing when doing this.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

How to call jquery in Blazor

0 additional answers