如何將參數從剃須刀發送到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參數，則將更改區域占位符。

 <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：未在HTMLInputElement.onclick（ https：// localhost：44379 /：187：166 ）上定義BATU ”，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'，因此出現錯誤。

旁注：我假設您要在輸入框中填寫您正在編輯的項目的當前值。 占位符屬性不用作輸入框的默認值。 它會顯示該文本以提示應該輸入的內容，因此，如果用戶希望使用占位符作為輸入值，則必須手動輸入。 可以通過設置默認值屬性value來設置默認值。 使用jQuery： $('#editAreaName').val(editName);