如何将转发器的项目onclick Button中的数据传递给javascript文件以便在ajax中使用

Question

我有一个中继器：

 <div class="container" id="TourDetail">
    <asp:Repeater ID="RptTourDetail" runat="server" DataSourceID="ODSTTitle" ItemType="Tour" 
EnableViewState="false" OnItemDataBound="RptTourDetail_ItemDataBound">
        <HeaderTemplate>
    <ul>
         </HeaderTemplate>
         <ItemTemplate>
         <li>
             <span class="ForGenHandle">
                <%# Item.TourId %>
             </span>
             <div  id="tright">
                <input runat="server" type="button" name="name" value="INQUIRE" class="Inq" id="InqBtn" />
            </div>
        </li>
        </ItemTemplate>
        <FooterTemplate>
    </ul>
        </FooterTemplate>
    </asp:Repeater>
</div>

它使用我的存储库来显示数据。 我在这个中继器中有一个按钮：

<input runat="server" type="button" name="name" value="INQUIRE" class="Inq" id="InqBtn" />

单击此按钮可打开一个包含转发器中每个项目的一些数据的框。

我用ajax来做。 这是我的通用处理程序：

public void ProcessRequest (HttpContext context) {
    int x = Convert.ToInt32(context.Request.QueryString["TourID"]);
    context.Response.ContentType = "application/json";
    context.Response.Write(JsonConvert.SerializeObject(new ATourDateRep().GetById(x)) );
}

这是我的javascript代码：

$('.Inq').click(function () {

$.ajax({

url: '../Services/TourDates.ashx?TourID=<%%>',

success: function (e) {
   for (var i = 0; i < e.length; i++) {
        $('<li />').html("<div>" +
        e[i].TourStartDate + "</div>" + "<div>300$</div>" + " <div>500$</div>").appendTo('#list');
                }
            }
        });
    }
);

有没有人知道如何将每个转发器项的TourId作为查询字符串传递给通用处理程序？ 在这一行我的意思是：

url: '../Services/TourDates.ashx?TourID=<%%>'

如果需要，这是我的存储库：

public class ATourDateRep
{
    private DatabaseEntities model = new DatabaseEntities();
    public List<TourDate> GetById(int Id)
    {
        return model.TourDates.Where(e => e.TourId == Id).ToList();
    }
}

Answer 1

您可以尝试以下方法：

1）修改<input>行以将data-TourID放入其中：

<input runat="server" type="button" data-TourID="<%# Item.TourId %>" name="name" value="INQUIRE" class="Inq" id="InqBtn" />

2）然后修改JS代码如下：

$('.Inq').click(function () {
    var TourID = $(this).data("TourID"); //read the tour ID
    $.ajax({

        url: '../Services/TourDates.ashx?TourID='+TourID,
        success: function (e) {

           for (var i = 0; i < e.length; i++) {
                $('<li />').html("<div>" +
                e[i].TourStartDate + "</div>" + "<div>300$</div>" + " <div>500$</div>").appendTo('#list');

            }
        }
    });
});

Answer 2

使用jquery的sibling（）来获取包含TourId的span：

$('.Inq').click(function () {

$.ajax({

 url: '../Services/TourDates.ashx?TourID=' + $(this).parent().siblings('span').html(), //Modify in this line
 success: function (e) {

   for (var i = 0; i < e.length; i++) {

 $('<li />').html("<div>" +
 e[i].TourStartDate + "</div>" + "<div>300$</div>" + " <div>500$</div>").appendTo('#list');

                }
            }
        });

    });