Суммирование GridView в ASP.NET

Question

В одном из моих веб-приложений ASP.NET я использую BulkEditGridView (GridView, который позволяет редактировать все строки одновременно) для реализации формы заказа. В моей сетке есть столбец, который вычисляет итоговую сумму для каждого элемента (стоимость х количество) и общее итоговое поле в нижней части страницы. Однако в настоящее время эти поля обновляются только при каждом постбеке. Мне нужно, чтобы эти поля обновлялись динамически, чтобы по мере того, как пользователи меняли количества, итоговые и итоговые суммы обновлялись, чтобы отражать новые значения. Я пытался использовать решения AJAX для достижения этой цели, но асинхронные постбэки мешают сосредоточиться на странице. Я полагаю, что существует чисто клиентское решение, и я надеюсь, что кто-то в сообществе сможет поделиться им.

Answer 1

Если ваши вычисления могут быть воспроизведены в JavaScript, самый простой метод - использовать jQuery для получения всех элементов, подобных этому:

$("#myGridView input[type='text']").each(function(){
  this.change(function(){
    updateTotal(this.value);
  });
});

Или, если ваши вычисления слишком сложны для выполнения в JavaScript (или ограничения по времени мешают этому), то вызов AJAX для веб-службы - лучший способ. Допустим, у нас есть наш веб-сервис, подобный этому:

[WebMethod, ScriptMethod]
public int UpdateTotal(int currTotal, int changedValue){
  // do stuff, then return
}

Вам понадобится немного JavaScript для вызова веб-сервиса, вы можете сделать это либо с помощью jQuery, либо с помощью MS AJAX. Я покажу комбинацию обоих, просто для удовольствия:

$("#myGridView input[type='text']").each(function(){
  this.change(function(){
    Sys.Net.WebServiceProxy.invoke(
      "/Helpers.asmx",
      "UpdateTotal",
      false,
      { currTotal: $get('totalField').innerHTML, changedValue: this.value },
      showNewTotal
    );
  });
});

function showNewTotal(res){
  $get('totalField').innerHTML = res;
}

Проверьте эту ссылку для получения полной информации о методе Sys.Net.WebServiceProxy.invoke: http://www.asp.net/AJAX/Documentation/Live/ClientReference/Sys.Net/WebServiceProxyClass/WebServiceProxyInvokeMethod.aspx

Answer 2

Одним из решений является создание некоторого javascript в вашем методе RowDataBound для постоянного обновления этих итогов при изменении текстовых полей.

Итак, во время RowDataBound, начните строить строку javascript в памяти, которая добавит необходимые вам текстовые поля. Что хорошо в RowDataBound, так это то, что вы можете получить идентификаторы клиентской стороны этих текстовых полей, вызвав TextBox.ClientId. Добавьте этот javascript на страницу, а затем добавьте событие onkeyup в каждое текстовое поле, которое требуется для вызова этого сценария.

Так что-то вроде (это событие, связанное со строкой из сетки)

private string _jscript;
protected void gridview_RowDataBound(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
      //Get your textbox
      Textbox tb = e.Row.FindControl("tbAddUp");
      //Add the event that you're going to call to this textbox's attributes
      tb.Attributes.Add("onkeyup", "MyAddUpJavaScriptMethod();");
      //Build the javascript for the MyAddUpJavaScriptMethod
      jscript += "document.getElementById('" + tb.ClientId + '").value + ";
   }
}

Затем, как только вы построите весь этот сценарий, используйте свой класс Page.ClientScript, чтобы добавить на страницу метод, который будет вызываться вашим onkeyup в ваших текстовых полях "MyAddUpJavaScriptMethod"

Надежда, которая имеет смысл и помогает