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

Question

I have a table set up to display information from a model. Each row has an edit and delete button. The delete button works fine as it passes the models id (area.areaID) to aa javascript function and it works fine. The edit button however is passes all variables of the model to a javascript function but the strings are not passing correctly and only the int variable "area.zone" is being passed correctly. The javascript function is suppose to change the placeholders of some inputs in a popup.

The table

        @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>
        }

The script function

    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);
    }

The form in the popup with the inputs. The zone place holder is being changed if ONLY the zone parameter is passed.

 <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>

I am currently getting an error show in the visual studio debugger saying "ReferenceError: BATU is not defined at HTMLInputElement.onclick ( https://localhost:44379/:187:166 )" BATU being an area.areaName. Also if there is a hyphen in the name the value shown in the reference error is cut off before the hyphen

Answer 1

Put single quotes around each of the parameters you expect to be strings:

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

Right now, it is trying to execute editRecord(BATU, /* etc. */) , so it's trying to find an object named BATU instead of passing the string 'BATU', hence the error.

Side note: I'm assuming you want to fill in the input boxes with the current values of the item you're editing. The placeholder attribute doesn't act as the default value of an input box; it displays the text as a hint of what should go in it, so if the user wanted to use the placeholder as the input value, they would have to type it in manually. Setting the default value can be done by setting its value attribute. Using jQuery: $('#editAreaName').val(editName);