jquery - ASP:Repeater と JQuery の組み合わせ

Question

次の C# コードがあります (動作します):

    // Write data into the checkboxes
    RepeaterVocabularyWords.DataSource = new[] { correctWord1, correctWord2, incorrectWord1, incorrectWord2 };
    RepeaterVocabularyWords.DataBind();  

    // Get data from the checkboxes
    protected void ButtonAccept_Click(object sender, EventArgs e)
    {
                    foreach (RepeaterItem item in RepeaterVocabularyWords.Items)
        {
            if (item.ItemType == ListItemType.Item
                || item.ItemType == ListItemType.AlternatingItem)
            {
                CheckBox CheckBoxVocabularyWord = (CheckBox)item.FindControl("CheckBoxVocabularyWord");
                if (CheckBoxVocabularyWord.Checked)
                { 
                }
            }
        }

そして、JQuery コードを使用した次の ASP (動作します):

$(document).ready(function () {
    $("input[id$='ButtonAccept']").click(function (e) {
        if ($('span.storeCheck input:checked').length != 2) {
            alert("You have to choose only the 2 words that means the same!");
            e.preventDefault();
}

次に、「span class="storeCheck"..」という行を書くと、上記のリピーターコードは機能しますが、上記の C# コードは機能しません。

<asp:Repeater ID="RepeaterVocabularyWords" runat="server" OnItemCommand="Repeater1_ItemCommand">
    <ItemTemplate>            
        <<span class="storeCheck"><input runat="server" type="checkbox" ID="CheckBoxVocabularyWord" title="<%# Container.DataItem %>" /></span>  
    </ItemTemplate>
</asp:Repeater>

対照的に、"asp:CheckBox ID=".." と書くと、上記の c# コードは機能しますが、jQuery のものは機能しません。

<asp:Repeater ID="RepeaterVocabularyWords" runat="server" OnItemCommand="Repeater1_ItemCommand">
    <ItemTemplate>  
        <asp:CheckBox ID="CheckBoxVocabularyWord" runat="server" Text="<%# Container.DataItem %>"   />    
    </ItemTemplate>
</asp:Repeater>

どうすれば両方を機能させることができますか?

score 0 · Accepted Answer

レイのアプローチはうまくいくと思いますが、最終的にやったのはそれです。

Jquery コードは次のとおりです。

<script type="text/javascript">
    $(document).ready(function () {
        $("input[id$='ButtonAccept']").click(function (e) {
            if ($('span.storeCheck input:checked').length != 2) {
                alert("You have to choose only the 2 words that means the same!");
                e.preventDefault();
            }
        });
    });
</script>

そして、リピーターは次のとおりです。

<asp:Repeater ID="RepeaterVocabularyWords" runat="server" OnItemCommand="RepeaterVocabularyWords_ItemCommand">
    <ItemTemplate>
        <span class="storeCheck">
            <asp:CheckBox ID="CheckBoxVocabularyWord" Font-Size="0px" runat="server" Text="<%# Container.DataItem %>"
                ClientIDMode="Static" CssClass="{labelOn: '<%# Container.DataItem %>', labelOff: '<%# Container.DataItem %>', easing: 'easeOutBounce', duration: 500}" />
        </span>
    </ItemTemplate>
</asp:Repeater>

私はゲームを書いています。最終的にどこかにアップロードしたら、ここにリンクを貼ります:)

score 0 · Accepted Answer

これを試して：

$(document).ready(function () {
    $("input[id$='ButtonAccept']").click(function (e) {
        if ($('span.storeCheck').find('input:checked').length != 2) {
            alert("You have to choose only the 2 words that means the same!");
            e.preventDefault();
}

aspチェックボックスを保持することにより。

score 0 · Accepted Answer

を使用すると、ではなく<input type='checkbox' runat='server'>が得られます。適切なクラスを使用するように C# コードを変更し、それが役立つかどうかを確認してください。HtmlInputCheckBoxCheckBox

jquery - ASP:Repeater と JQuery の組み合わせ

3 に答える 3

Related

Reference