ASP.NET + jQuery + 动态创建的超链接控件答案

【问题标题】：ASP.NET + jQuery + Dynamically Created HyperLink controlsASP.NET + jQuery + 动态创建的超链接控件
【发布时间】：2009-06-16 15:27:17
【问题描述】：

我有一个使用 jQuery 的 ASP.NET 应用程序。我的 ASP.NET 应用程序根据数据库中的某些值动态生成一些 HyperLink 元素。当用户单击这些 HyperLink 元素之一时，我想显示一个 jQuery 对话框，允许用户编辑 HyperLink 的文本。我有这部分工作。

当用户单击“保存”按钮时，我需要读取超链接元素的值并将它们保存回数据库。目前，我得到了 HyperLink 元素的初始值。但是，我无法获得任何修改后的值。如何获取用户提供的值？我在这里提供了我的 .aspx 和 .aspx.cs 代码：

测试

报告：

    <div id="recommendDialog" title="Number">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr><td>Number</td></tr>
            <tr><td><input id="optionName" type="text" /></td></tr>
        </table>
    </div>

    <asp:Button ID="saveButton" runat="server" Text="Save" OnClick="saveButton_Click" />
</div>
</form>    

<script type="text/javascript">
    var editingID = null;

    $("#recommendDialog").dialog({
        autoOpen: false,
        height: 200,
        modal: true,
        buttons: {
            Cancel: function() {
                $(this).dialog('close');
            },

            'OK': function() {
                var newValue = $("#optionName").val();
                if (editingID != null) {
                    $(editingID).attr("name", newValue);
                    $(editingID).html(newValue);
                }
                $(this).dialog('close');
            }
        },
        close: function() {

        }
    });

    function update_Click(link) {
        editingID = "#" + link.id;
        $("#optionName").val(link.name);
        $('#recommendDialog').dialog('open');            
    }
</script>

这是我的代码隐藏：

公共部分类_默认：System.Web.UI.Page { 受保护的覆盖无效 OnInit(EventArgs e) { base.OnInit(e); 添加超链接（）； }

protected void Page_Load(object sender, EventArgs e)
{}

protected void saveButton_Click(object sender, EventArgs e)
{
    foreach (TableCell cell in reportTable.Rows[0].Cells)
    {
        HyperLink h = (HyperLink)(cell.Controls[0]);
        string newValue = h.Attributes["name"];

        // Save value to database here. newValue does not show 
        // changed values.
        Console.WriteLine(newValue); 
    }
}

private void AddHyperlinks()
{
    TableRow row = new TableRow();
    for (int i = 1; i < 11; i++)
    {
        HyperLink hyperlink = new HyperLink();
        hyperlink.NavigateUrl = "#";
        hyperlink.Text = i.ToString();
        hyperlink.Attributes.Add("id", "h" + i);
        hyperlink.Attributes.Add("name", i.ToString());
        hyperlink.Attributes.Add("onclick", "update_Click(this);");
        AddLinkButtonToRow(hyperlink, row);
    }
    reportTable.Rows.Add(row);
}

private void AddLinkButtonToRow(HyperLink linkButton, TableRow row)
{
    TableCell cell = new TableCell();
    cell.Controls.Add(linkButton);
    row.Cells.Add(cell);
}

}

【问题讨论】：

我错过了您进行数据库更新的部分吗？你必须通过 jquery ajax 来做到这一点。
顺便说一句，戴夫：如果您使用输入字段（文本框），您的代码看起来会更清晰 - 看起来您只是在读取 10 个字符串。

标签： asp.net jquery

【解决方案1】：

那样做是不可能的。每次创建页面时都创建链接。尽管您在 JavaScript 中更改了这些链接的名称，但这些值不会发回给您。
在Sumbit 上，只有表单元素被发送回服务器（例如<input>s），而不是<a> 元素，因此您的服务器不“知道”所做的更改。

其次，即使您将<a>s 更改为<input>s，您仍然有一个问题：您将无法在reportTable.Rows[0].Cells 中找到您所期望的这些值。通常 asp.net 会正确填充这些值，即使对于动态生成的控件也是如此，但不是在这里 - 因为您已经更改了它们的名称！ Asp.net 无法重新绑定这些值。

那么，你应该怎么做？一种选择是为每个单元格添加一个隐藏字段。
在AddLinkButtonToRow 上，添加以下内容：

HtmlInputHidden hidden = new HtmlInputHidden();
hidden.ID = "hidden" + linkButton.ID;
hidden.Name = hidden.ID; //so it will be posted!
hidden.Style["display"] = "none"; //better to have a CssClass

使用您似乎知道的 jQuery，更改这些输入字段的值，而不是它们的名称（类似于 $(editingID).parent().find(":hidden")）。

接下来，您可能看不到控件上的值，但您可以在 Request.Form["hiddenh1"] ... Request.Form["hiddenh11"] 找到它们 - 所有输入字段的名称都将被发布，这次您知道它们的名称。

【讨论】：

【解决方案2】：

我不确定“ReportTable”和它的表格单元在哪里或是什么，但我猜你的问题是你正在使用 jQuery 操作客户端上某些标签的值，并期望它们被回发到服务器？

这行不通。该页面使用 ViewState 中 HyperLink 控件的已知值呈现。由于标签不是输入类型，它们不会在回发时将值发回服务器，并且 ViewState 将始终使用其原始值重新初始化它们。任何操作都必须在服务器端完成。

我建议按照 ScottE 的建议做，并使用 jquery ajax 进行更新。

【讨论】：