Question

我的一个页面中有一些JavaScript可以避免用户双击表单上的按钮并在异步回发期间导致双重提交的问题：

var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest);



var btn;

function InitializeRequest(sender, args) {
  document.body.style.cursor = "wait";
  var btnId = args._postBackElement.id;
  btn = document.getElementById(btnId);
  if (btn != null && (btn.type == "button" || btn.type == "submit"))
    btn.disabled = true;
}

function EndRequest(sender, args) {
  document.body.style.cursor = "default";
  if (btn != null) btn.disabled = false;
}

var btn; function InitializeRequest(sender, args) { document.body.style.cursor = "wait"; var btnId = args._postBackElement.id; btn = document.getElementById(btnId); if (btn != null && (btn.type == "button" || btn.type == "submit")) btn.disabled = true; } function EndRequest(sender, args) { document.body.style.cursor = "default"; if (btn != null) btn.disabled = false; }

这不适用于DataGrid ButtonColumns。 document.getElementById（btnId）为那些返回null。

如果我使用TemplateColumn并在其中放置一个Button控件，那就可以了。

查看为DataGrid呈现的HTML，我可以看到ASP.NET没有输出ButtonColumn的onclick，它对TemplateColumn中的Button执行了操作：

ButtonColumn：

<input type="submit"
  name="ctl00$placeholderContent$dgCommittees$ctl03$ctl00"
  value="Edit" />

TemplateColumn中的按钮：

<input type="submit"
  name="ctl00$placeholderContent$dgCommittees$ctl03$cmdDelete"
  value="Delete"
  onclick="return confirm('Are you sure you wish to delete this committee?');
    WebForm_DoPostBackWithOptions(
     new WebForm_PostBackOptions("ctl00$placeholderContent$dgCommittees$ctl03$cmdDelete", "", true, "", "", false, false))"
  id="ctl00_placeholderContent_dgCommittees_ctl03_cmdDelete" />

显然答案是“如何让这项工作成功？”是简单地用TemplateColumns中的按钮替换我的所有ButtonColumns。

我很好奇，如果有人知道为什么 ASP.NET会以这种方式呈现ButtonColumns，并且有一些方法可以让它像Buttons一样呈现它们。

Answer 1

MS具有绑定字段的标准实现，它不为ButtonColumn创建的按钮设置ID或属性。

更具体一点，每当网格创建单元格和子顺序按钮时，它都会调用InitializeCell：

public override void InitializeCell(TableCell cell, int columnIndex, ListItemType itemType)
{
    base.InitializeCell(cell, columnIndex, itemType);
    if ((itemType != ListItemType.Header) && (itemType != ListItemType.Footer))
    {
        WebControl child = null;
        if (this.ButtonType == ButtonColumnType.LinkButton)
            ...
        else
        {
            child = new Button {
                Text = this.Text,
                CommandName = this.CommandName,
                CausesValidation = this.CausesValidation,
                ValidationGroup = this.ValidationGroup
            };
        }
        ...
        cell.Controls.Add(child);
    }
}

正如您所看到的，这就是按钮的全部内容。

如果您希望它具有ID和“onclick”属性，您可以使用以下内容：

protected void grid_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //assuming that a first cell is a ButtonField
        //note that in edit mode a button may be at some other index that 0
        Button btn = e.Row.Cells[0].Controls[0] as Button;
        if (btn != null)
        {
            btn.OnClientClick = "return confirm('are you sure?')";
            btn.ID = "myButtonX";
        }
    }
}

Answer 2

我建议您使用JQuery在按钮上添加事件处理程序。这是一个示例：


function onclick () {
  alert("1");
}
$(function () {
  $("input[type='submit']").click(onclick);
});

当DOM准备就绪时，此代码会将onclick函数附加到onclick个input类型submit元素。

unobtrusive JavaScript技术可能让您感兴趣。

我想提一下，微软支持JQuery，他们将在即将推出的Visual Studio版本中支持它。有关详情，请访问 http://live.visitmix.com/。

DataGrid ButtonColumns的null元素id

2 个答案: