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

Question

<%foreach (var indication in Model.FindAll(m => m.Model != null && 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 кнопки в любой метод, обрабатывающий нажатие кнопки.

Спасибо!

Answer 1

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

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

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

Answer 2

Этот код трагичен и кричит для рефакторинга.Просто глядя на это, мои глаза болят.Вы не кодируете строки, что делает этот код уязвимым для атак 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'));
    });
});

Answer 3

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