Мне нужно зафиксировать событие щелчка «Обновить» с помощью jQuery в asp.net GridView, и я не знаю, с чего начать. Я все еще новичок в jQuery. Мой GridView подключен к SQLDataSource и, естественно, имеет все навороты, которые предоставляет эта комбинация. Любая помощь будет принята с благодарностью.
Как зафиксировать событие щелчка «Обновить» в ASP.NET GridView с помощью jQuery
Ответы (5)
Просто добавьте блок скрипта в любом месте после объявления GridView, и он должен работать со столбцом GridView без шаблона по умолчанию. Нет кода в отделенном коде, так как это чисто решение Javascript.
Используйте это, если вы используете столбец GridView типа Link:
<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 типа кнопки и хотите контролировать, продолжать ли обратную передачу или нет:
<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>
Обновление: я думаю, что это было бы лучшим решением для замены последнего (третьего) блока скрипта, который я представил выше, поскольку вам не нужно будет вручную обновлять вызов функции __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>
Спасибо Аристосу за эту идею. :)
Хорошо, вот мое решение для захвата только одного обновления (или более) с кнопки.
Это код 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();";
}
}
}
}
Вам необходимо прикрепить прослушиватель событий на стороне клиента к событию нажатия кнопки «Обновить [ссылка]». Я не думаю, что это можно сделать с помощью AutoGenerateEditButton="true", если вы делаете это таким образом. Вам нужно будет использовать TemplateField, чтобы вы могли манипулировать кнопкой. Затем вы можете использовать jQuery для привязки к событию нажатия кнопки.
Добавьте столбец обновления в шаблоны столбцов. Преобразуйте его в настраиваемый столбец и измените его таким образом, чтобы вы могли подключиться к нему с помощью jquery, например, добавив к нему класс css.
Gridview — это не что иное, как таблица с кучей «tr» и «td». Если вы понимаете эту концепцию, вам будет легко справиться с чем угодно на стороне клиента. Если вы включили автоматическое все, то это будет ссылка, которая приведет к редактированию, удалению, обновлению или отмене (проверить исходный код). Приведенный ниже код должен фиксировать событие клика обновления:
$("a:contains(Update)").live("click", function() {
//alert("hi"); do what needs to be done
return false;//would not sent the control back to server
});
ХТН