ASP.NET + jQuery +动态创建的HyperLink控件 [英] ASP.NET + jQuery + Dynamically Created HyperLink controls

问题描述

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

I have an ASP.NET application that uses jQuery. My ASP.NET application dynamically generates some HyperLink elements based on some values in a database. When a user clicks one of these HyperLink elements, I want to display a jQuery dialog box that allows the user to edit the text of the HyperLink. I have this part working.

当用户单击保存"按钮时，我需要读取HyperLink元素的值并将其保存回数据库.当前，我获得了HyperLink元素的初始值.但是，我无法获得任何修改后的值.如何获得用户提供的值?我在这里提供了.aspx和.aspx.cs代码:

When a user clicks the "Save" button, I need to read the values of the HyperLink elements and save them back to the database. Currently, I get the initial values of the HyperLink elements. However, I cannot get any modified values. How do I get the values that were provided by the user? I have provided my .aspx and .aspx.cs code here:

测试

报告:

test

Report:

    <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>

这是我的代码背后:

公共局部类_Default:System.Web.UI.Page { 受保护的重写void OnInit(EventArgs e) { base.OnInit(e); AddHyperlinks(); }

public partial class _Default : System.Web.UI.Page { protected override void OnInit(EventArgs e) { base.OnInit(e); AddHyperlinks(); }

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);
}

}

推荐答案

这种方法不可能做到.每次创建页面时都会创建链接.尽管您在JavaScript中更改了这些链接的名称，但这些值不会回发给您.
在Sumbit上，仅表单元素被发布回服务器(例如，<input> s)，而不是<a>元素，因此您的服务器不会知道"所做的更改.

What you're trying to do isn't possible that way. You create links every time the page is created. Although you change the name of these links in JavaScript, these values are not posted back to you.
On Sumbit, only form elements get posted back to the server (<input>s, for example), not <a> elements, so your server doesn't "know" the changes were made.

第二，即使将<a>更改为<input>，您仍然遇到问题:您将无法按预期在reportTable.Rows[0].Cells中找到这些值.通常，即使对于动态生成的控件，asp.net也会正确填充这些值，但由于您已经更改了它们的名称，因此此处不能正确填充这些值！ Asp.net无法重新绑定这些值.

Secondly, even if you'll change the <a>s to <input>s, you still have a problem: you won't be able to find these values in reportTable.Rows[0].Cells as you expect. Normally asp.net will fill these values correctly, even for dynamically generated controls, but not here - since you've changed their names! Asp.net cannot rebind these values.

那么，您应该怎么办?一种选择是向每个单元格添加一个隐藏字段.
在AddLinkButtonToRow上，添加以下内容:

So, what should you do? One option is to add an hidden field to every cell.
On AddLinkButtonToRow, add the following:

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")).

Using jQuery, which you seem to know, change the values of these input fields, not their names (something like $(editingID).parent().find(":hidden")).

下一步，您可能看不到控件上的值，但是可以在Request.Form["hiddenh1"] ... Request.Form["hiddenh11"]上找到它们-所有输入字段将张贴名称，并且您这次知道了它们的名称.

Next, you might not see the values on the controls, but you can find them at Request.Form["hiddenh1"] ... Request.Form["hiddenh11"] - All input fields will names will be posted, and you know their names this time.

这篇关于ASP.NET + jQuery +动态创建的HyperLink控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！