ASP.Net C# WebForm: Putting A LinkButton In GridView - asp.net

Question

I'm trying to put the following LinkButton into a GridView. Note the data-extend element of the LinkButton.
<asp:GridView ID="gvButtons" runat="server" AutoGenerateColumns="False" DataKeyNames="TrainingSwipeID"
CssClass="table table-bordered table-hover" ShowFooter="False">
<Columns>
<asp:TemplateField HeaderText="QuestionID" SortExpression="TrainingSwipeID">
<ItemTemplate>
<asp:LinkButton id="btnExtend" runat="server"
class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog"
data-extend='{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}'
data-toggle="modal" data-target="#myModal" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ID" SortExpression="TrainingSwipeID">
<ItemTemplate>
<asp:Label id="lblSwipeID" runat="server" Text='<%# Eval("TrainingSwipeID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date" SortExpression="TrainingEnd">
<ItemTemplate>
<asp:Label id="lblExtendDate" runat="server" Text='<%# Eval("TrainingEnd") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The problem is the code in the LinkButton
data-extend='{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}'
When the page gets rendered I get the following as an example for the LinkButton.
<tr>
<td>
<a id="gvButtons_btnExtend_0" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog" data-extend="{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}" data-toggle="modal" data-target="#myModal" href="javascript:__doPostBack('gvButtons$ctl02$btnExtend','')"></a>
</td>
<td>
<span id="gvButtons_lblSwipeID_0">135</span>
</td>
<td>
<span id="gvButtons_lblExtendDate_0">2/10/2019 9:00:00 AM</span>
</td>
</tr>
How do I get the data-extend element within the LinkButton to render properly? It should render like this.
data-extend='{"TrainingSwipeID":135,"CurrentDate":"2/10/2019 9:00:00 AM"}'
ADDITIONAL INFO:
Here is the Javascript I use to open the modal dialog when the user clicks on the LinkButton:
<script>
$(function () {
$('#myModal').on('show.bs.modal', function (e) {
var ele = e.relatedTarget;
var sTrainingSwipeID = $(ele).data('extend').TrainingSwipeID;
var sCurrentDate = $(ele).data('extend').CurrentDate;
$("#TrainingSwipeID").val(sTrainingSwipeID);
$("#CurrentDate").val(sCurrentDate);
});
});
</script>
As well, here is the modal:
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Extend Date</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<asp:HiddenField ID="TrainingSwipeID" runat="server"></asp:HiddenField>
<asp:TextBox ID="CurrentDate" runat="server" autocomplete="off"></asp:TextBox>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<asp:Button ID="btnExtendFromModal" runat="server" Text="Extend" class="btn btn-primary" OnClick="btnExtendDate_Click" UseSubmitBehavior="false" data-dismiss="modal" />
<button type="btnClose" class="btn btn-outline-secondary btn-med" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 1

Thanks #AlexKudryashev, you were able to help me get to the final solution. It seems there is a "bug" with ASP.Net in returning single and double quotes in strings (in my case used for Javascript) from code behind with server side controls. So finally tried the following which worked.
Create a data table and get each requested row from the database.
Format a text string from each returned row from the database and put it into a row in the data table.
Use the data table as the data source for the GridView.
Use a regular hyperlink tag in the GridView, not using the runat="server".
For reference:
Formatted string from the database in code behind to be put into the data table in the DataExtendText column:
sDataExtendText = "{\"TrainingSwipeID\":" + iTrainingSwipeID + ",\"CurrentDate\":\"" + sNextReviewDateNoFormat + "\"}";
The regular hyperlink tag in the GridView getting it's data from the DataExtendText column in the data table:
<a id="btnExtend" class="btn btn-outline-success btn-med" data-extend='<%# Eval("DataExtendText") %>' data-toggle="modal" data-target="#myModal">Extend</a>