如何使用jquery从cshtml foreach循环获取每个值

Question

I am building a staff appraisal system, where users are asked 10 questions in order to appraise an employee. Something like this

Each star is assigned a value between 1 - 5. I am currently getting each value, but how do I assign each value to a variable like: var questionOne = 2; var questionTwo = 3; var questionOne = 2; var questionTwo = 3;

This is my code so far:

<h4>Score Ola using our rating form below.</h4>
<p>Job Title: Nanny</p>
<p style="color: red; font-size: 12px;">
  Note: Questions are selected based on job title. We are constantly reviewing the list of job specific questions, please assist by recommending questions you would like to add to our job specific questionaire <a href="#">here</a>
</p>
@foreach (var question in Model.AppraisalQuestions)
{
  <p>@question.QuestionDescription</p>
  <div class="row lead evaluation">
    <div id="colorstar" class="starrr ratable"></div>
    <span id="count">0</span> star(s) - <span id="meaning"> </span>
  </div><br />
}

The Javascript so far:

$(document).ready(function() {
  var correspondence = ["", "Poor", "Below Expectation", "Above Expectation", "Good", "Excelent" ];
  $('.ratable').on('starrr:change', function(e, value) {
    $(this).closest('.evaluation').children('#count').html(value);
    $(this).closest('.evaluation').children('#meaning').html(correspondence[value]);
    var currentval =  $(this).closest('.evaluation').children('#count').html();
    var target =  $(this).closest('.evaluation').children('.indicators');
    target.css("color","black");
    target.children('.rateval').val(currentval);
    target.children('#textwr').html(' ');
    alert(value);
  });

I want to store each score in a database. Any help will be highly appreciated. Thanks

Answer 1

I may be misunderstaing your question completely but this pseudo code works for me. I added five empty stars to each question and assigned value and questionID to each. You should be able to change the star icon via jQuery too but I didn´t include that.

Just let me know if I am misunderstanding.

Markup code:

@foreach (var question in Model.AppraisalQuestions)
{
    <p>@question.QuestionDescription</p>
    <div class="row lead evaluation">
        <i class="glyphicon glyphicon-star-empty starrr ratable" data-value="1" data-question="@question.QuestionID"></i>
        <i class="glyphicon glyphicon-star-empty starrr ratable" data-value="2" data-question="@question.QuestionID"></i>
        <i class="glyphicon glyphicon-star-empty starrr ratable" data-value="3" data-question="@question.QuestionID"></i>
        <i class="glyphicon glyphicon-star-empty starrr ratable" data-value="4" data-question="@question.QuestionID"></i>
        <i class="glyphicon glyphicon-star-empty starrr ratable" data-value="5" data-question="@question.QuestionID"></i><br />
        <span class="count">0</span> star(s) - <span class="meaning"> </span>
    </div><br />
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        var correspondence = ["", "Poor", "Below Expectation", "Above Expectation", "Good", "Excelent"];
        $(".ratable").click(function() {
            var value = $(this).data("value");
            var questionID = $(this).data("question");
            $(this).closest('.evaluation').children('.count').text(value);
            $(this).closest('.evaluation').children('.meaning').html(correspondence[value]);

            //TODO: send value and questionID to server, perhaps via ajax or something
        });
    });
</script>