Using javascript/jquery from within razor code

Question

It seems simple but i cant figure out how to call javascript function from within razor code.

Problem: I need to get the position of a column in my table header with the id passed.. I am calling getPosition function from within my razor code

<table>
   <thead>
       <tr>
       @foreach (Assessment geAssessment in Model.assessments)
       {
          <th [email protected]>@geAssessment.Name</th>
       }
       </tr>
   </thead>
   <tbody>
     <tr>
       @foreach (ShortResult geResult in Model.results)
       {
           @:{ var i = getPosition(@geResult.assessmentId);}
       }
      </tr>
  </tbody>
 </table>

My script in the same view/page

<script type="text/javascript">
   function getPosition(id) {
    var c = '#' + id;
    alert(c);
    return $c.index();    
  }

  $(function () {});
</script>

UPDATE

As suggested by Max, i changed my table as follows, which is perfect but now how can i set a value in the td

<tbody>
  <tr>
    @{
                                    var index = 4; //start index of assessments will be 4
                                    foreach(Assessment geAssessment in Model.assessments)
                                    {
                                    <td>
                                        @foreach (ShortResult geResult in Model.results)
                                        {
                                            if(geResult.StudentID == geStudent.studentid)
                                            {
                                            @:
                                                <script>
                                                    {

                                                        var assessmentIndex = getPosition(@geResult.assessmentId);
                                                        @*if (assessmentIndex == @index) {
                                                            geResult.ResultValue
                                                        }*@

                                                    }
                                                </script>

                                            }
                                        }
                                     </td>
                                    index++;
                                    }
                                 }
  </tr>    
 </tbody>

Now let me explain whats going on ..

i want to add x tds in a row based on the number of assessments in my model
for each td i check if i have a result with this particular assessmentid, if yes i want to print it in the td..there is some syntax error here:
```
if (assessmentIndex == @index) {
                                                            geResult.ResultValue
 }
```

Max · Accepted Answer · 2017-03-10 03:09:50Z

1

Your script with getPosition function has to be above your call. After @: you have to use directive otherwise it's considered like a text. Your code has to look like:

<script type="text/javascript">
  function getPosition(id) {
    var c = '#' + id;
    alert(c);
    return $c.index();    
  }

  $(function () {});
</script>


<table>
   <thead>
       <tr>
       @foreach (Assessment geAssessment in Model.assessments)
       {
          <th [email protected]>@geAssessment.Name</th>
       }
       </tr>
   </thead>
   <tbody>
     <tr>
       @foreach (ShortResult geResult in Model.results)
       {
           @: <script>{ var i = getPosition(@geResult.assessmentId);}</script>
       }
      </tr>
  </tbody>
 </table>

edited Mar 10, 2017 at 3:09

answered Mar 10, 2017 at 2:31

Max

1,0883 gold badges13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samra Over a year ago

yes this bit works! but it says i cannot use <script> tag within <tr> tag..and i cant use it within a <td>..see update please

Prashant-Systematix · Accepted Answer · 2017-03-10 04:21:18Z

1

Hi there is no need of @: syntax you can directly use it so now your code look like.

 <script type="text/javascript">
  function getPosition(id) {
    var c = '#' + id;
    alert(c);
    return $c.index();    
  }

  $(function () {});
</script>

<table>
   <thead>
       <tr>
       @foreach (Assessment geAssessment in Model.assessments)
       {
          <th [email protected]>@geAssessment.Name</th>
       }
       </tr>
   </thead>
   <tbody>
     <tr>
       @foreach (ShortResult geResult in Model.results)
       {
        <script>{ var i = getPosition(@geResult.assessmentId);}</script>
       }
      </tr>
  </tbody>
 </table>

answered Mar 10, 2017 at 4:21

Prashant-Systematix

2692 silver badges5 bronze badges

Collectives™ on Stack Overflow

Using javascript/jquery from within razor code

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related