How to get the ID of a panel when clicked, when panel ID is dynamically generated

Question

I am building panels using Razor(the number of many items returned varies), and then when a panel is clicked, I need the clicked panelID so I can get more data about that panel clicked. New to jquery/javascript. I have captured panelID so I know that this is being assigned to the panel, as well to paneltextID.

Below is the div containing the panels and the javascript:

                        @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

You don't have to make it an id. Just do this:

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

Then in your jquery you can do this:

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

The actual mistake in your code is where you look up #panelId (which shouldn't exist) in the javascript.

Answer 2

尝试设置ClientIDMode = 静态面板属性。