使用Blazor和ASP.NET Core的JQuery中存在无效或意外的令牌

Question

我对jQuery有问题，我想在不同的函数中传递两个参数，但我没有成功，在控制台上得到了一个错误：

无效或意外的令牌

这是我的代码：

@model UsersWithCoursesViewModel
@{
    this.ViewData["Title"] = "Evaluation";
    int counter = 1;
}
<h1 class="text-center mt-3 mb-3">@this.ViewData["Title"]</h1>
<table class="table">
<thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Username</th>
        <th scope="col">Course</th>
        <th scope="col">Grade</th>
    </tr>
</thead>
<tbody>
    @foreach (var course in Model.Courses)
    {
        <tr>
            <th>@counter</th>
            <td>@course.AddedByUser</td>
            <td>@course.CourseName</td>
            <td class="d-flex justify-content-between" id="evaluation">
                @course.Grade
                <a class="btn btn-warning" onclick="addInput(@course.CourseId, '@course.AddedByUserId')">Change</a>
            </td>
        </tr>
        counter++;
    }
</tbody>
</table>
@section Scripts { 
<script>
    function addInput(courseId, addedByUserId) {
        $("#evaluation").remove(".a").text(null).prepend("<label for='evaluation_input'>Evaluate</label><input id='evaluation_input' type='number' /><a class='btn btn-warning' onclick='evaluates(" + courseId + ", " + addedByUserId + ")'>Save</a>")
    }
    function evaluates(courseId, addedByUserId) {
        const evaluation = $("#evaluation_input").val();
        console.log(userId)
    }
</script>
}

当我点击带有事件addClick()的按钮时，一切都是好的(输入出现并且courseId和addedByUserId被写入控制台(，但是当我点击具有名称Save和"评估"；函数，我得到错误"；无效或意外的令牌"；。我认为问题来自addedByUserId变量，它是GUID，当我更改这个时

onclick='evaluates(" + courseId + ", " + addedByUserId + ")

到这个

"evaluates(" + courseId + ", " + 5 + ")"

没有问题(控制台输出"5"(。

Answer 1

主要问题是因为您需要将内联事件处理程序的参数值用引号括起来。这些引号本身也需要转义，这样它们就不会干扰正在构建的JS字符串以及正在构建的HTML属性的语法。正确的语法是：

function addInput(courseId, addedByUserId) {
  $("#evaluation").remove(".a").text(null).prepend('<label for="evaluation_input">Evaluate</label><input id="evaluation_input" type="number" /><a class="btn btn-warning" onclick="evaluates('' + courseId + '', '' + addedByUserId + '')">Save</a>');
}
function evaluates(courseId, addedByUserId) {
  const evaluation = $("#evaluation_input").val();
  console.log(evaluation)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Username</th>
      <th scope="col">Course</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>AddedByUser_1</td>
      <td>CourseName_1</td>
      <td class="d-flex justify-content-between" id="evaluation">
        Grade_1
        <a class="btn btn-warning" onclick="addInput(1, 'AddedByUserId_1')">Change</a>
      </td>
    </tr>
    <tr>
      <th>2</th>
      <td>AddedByUser_2</td>
      <td>CourseName_2</td>
      <td class="d-flex justify-content-between" id="evaluation">
        Grade_2
        <a class="btn btn-warning" onclick="addInput(2, 'AddedByUserId_2')">Change</a>
      </td>
    </tr>
    <tr>
      <th>3</th>
      <td>AddedByUser_3</td>
      <td>CourseName_3</td>
      <td class="d-flex justify-content-between" id="evaluation">
        Grade_3
        <a class="btn btn-warning" onclick="addInput(3, 'AddedByUserId_3')">Change</a>
      </td>
    </tr>
  </tbody>
</table>

-更新-

然而，由于在运行时构建内联事件处理程序，这是一个相当丑陋的代码，而且还有一个错误，即无论单击哪个"更改"链接，编辑input都只添加到第一行。

要解决第一个问题，请使用具有data属性的不引人注目的事件处理程序来保存元素元数据。为了解决第二个问题，在所有重复的HTML结构上使用公共类，以及基于单击的a元素的DOM遍历方法。

更正后的代码如下所示：

jQuery($ => {
  let $template = $('#evaluation-template');
  $('.btn.change').on('click', e => {
    let $btn = $(e.target);
    let template = $template.html().replace('[courseid]', $btn.data('courseid')).replace('[addedbyuserid]', $btn.data('addedbyuserid')).trim();
    $btn.closest('.evaluation').html(template);
  });
  $(document).on('click', '.btn.save', e => {
    let $btn = $(e.target);
    console.log($btn.data('courseid'), $btn.data('addedbyuserid'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Username</th>
      <th scope="col">Course</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>AddedByUser_1</td>
      <td>CourseName_1</td>
      <td class="d-flex justify-content-between evaluation">
        Grade_1
        <a class="btn btn-warning change" data-courseid="1" data-addedbyuserid="AddedByUserId_1">Change</a>
      </td>
    </tr>
    <tr>
      <th>2</th>
      <td>AddedByUser_2</td>
      <td>CourseName_2</td>
      <td class="d-flex justify-content-between evaluation">
        Grade_2
        <a class="btn btn-warning change" data-courseid="1" data-addedbyuserid="AddedByUserId_2">Change</a>
      </td>
    </tr>
    <tr>
      <th>3</th>
      <td>AddedByUser_3</td>
      <td>CourseName_3</td>
      <td class="d-flex justify-content-between evaluation">
        Grade_3
        <a class="btn btn-warning change" data-courseid="1" data-addedbyuserid="AddedByUserId_3">Change</a>
      </td>
    </tr>
  </tbody>
</table>
<script type="text/template" id="evaluation-template">
  <label for="evaluation_input">Evaluate</label>
  <input class="evaluation_input" type="number" />
  <a class="btn btn-warning save" data-courseid="[courseid]" data-addedbyuserid="[addedbyuserid]">Save</a>
</script>