ASP.Net C# WebForm：在 GridView 中放置一个 LinkButton

Question

我正在尝试将以下 LinkButton 放入 GridView 中。请注意 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>

问题出在 LinkButton 中的代码

data-extend='{"TrainingSwipeID":<%# Eval("TrainingSwipeID") %>,"CurrentDate":"<%# Eval("TrainingEnd") %>"}'

呈现页面时，我得到以下内容作为 LinkButton 的示例。

<tr>
    <td>
        <a id="gvButtons_btnExtend_0" class="open-AddBookDialog btn btn-outline-secondary btn-med" href="#addBookDialog" data-extend="{&quot;TrainingSwipeID&quot;:&lt;%# Eval(&quot;TrainingSwipeID&quot;) %>,&quot;CurrentDate&quot;:&quot;&lt;%# Eval(&quot;TrainingEnd&quot;) %>&quot;}" data-toggle="modal" data-target="#myModal" href="javascript:__doPostBack(&#39;gvButtons$ctl02$btnExtend&#39;,&#39;&#39;)"></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>

如何让 LinkButton 中的数据扩展元素正确呈现？它应该像这样呈现。

data-extend='{"TrainingSwipeID":135,"CurrentDate":"2/10/2019 9:00:00 AM"}'

附加信息：

这是我用来在用户单击 LinkButton 时打开模式对话框的Javascript：

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

此外，这是模态：

<!-- 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">&times;</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

感谢@AlexKudryashev，你能够帮助我找到最终的解决方案。似乎有一个 "bug" 和 ASP.Net 从服务器端控件后面的代码返回字符串中的单引号和双引号（在我的例子中用于 Javascript）。所以最后尝试了以下有效的方法。

创建数据 table 并从数据库中获取每个请求的行。
从数据库返回的每个行中格式化一个文本字符串，并将其放入数据中的一行中table。
使用数据 table 作为 GridView 的数据源。
在 GridView 中使用常规超链接标记，而不是使用 runat="server"。

供参考：

来自数据库的格式化字符串在后面的代码中被放入 DataExtendText 列中的数据 table：

sDataExtendText = "{\"TrainingSwipeID\":" + iTrainingSwipeID + ",\"CurrentDate\":\"" + sNextReviewDateNoFormat + "\"}";

GridView 中的常规超链接标记从数据中的 DataExtendText 列获取数据 table:

<a id="btnExtend" class="btn btn-outline-success btn-med" data-extend='<%# Eval("DataExtendText") %>' data-toggle="modal" data-target="#myModal">Extend</a>

ASP.Net C# WebForm：在 GridView 中放置一个 LinkButton

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

asp.net

gridview

ASP.Net C# WebForm：在 GridView 中放置一个 LinkBut​​ton

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

asp.net

gridview

ASP.Net C# WebForm：在 GridView 中放置一个 LinkButton