Handling button clicks in dynamically generated table

<%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>
            <%} %>

So that above table, as you can see, is dynamically generated. How do I handle the button click? I also want to pass the name attribute of the button into whatever method handles the button click.

Thanks!

You can use the live function of jQuery.

Try this:

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

The same way you would handle a regular button click. Dynamically create the code to handle regular button clicks in the http code you're generating.

That code is tragic and screaming for refactoring. Just looking at it my eyes hurt. You are not encoding strings thus making this code vulnerable to XSS attacks.

So as always in ASP.NET MVC you start with a view model:

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; }
}

then you will have a controller action which will fetch the model from the repository and map it to the view model. You could use AutoMapper to simplify this mapping. It's in the mapping layer that you will transform everything to be ready to be directly used by the view so that this views doesn't resemble to a horrible tag soup:

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);
}

next we get to the strongly typed view where we will be using Display Templates:

<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>

and in the corresponding display template (~/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>

and finally you could use jquery to attach to the click of this button and fetch the name:

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