Как получить событие щелчка 'Обновления' в ASP.NET GridView с jQuery
Я должен получить событие щелчка 'Обновления' с jQuery в asp.net GridView и не иметь никакого способа знать, где запустить. Я все еще довольно плохо знаком с jQuery. Мой GridView присоединен к SQLDataSource и, естественно, имеет все дополнительные свойства, которые предоставляет та комбинация. Любая справка значительно ценилась бы.
5 ответов
Просто добавьте блок сценария в любом месте после объявления GridView, и он должен работать со стандартным столбцом GridView без шаблона. В коде нет кода, так как это чисто решение Javascript.
Используйте это, если вы используете столбец GridView типа ссылки:
<script type="text/javascript">
// a:contains(The text of the link here)
$('#<%= theGridViewID.ClientID %> a:contains(Update)').click(function () {
alert('Update click event captured from the link!');
// return false: stop the postback from happening
// return true or don't return anything: continue with the postback
});
</script>
Используйте это, если вы используете столбец GridView типа кнопки и не хотите, чтобы ваш Javascript блокировал обратную передачу:
<script type="text/javascript">
// :button[value=The text of the button here]
$('#<%= theGridViewID.ClientID %> :button[value=Update]').click(function () {
alert('Update click event captured from the button!');
});
</script>
Используйте это, если вы используете столбец GridView типа Button и хотите контролировать, продолжать ли обратную передачу или нет:
<script type="text/javascript">
// :button[value=The text of the button here]
var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]');
updateButtons
.attr('onclick', null)
.click(function () {
alert('Update click event captured from the button!');
var doPostBack = true; // decide whether to do postback or not
if (doPostBack) {
var index = updateButtons.index($(this));
// 'Update$' refers to the GridView command name + dollar sign
__doPostBack('<%= theGridViewID.UniqueID %>', 'Update$' + index);
}
});
</script>
Обновление: Я думаю, что это было бы лучшим решением для замены последнего (3-го) блока скрипта Я представил выше, поскольку вам не нужно будет обновлять вызов функции __doPostBack вручную на основе имени команды, и поэтому он должен быть менее подвержен ошибкам:
<script type="text/javascript">
// :button[value=The text of the button here]
var updateButtons = $('#<%= theGridViewID.ClientID %> :button[value=Update]');
updateButtons.each(function () {
var onclick = $(this).attr('onclick');
$(this).attr('onclick', null).click(function () {
alert('Update click event captured from the button!');
var doPostBack = true; // decide whether to do postback or not
if (doPostBack) {
onclick();
}
});
});
</script>
Благодарим Аристоса за эту идею. :)
Вам необходимо прикрепить клиентский приемник событий к событию щелчка кнопки Update [link]. Я не думаю, что это можно сделать с помощью AutoGenerateEditButton = "true", если вы делаете это, Вам нужно будет использовать TemplateField, чтобы вы могли управлять кнопкой. Затем вы можете использовать jQuery для привязки к событию нажатия кнопки.
Хорошо, вот мое решение для захвата только одно обновление (или несколько) с кнопки.
Это код javascript, который я запускаю при обновлении, щелкните
<script type="text/javascript">
function NowRunTheUpdate(){
alert("ok I capture you");
}
</script>
, а вот код страницы
`<asp:GridView ID="MyGridView" runat="server" OnRowDataBound="MyGridView_RowDataBound" ... >`
<asp:ButtonField Text="update" CommandName="Update" ButtonType="Button" />
...
Вот код, который запускается и устанавливает javascript.
protected void MyGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// loop all data rows
foreach (DataControlFieldCell cell in e.Row.Cells)
{
// check all cells in one row
foreach (Control control in cell.Controls)
{
// I go to get the button if exist
Button button = control as Button;
if (button != null && button.CommandName == "Update")
// Add delete confirmation
button.OnClientClick = "NowRunTheUpdate();";
}
}
}
}
Добавьте столбец обновления в шаблоны столбцов. Преобразуйте его в настраиваемый столбец и измените его таким образом, чтобы вы могли подключиться к нему с помощью jquery, то есть как добавить к нему класс css.
Gridview - это не что иное, как таблица с связка "тр" и "тд". Если вы понимаете эту концепцию, вам будет легко справиться с чем угодно на стороне клиента. Если вы включили все автоматически, это будет ссылка, которая приведет к редактированию, удалению, обновлению или отмене (Проверить исходный код). Приведенный ниже код должен фиксировать событие клика при обновлении:
$("a:contains(Update)").live("click", function() {
//alert("hi"); do what needs to be done
return false;//would not sent the control back to server
});
HTH