Обработка нажатий кнопок в динамически генерируемой таблице

#c# #jquery #html #asp.net-mvc-2

#c# #jquery #HTML #asp.net-mvc-2

Вопрос:

 <%foreach (var indication in Model.FindAll(m => m.Model != null amp;amp; m.Model.Trx != null).OrderBy(m => m.Model.Trx.PrimarySponsor.Company))
              { %>
                <tr>
              <td><%= indication.DisplayUser %></td>
              <td><%= indication.ActiveIndicationUsers[0].FullName %></td>
              <td><%= string.IsNullOrEmpty(indication.Model.Trx.PrimarySponsor.Company) ? "Not Yet Saved" : indication.Model.Trx.PrimarySponsor.Company %></td>
              <td><%= indication.TimeOpened.ToString(Chatham.Web.Data.Constants.Format.DateTimeSecondsFormatString) %></td>
              <td><%= indication.Model.Trx.ProductCollection[0].ProductTypeFriendlyName %></td>
              <td><%= (!indication.Model.Trx.ID.HasValue) ? "Not Yet Saved" : indication.Model.Trx.ID.Value.ToString() %></td>
              <td><input type="button" value="Open" name="<%= (!indication.Model.Trx.ID.HasValue) ? "Not Yet Saved" : indication.Model.Trx.ID.Value.ToString() %>" /></td>

              </tr>
            <%} %>
  

Таким образом, приведенная выше таблица, как вы можете видеть, генерируется динамически. Как мне обработать нажатие кнопки? Я также хочу передать name атрибут кнопки в любой метод, обрабатывающий нажатие кнопки.

Спасибо!

Ответ №1:

Вы можете использовать оперативную функцию jQuery.

Попробуйте это:

 $(function(){
    $("td input[type=button][value=Open]").live("click", function(e){
        var btn = $(this);
        alert(btn.attr("name"));
    });
})
  

Комментарии:

1. Также имейте в виду. делегирование — это хороший, более целенаправленный способ привязки к jquery после 1.4.2. brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

Ответ №2:

Таким же образом вы бы обрабатывали обычное нажатие кнопки. Динамически создавайте код для обработки обычных нажатий кнопок в генерируемом вами http-коде.

Ответ №3:

Этот код трагичен и требует рефакторинга. От одного взгляда на это у меня болят глаза. Вы не кодируете строки, что делает этот код уязвимым для XSS-атак.

Итак, как всегда в ASP.NET MVC вы начинаете с модели представления:

 public class MyViewModel
{
    public string DisplayUser { get; set; }
    public string ActiveIndicationsUserFullname { get; set; }
    public string Company { get; set; }
    [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}")]
    public DateTime TimeOpened { get; set; }
    public string TrxId { get; set; }
}
  

затем у вас будет действие контроллера, которое извлечет модель из репозитория и сопоставит ее с моделью представления. Вы могли бы использовать AutoMapper для упрощения этого сопоставления. Именно на уровне отображения вы преобразуете все, чтобы оно было готово для непосредственного использования представлением, чтобы это представление не напоминало ужасный суп из тегов:

 public ActionResult Foo() 
{
    // it's here that you should do the LINQ queries, etc ...
    // not in the view. Views are not supposed to fetch any data
    // and to be intelligent. Views should be dumb and only render
    // the preformatted data that they have been fed by the controller action
    IEnumerable<SomeModel> model = ...

    IEnumerable<MyViewModel> viewModel = Mapper.Map<IEnumerable<SomeModel>, IEnumerable<MyViewModel>>(model);
    return View(viewModel);
}
  

далее мы переходим к строго типизированному представлению, где мы будем использовать шаблоны отображения:

 <table id="myTable">
    <thead>
        <tr>
            <th>DisplayUser</th>
            <th>ActiveIndicationsUserFullname</th>
            <th>Company</th>
            <th>TimeOpened</th>
            <th>TrxId</th>
        </tr>
    </thead>
    <tbody>
        <%= Html.DisplayForModel()
    </tbody>
</table>
  

и в соответствующем шаблоне отображения ( ~/Views/Shared/DisplayTemplates/MyViewModel.ascx ):

 <%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" %>
<tr>
    <td><%= Html.DisplayFor(x => x.DisplayUser) %></td>
    <td><%= Html.DisplayFor(x => x.ActiveIndicationsUserFullname) %></td>
    <td><%= Html.DisplayFor(x => x.Company) %></td>
    <td><%= Html.DisplayFor(x => x.TimeOpened) %></td>
    <td><%= Html.DisplayFor(x => x.TrxId) %></td>
    <td>
        <input type="button" value="Open" name="<%= Model.TrxId %>" />
    </td>
</tr>
  

и, наконец, вы могли бы использовать jquery для привязки к нажатию этой кнопки и извлечения имени:

 $(function() {
    $('#myTable button').click(function() {
        var btn = $(this);
        alert(btn.attr('name'));
    });
});