Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

HTML datalist tag, asp.NET C# ile kullanımı, javascript

Konu, 'ASP.NET / Silverlight / Moonlight' kısmında sedirAğacı tarafından paylaşıldı.

  1. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    HTML de daha yeni datalist tag'ını keşfettim. Sanırım html5 ile gelmiş. safari hariç diğer önemli tarayıcılar destekliyor.

    Select option nesnesinin benzeri ama daha kullanışlısı.

    .NET webForm da ise bu datalist tag ın karşılığını kontrol olarak bulamadım.
    sanırım webForm ilerde desteklenmeyeceği için eklememişler. MVC yapısına geçiş olacak gibi görünüyor.

    Neyse, bu datalist tag ı çok işime yarayacağı için, asp.net ile verimli olarak kullanabilirmiyim diye 2 gündür araştırma yapıyorum.
    value ve text ini normal select option lar gibi ayırmak zor.
    text ve value yu ayrı ayrı alabilmek için sayfada göstermediğim bir textBox kullandım.
    text ve value nında yerleri normale göre ters, kafanız karışmasın.

    Ancak sorunsuz kullanılabilecek şekilde kodladım... Aşağıda örnek kodları paylaşıyorum, belki birilerinin daha işine yarar.
    Birde myNereden gib log amaçlı kullandığım alanlar var, mesaj ve log değişkenlerinide dikkate almayın, temizlemek için uğraşmadım.
    ilaveten javascript(currValidPage) kısmında giriş kontrolleri var, onlarıda es geçebilirsiniz. Hepsi copy paste ile geldiler.:rolleyes:
     
    Son düzenleme: 18 Eylül 2017
  2. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    aspx sayfa.

    HTML:
        <div id="dv1" style="padding: 10px 0px 0px 20px;">
            Auto Complete işlemi - HTML datalist option ile.
            <br /><br />
            <asp:Label ID="lblMsgTop" runat="server" CssClass="lblWarning"></asp:Label>
            <br /><br />
    
                <asp:TextBox ID="tx1" runat="server" list="ddlDL" Width="200" CssClass="ddlFlat" PlaceHolder="banka seçiniz"
                    ClientIDMode="Static"></asp:TextBox>
        
                <datalist id="ddlDL" runat="server"></datalist>
    
    
            <br /><br />
    
            JS Seçilen ;<br /><br />
            Text : <span id="spnTx" style="color: saddlebrown; padding: 6px; margin-right: 20px; border: 1px solid silver;"></span>
            Value : <span id="spnVal" style="color: saddlebrown; padding: 6px; border: 1px solid silver;"></span>
    
            <asp:TextBox ID="hdtxVal" runat="server" CssClass="displayNone" ClientIDMode="Static"></asp:TextBox>
            <br /><br />
    
            <asp:Button ID="btRec" runat="server" Text="server test" OnClick="btRec_Click"
                OnClientClick="return currValidPage('tx1');" />
    
            <br /><br />
    
            Server Seçilen ;<br /><br />
            Text : <asp:Label ID="lblTx" runat="server" ClientIDMode="Static"
                CssClass="pad4_0 lblDisplayData border1Sl"></asp:Label>
            <br /><br />
            Value : <asp:Label ID="lblVal" runat="server" ClientIDMode="Static"
                CssClass="pad4_0 lblDisplayData border1Sl"></asp:Label>
            
        </div>
    
        <script type="text/javascript">
        
                //console.log("gg");
            
            function setDLval() {
                var myVal = document.getElementById("tx1").value;
                var myOpts = document.getElementById('ddlDL').childNodes;
                for (var i = 0; i < myOpts.length; i++) {
                    if (myOpts[i].value === myVal) {
                        document.getElementById("spnTx").innerText = myOpts[i].value;
                        document.getElementById("spnVal").innerText = myOpts[i].innerText;
                        document.getElementById("hdtxVal").value = myOpts[i].innerText;
                        break;
                    }
                }
            }
        
            function currValidPage(myTxID) {
                try {
                    var myMsg = document.getElementsByClassName("lblWarning")[0];
                    myMsg.innerText = "";
    
                    var myText = document.getElementById(myTxID);
                    if (myText.value.trim().length < 1) myMsg.innerHTML = "Seçim yapınız lütfen.";
    
                    if (myMsg.innerText == "") {
                        pageAnim('prgrss1,dvFonOverlay', true, 'dvFonOverlay');
                        return true;
                    }
    
                } catch (e) {
                    displayAlertMsg("Uyarı : " + e.message, 10);
                }
                scroll(0, 0);
                return false;
            }
        </script> 
     
    Son düzenleme: 18 Eylül 2017
  3. sedirAğacı

    sedirAğacı Daimi Üye

    Kayıt:
    2 Mart 2016
    Mesajlar:
    897
    Beğenilen Mesajlar:
    237
    Meslek:
    Bilgisayar programcısı.
    Şehir:
    Aydın
    cs sayfa

    PHP:
    protected void Page_Load(object senderEventArgs e)
            {
                
    lblMsgTop.Text ""lblTx.Text ""lblVal.Text "";

                if (!
    IsPostBack)
                {
                    
    initProcess2();
                }
            }
            
    void initProcess2()
            {
                
    tx1.Attributes["oninput"] = "setDLval();";
                
    string errMsg "";
                
    ddlDL.InnerHtml Models.fillControl.selBankList(false"initProcess2"ref errMsg);
                
    lblMsgTop.Text errMsg;
            }
            protected 
    void btRec_Click(object senderEventArgs e)
            {
                
    lblTx.Text tx1.Text.Trim();
                
    lblVal.Text hdtxVal.Text.Trim();
            }
    Üstteki
    Models.fillControl.selBankList(false, "", ref errMsg);

    satırında, datalist seçenekleri dolduruluyor... Ben banka isimleri için kullanacağım, siz ne için kullanacaksanız artık.

    o fonksiyonuda ekleyeyim eksik kalmasın...

    PHP:
    public static string selBankList(bool mySecinizstring myNeredenref string errMsg)
            {
                
    string myBankList "";
                var 
    myBuilder = new System.Text.StringBuilder();
               if (
    mySecinizmyBuilder.Append(String.Format("<option value='...seçiniz...'>-</option>"));
                try
                {
                    
    cmd.CommandText "SELECT bnEFTcode, bnName FROM bankaListe";
                    
    cmd.Connection conn;
                    if (
    conn.State == ConnectionState.Closedconn.Open();

                    
    using (SqlDataReader dr cmd.ExecuteReader())
                    {
                        while (
    dr.Read())
                        {
                            
    myBuilder.Append(String.Format("<option value='{0}'>{1}</option>"dr["bnName"].ToString(), dr["bnEFTcode"].ToString()));
                        }
                    }
                    
    myBankList myBuilder.ToString();

                }
                catch (
    Exception ex)
                {
                    
    errMsg ex.Message;
                }
                finally
                {
                    if (
    conn.State == ConnectionState.Openconn.Close();
                }
                return 
    myBankList;
            }
     
    Son düzenleme: 18 Eylül 2017