動態生成面板ID時，如何獲取點擊時面板的ID

Question

我正在使用 Razor 構建面板（返回的許多項目的數量各不相同），然后當一個面板被點擊時，我需要點擊的 panelID 以便我可以獲得有關點擊的面板的更多數據。 jquery/javascript 的新手。 我已經捕獲了 panelID，所以我知道這被分配給了面板，以及 paneltextID。

下面是包含面板和 javascript 的 div：

                        @for (int i = 0; i < @rows; i++)
                        {
                            <div class="row">

                           @for (int j = 0; j < @cols; j++)
                                { if(panelCount <= totalCount){
                                sqlCommand = "SELECT FullDescription AS Description FROM shmr.RemoteSQLDatabases WHERE DBID1 = " + @panelCount + " ORDER BY DBName";
                                //<p>@sqlCommand</p>

                                //This grid contains the information for the specific database of this panel
                                var Grid2 = new WebGrid(DB.Query(sqlCommand));
                                //var DBName = DB.Query(sqlCommand);
                                 DBName = DB.QueryValue("SELECT DBName FROM shmr.RemoteSQLDatabases WHERE DBID1 = " + @panelCount + " ORDER BY DBName");

                                string panelID =null;
                                panelID = "panel" + panelCount.ToString();
                               // <p>Panel is @panelID</p>

                                <div class="col-md-3">

                                    <div id= @panelID class='panel panel-success',  style="display: inline-block">
                                        <div class='panel-heading text-center'><b>@DBName </b><img src="~/Images/Doctor (2).png" align="left" width="30" height="30" /></div>
                                        <div class="panel-body m200">

                                           @if(Grid2 !=null)
                                            {

                                                <text> @Grid2.GetHtml(columns:Grid2.Columns(Grid2.Column("Description")))</text>

                                                <input type="hidden" name="paneltextID" value=@panelCount>
                                                <p>PanelID = @panelID</p>

                                            }
                                            else{
                                            <text>No data was found to display!</text>
                                            }
                                        </div>
                                        <div class="panel-footer text-center">
                                            Database status as of @DT
                                        </div>
                                    </div>




                                </div>
                                 panelCount = panelCount + 1;
                                    }
                                }
                            </div>
                        }

    </div>

        $(".panel").click(function () {
            var panelID = $('#panelID').val();
            if (panelID != null) {
                alert("Panel " + panelID + " clicked! :)");
            } else {
                alert("PanelID is null :(");
            }
        });

Answer 1

您不必將其設為ID。 只要這樣做：

<div class="panel panel-success" data-id=@panelId ...>

然后在您的jquery中，您可以執行以下操作：

$(".panel").click(function () {
        var panelID = $(this).data('id');
        if (panelID != null) {
            alert("Panel " + panelID + " clicked! :)");
        } else {
            alert("PanelID is null :(");
        }
    });

代碼中的實際錯誤是您在javascript中查找#panelId（不應存在）。

Answer 2

嘗試設置ClientIDMode = 靜態面板屬性。