仅从类中选择一项

Question

我有一个 GridView，其中有一个 ID="Description" 和 CssClass="dsc" 的 。在 aspx 文件后面的 C#.net 代码中，我有一个数据表，其中包含数据库中的地址和描述，我使用纬度/经度坐标填充 Google 地图，这些纬度/经度坐标是从带有小 Google 标记的地址转换而来的。单击标记时，该地址的说明会在标记上方弹出。这工作正常。

现在，对于困难的部分，我尝试向 GridView 中的每一行添加唯一的相同描述。这有道理吗？单击一行时（每行都有一个标题，这是来自数据库的描述），描述需要在 Google 地图中的标记上方打开。 GridView 中的每一行都有自己的描述和地址。

到目前为止，这是我的代码：

public partial class NEW_controls_RoadsAndBridges : System.Web.UI.UserControl
{
    private SqlConnection conn = new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            getInfo();
        }
    }



    protected void getInfo()
    {
        try
        {
            conn.Open();
            ///
            ///Check to see if connection is good
            ///
            string selectString = "SELECT Address, Description, Date, Lat, Long FROM D2_ReportAProblemForm ORDER BY id DESC";
            SqlCommand cmd = new SqlCommand(selectString, conn);
            SqlDataAdapter adapter = new SqlDataAdapter(cmd);

            DataTable dt = new DataTable();
            adapter.Fill(dt);
            BuildScript(dt);
            cmd.Dispose();

            //If successful 
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        catch (SqlException sqle)
        {
            //if error
            // Response.Redirect("ReportAProblemInfo.aspx?info=fail");
        }
        finally
        {
            if (conn != null)
                conn.Close();
        }
    }



    private void BuildScript(DataTable tbl)
    {
        String Locations = "";
        String Description = "";
        String Address = "";
        String java = "";
        String java2 = "";
        int n = 0;
        foreach (DataRow r in tbl.Rows)
        {
            string Latitude = r["Long"].ToString();
            string Longitude = r["Lat"].ToString();
            Description = r["Description"].ToString();
            Address= r["Address"].ToString();
            string marker = "marker" + n.ToString();
            // create a line of JavaScript for marker on map for this record 
            Locations += Environment.NewLine + "var "+marker+@"=new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")); map.addOverlay("+marker+@");";

            java += @"GEvent.addListener(" + marker + @", 'click', function() 
                    {
                        " + marker + @".openInfoWindowHtml('" + Description + @"');
                        map.checkResize();
                        map.setCenter(" + marker + @");
                    });";
            java2 += marker+@".openInfoWindowHtml('" + Description + @"');
                        map.checkResize();
                        map.setCenter("+marker+@");";

            n++;
        }

        // construct the final script
        js.Text =
            @"<script type='text/javascript'>
            function initialize() 
            {
                if (GBrowserIsCompatible()) 
                {
                    var map = new GMap2(document.getElementById('map_canvas'),{ size: new GSize(350,300) } ); 
                    map.checkResize();
                    map.setCenter(new GLatLng(35.347769,-98.05),8); 
                    map.openInfoWindow(map.getCenter(), document.createTextNode('Hello')); 
                     " + Locations + java + @"


                    $(document).ready(function(){
                        $('.dsc').css('cursor','pointer');
                        $('.dsc').each(function( intIndex ) {
                            $(this).bind ('click',function() {
                                 " + java2 + @"
                            });
                        });
                         });

                    map.setUIToDefault();
                }
            }
            </script> ";
    }
    protected void GridView1_DataBound(object sender, EventArgs e)
    {

        string selectString = "SELECT Address, Description, Date, Lat, Long FROM D2_ReportAProblemForm ORDER BY id DESC";
        SqlCommand cmd = new SqlCommand(selectString, conn);
        SqlDataAdapter adapter = new SqlDataAdapter(cmd);

        DataTable dt = new DataTable();
        adapter.Fill(dt);

        String Locations = "";
        String Description = "";
        String java2 = "";
        int n = 0;
        foreach (DataRow r in dt.Rows)
        {
            string Latitude = r["Long"].ToString();
            string Longitude = r["Lat"].ToString();
            Description = r["Description"].ToString();
            string marker = "marker" + n.ToString();
            // create a line of JavaScript for marker on map for this record 
            Locations += Environment.NewLine + "var " + marker + @"=new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")); map.addOverlay(" + marker + @");";

            java2 += marker + @".openInfoWindowHtml('" + Description + @"');
                        map.checkResize();
                        map.setCenter(" + marker + @");";

            n++;
            js2.Text = @"<script type='text/javascript'>
                    {
                        $('.dsc').click(function()
                        {
                            " + java2 + @"
                    }
                    </script> ";
        }//end foreach



    }//end _DataBound

}

有两个 ，其 ID 为 js 和 js2，因此我可以正确放置 jQuery/JavaScript到 C# 代码中。

GridView 代码：

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
    ondatabound="GridView1_DataBound">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <table width="500px">
                    <tr style="background-color: #dcdcdc;" >
                        <td colspan="2" style="text-align: left; font-weight: bold; font-size: 14xp;">
                        <asp:Label ID="Description" CssClass="dsc" runat="server" Text='<%#Eval ("Description") %>'></asp:Label>
                        </td>
                    </tr>
                    <tr style="text-align: left; font-weight: lighter; font-size: 12px;">
                        <td>
                        <%#Eval ("Address") %>
                        </td>
                        <td>
                        <%#Eval ("Date") %>
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

请帮我解决这个问题，我已经在这一部分上工作了一个星期，我完全被难住了。 谢谢你们！

Answer 1

好吧，我想我看到了问题所在。你有这样的情况：

foreach (DataRow r in dt.Rows){
...
   js2.Text = @"<script type='text/javascript'>
                    {
                        $('.dsc').click(function()
                        {
                            " + java2 + @"
                    }
                    </script> ";
}//end foreach

问题是循环的每次迭代都会清除你之前所做的事情。 js2.Text= 表示将文本设置为等于该字符串，替换其中已有的内容。

现在，问题#2。您的 jquery 如下：

$('.dsc').click(function()

这里的问题是，这将适用于您的每一行，因为每一行都有 dsc 类。因此，即使您通过将 text= 更改为 text+= 来解决问题#1，您的代码仍然无法工作。

我可以看到你有两个选择。首先，除了类之外，您还可以为每个标签分配一个不同的 ID。然后，对于每一行，您的代码可以是 $('#myID1').click...，其中 myID1 是为每行生成的唯一 ID。如果您这样做，请务必小心，因为 .net 喜欢生成又大又难看的 ID，而这些 ID 与您想象的不一样。

另一种选择，也是我更喜欢的一种，是将 onclick 直接添加到标签中。我认为您应该能够在数据绑定方法中的 foreach 中获取标签。然后你做类似的事情：

theLabel.Attributes.Add("onclick", java2);

可能需要对 java2 进行一些轻微的调整，我没有详细查看它，但这样 onclick 将直接附加到初始加载时的标签，而不需要任何 javascript 来添加它。