Thursday, 25 February 2016

Jquery Dropdown



Js



  <script src="1.11.1.min.js"></script>
    <link href="ddlcss.css" rel="stylesheet" />
    <script>
        $(function () {
            $.ajax({
                url: '<%=ResolveUrl("~/JqueryDropdown.aspx/GetEmployees") %>',
                data: "{}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var ddlname = $("[id*=ddlname]");
                    ddlname.empty().append('<option selected="selected" value="0">Please select</option>');
                    $.each(data.d, function () {
                        ddlname.append($("<option CssClass=" + "dropdown-menu" + "></option>").val(this['Value']).html(this['Text']));
                    });
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        })
    </script>

 .aspx




<table width="100%">
            <tr>
                <td align="center">
                    <div class="container">
                        <div class="dropdown">
                            <asp:DropDownList runat="server" ID="ddlname" CssClass="dropdown-select">
                            </asp:DropDownList>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
 
Posted by at No comments:

Bind Table using Jquery



C#



[WebMethod]
    public static string[] GetRecord()
    {
        List<string> customers = new List<string>();
        using (SqlConnection conn = new SqlConnection())
        {
            conn.ConnectionString = ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString;
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandText = "select top 6 srno,fname,lname,state,city,empcode from company..employee";            
                cmd.Connection = conn;              
                conn.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        customers.Add(string.Format("{0}-{1}-{2}-{3}", sdr["fname"], sdr["lname"],sdr["state"], sdr["city"]));
                    }
                }
                conn.Close();
            }
        }
        return customers.ToArray();
    }


aspx



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="1.11.1.min.js"></script>  
    <link href="tablecss2.css" rel="stylesheet" />
    <script>
        $(function () {          
            $.ajax({
                url: '<%=ResolveUrl("~/BindTableUsingJquery.aspx/GetRecord") %>',
                data: "{}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    data = data.d;
                    var count = 1;
                    $("#mytable").append("<tr><td>Srno</td><td>Empnm</td><td>Last Name</td><td>State</td><td>City</td></tr>")
                    for (var i = 0; i < data.length; i++) {
                        var x = data[i].split("-");
                        $("#mytable").append("<tr><td>" + count++ + "</td><td>" + x[0] + "</td><td>" + x[1] + "</td><td>" + x[2] + "</td><td>" + x[3] + "</td></tr>");
                    }
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="CSSTableGenerator" style="width:60%">
            <table id="mytable">
            </table>
        </div>
    </form>
</body>
</html>
 
Posted by at No comments:
Subscribe to: Posts (Atom)