如何将参数从剃刀发送到 JavaScript 函数

Question

我设置了一个表格来显示来自模型的信息。每行都有一个编辑和删除按钮。删除按钮工作正常，因为它将模型 ID (area.areaID) 传递给 javascript 函数并且工作正常。然而，编辑按钮将模型的所有变量传递给 javascript 函数，但字符串没有正确传递，只有 int 变量“area.zone”被正确传递。 javascript函数假设在弹出窗口中更改某些输入的占位符。

桌子

        @foreach (var area in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(ModelItem => area.areaName)
                </td>
                <td>
                    @Html.DisplayFor(ModelItem => area.zone)
                </td>
                <td>
                    @Html.DisplayFor(ModelItem => area.areaCommunity)
                </td>
                <td>
                    @Html.DisplayFor(ModelItem => area.city)
                </td>
                <td>
                    @Html.DisplayFor(ModelItem => area.region)
                </td>
                <td>
                    <input class="btn btn-primary button button4" type="button" value="Edit" onclick="editRecord(@area.areaName, @area.zone, @area.areaCommunity, @area.city, @area.region)"/>
                    <input class="btn btn-danger button button4" type="button" value="Delete" onclick="deleteRecord(@area.areaID)"/>

                </td>


            </tr>
        }

脚本函数

    function editRecord(editName, editZone, editAC, editCity, editRegion) {
        $('#editModal').modal('show');
        $('#editAreaName').attr("placeholder", editName);
        $('#editZone').attr("placeholder", editZone);
        $('#editAreaCommunity').attr("placeholder", editAC);
        $('#editCity').attr("placeholder", editCity);
        $('#editRegion').attr("placeholder", editRegion);
    }

带有输入的弹出窗口中的表单。如果仅传递 zone 参数，则更改 zone 占位符。

 <form>
                    <div class="form-group">
                        Area<input class="form-control" type="text"
                               placeholder="" id="editAreaName" />
                    </div>
                    <div class="form-group">
                        Zone<input class="form-control" type="text"
                               placeholder="" id="editZone" />
                    </div>
                    <div class="form-group">
                        Area Community<input class="form-control" type="text"
                               placeholder="" id="editAreaCommunity" />
                    </div>
                    <div class="form-group">
                        City<input class="form-control" type="text"
                               placeholder="" id="editCity" />
                    </div>
                    <div class="form-group">
                        Region<input class="form-control" type="text"
                               placeholder="" id="editRegion" />
                    </div>
                    <div class="form-group">
                        <input type="submit" , value="Update" class="btn btn-primary button button4" id="submitEdit" />
                    </div>
</form>

我目前在 Visual Studio 调试器中显示错误消息，显示“ReferenceError: BATU is not defined 在 HTMLInputElement.onclick (https://localhost:44379/:187:166)" BATU 是 area.areaName。此外，如果名称中有连字符，则参考错误中显示的值在连字符之前被截断

Answer 1

在您希望为字符串的每个参数周围加上单引号：

<input class="btn btn-primary button button4" type="button" value="Edit" onclick="editRecord('@area.areaName', @area.zone, '@area.areaCommunity', '@area.city', '@area.region')"/>

现在，它正在尝试执行editRecord(BATU, /* etc. */)，因此它试图找到一个名为 BATU 的对象，而不是传递字符串 'BATU'，因此出现了错误。

旁注：我假设您想用您正在编辑的项目的当前值填写输入框。 The placeholder attribute 不作为输入框的默认值；它将文本显示为提示应该输入的内容，因此如果用户想使用占位符作为输入值，则必须手动输入。可以通过设置其 value 属性来设置默认值。使用 jQuery：$('#editAreaName').val(editName);