`
bianku
  • 浏览: 72107 次
  • 性别: Icon_minigender_1
  • 来自: 常州
社区版块
存档分类
最新评论

web 技巧

    博客分类:
  • JSP
阅读更多

Introduction

这个项目包含多个样本阿贾克斯,如加载器,具有约束力的下拉菜单,让用户名,通过用户身份证等在这里,我将说明如何绑定下拉使用Ajax在另一个下拉式变化的事件。在此代码段,我复制了两种类型的模型绑定下拉。一个是在按钮的Click事件和其他人的更改事件的下拉式。

Using the code

以下是一个简短说明如何使用代码的文章,其中包括类名,方法,属性和任何技巧或提示。首先,创建一个数据库级的只是建立连接。然后创建表,您要绑定的下拉列表中。其次,改变连接字符串中的Web.config文件

绑定下拉使用AJAX Click事件连接字符串

Collapse Copy Code
<appSettings>
    <add key="ConnectionString" value=
        "Data Source=.\SQLEXPRESS;Integrated Security=yes;database=TAACS;"/>
</appSettings>

Register the page for Ajax

Collapse Copy Code
AjaxPro.Utility.RegisterTypeForAjax(typeofSample1));
// Write the Ajax method to bind the drop down  
[AjaxPro.AjaxMethod]
public DataSet GetDataSet()
{
    string connectionString = 
        (string)ConfigurationManager.AppSettings["ConnectionString"];
    SqlConnection myConnection = new SqlConnection(connectionString);
    SqlDataAdapter ad = new SqlDataAdapter(
        "SELECT * FROM Tabs", myConnection);
    DataSet ds = new DataSet();
    ad.Fill(ds, "Tabs");
    return ds;
}

At the HTML design page, write the JavaScript to bind

Collapse Copy Code
// your code is start here
<script language="JavaScript">
function GetDataSet() 
{
    Sample1.GetDataSet(callback);
}

function callback(res)
{
    var html = [];
    for(var i=0; i < res.value.Tables[0].Rows.length; i++)
    html[html.length] = 
        "<option>" + res.value.Tables[0].Rows[i].TabName + "</option>";
    document.getElementById("display").innerHTML = 
        "<select id=\"sel\">" + html.join("") + "</select>";
}
</script>

Use a System.Data.DataSet to fill a drop down box

Because you can return any object, it is possible to fill a dropdown box with only two lines. The list of countries will be fetched from the server after you have clicked on the link.

Method 1

Bind the dropdown via the dropdown change event:

Collapse Copy Code
<script language="JavaScript">
function GetTabSet()
{
    var countryId = document.getElementById(
        "ddlList").value;// ddlList.options[ddlList.selectedIndex].value;
    MyAjaxSample.SampleforDatabind.GetTabSet(countryId, GetTabSet_CallBack);
}

function GetTabSet_CallBack(response)
{
    if (response.error != null)
    {
        alert(response.error); 
        return;
    }
    var states = response.value; 
    if (states == null || typeof(states) != "object")
    {
        return;
    }
    var statesList = document.getElementById("ddlItemList");
    statesList.options.length = 0; 
    for (var i = 0; i < response.value.Tables[0].Rows.length; ++i)
    {
        statesList.options[statesList.options.length] = 
            new Option(response.value.Tables[0].Rows[i].TabName);
    }
}
</script>

Now, load the data from the database using Ajax:

Collapse Copy Code
In Code bihind 
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HTMLControls;
using Ganesh;
 
namespace MyAjaxSample
{
    public partial class SampleforDatabind : System.Web.UI.Page
    {
        public static string connectionString = 
            (string)ConfigurationManager.AppSettings["ConnectionString"];
        public DataSet ds = new DataSet();
        DBClass MyClass = new DBClass();
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(SampleforDatabind));
            if (!IsPostBack)
            {
                ddlList.DataSource = MyClass.GetDataSet("Select * from Users");
                ddlList.DataTextField = "UserName";
                ddlList.DataValueField = "UserID";
                ddlList.DataBind();
                ddlList.Items.Add("--Select table--");
                ddlList.SelectedIndex = ddlList.Items.Count - 1;
            }
        }

        [AjaxPro.AjaxMethod]
        public DataSet GetDataSet() 
        {
            SqlConnection myConnection = new SqlConnection(connectionString); 
            SqlDataAdapter ad = new SqlDataAdapter(
                "SELECT * FROM Tabs",myConnection);
            ad.Fill(ds, "Tabs");
            return ds;
        }

        [AjaxPro.AjaxMethod]
        public DataSet GetTabSet(int UserId)
       {
           SqlConnection myConnection = new SqlConnection(connectionString);
           SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM GetRoleTabs(
               " + UserId + ")", myConnection);
           ad.Fill(ds, "Tabs");
           return ds;
       }
    }
}

Method 2

Bind the dropdown in change event:

Collapse Copy Code
<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="~/Sample.aspx.cs" Inherits="MyAjaxSample.Sample" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>Sample Ajax Page</title>
<script language="JavaScript">
function GetUserName()
{
    var yourid = document.getElementById("txtuserId").value;
    MyAjaxSample.Sample.GetUserName(yourid,GetUserName_callback);
}
function GetUserName_callback(response)
{
    if (response != null && response.value != null)
    {
        var user = response.value;
        alert(user);
    }
}

// Get the User Permission tabs by passing User ID
function GetUserRole()
{
    var UID = document.getElementById("ddlUser").value;
    MyAjaxSample.Sample.GetUserRole(UID,GetUserRole_callback);
}

function GetUserRole_callback(response)
{
    if (response != null && response.value != null)
    {
        var usertab = response.value;
        alert(usertab);
    }
}

function GetRoleTabs()
{
    var UrID = document.getElementById("ddlUserList").value;
    MyAjaxSample.Sample.GetRoleTabs(UrID,GetRoleTabs_callback);
}

function GetRoleTabs_callback(res)
{
    var html = [];
    for(var i=0; i < res.value.Tables[0].Rows.length; i++)
    html[html.length] = "<option>" + 
        res.value.Tables[0].Rows[i].TabName + "</option>";
    document.getElementById("display").innerHTML = 
        "<select id=\"sel\">" + html.join("") + "</select>";
}

</script>
</head>

<body>
<form id="form1" runat="server" method="post">
<div style="text-align: center">
    <table id="TABLE1" border="1" cellpadding="0" cellspacing="0" >
        <tr>
            <td style="width: 100px; height: 22px;">
                <input id="btnUser" type="button" value="User" 
                    onclick="GetUserName()" />
            </td>
            <td style="width: 100px">
                <asp:DropDownList ID="ddlUser" OnChange="GetUserRole()" 
                    runat="server" Width="132px"></asp:DropDownList>
            </td>
            <td style="width: 100px">
                <asp:DropDownList ID="ddlUserList" OnChange="GetRoleTabs()" 
                    runat="server" Width="132px" style="position: static">
                 </asp:DropDownList>
            </td>
        </tr>
    </table>
</div> 
</form>
</body>
</html>

In code behind

Collapse Copy Code
namespace MyAjaxSample
{ 
    public partial class Sample : System.Web.UI.Page
    {
        DBClass ObjDB = new DBClass();
        DataSet ObjDS = new DataSet();
        public SqlConnection ObjCon = 
            new SqlConnection(
            ConfigurationManager.AppSettings["ConnectionString"]);
        SqlDataReader ObjReader;
        SqlDataAdapter ObjAdapter;
        public string username,usertab;
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(Sample)); // Step 3
            if (!IsPostBack)
            {
                BindDropDown();
            }
        }

        [AjaxPro.AjaxMethod()]
        public string GetUserName(int userID)
        {
            string strSelect = 
                "select * from Users where UserID='" + userID + "'";
            ObjReader = ObjDB.GetDataReader(strSelect);
            if(ObjReader.Read())
            {
                username = 
                    ObjReader["FName"].ToString()+
                    " "+ObjReader["LName"].ToString();
            }
            return username;
        }

    public void BindDropDown()
    {
        string strSelect = "Select * from Users";
        ObjDS = ObjDB.GetDataSet(strSelect);
        ddlUser.DataSource = ObjDS;
        ddlUser.DataTextField = "UserName";
        ddlUser.DataValueField = "UserID";
        ddlUser.DataBind();
        ddlUser.Items.Add("--Select table--");
        ddlUser.SelectedIndex = ddlUser.Items.Count - 1;
        ddlUserList.DataSource = ObjDS;
        ddlUserList.DataTextField = "UserName";
        ddlUserList.DataValueField = "UserID";
        ddlUserList.DataBind();
        ddlUserList.Items.Add("--Select table--");
        ddlUserList.SelectedIndex = ddlUserList.Items.Count - 1;
    }

    [AjaxPro.AjaxMethod()]
    public string GetUserRole(string userID)
    {
        string strSelectTab="select * from GetUserRole(" + userID + ")";
        ObjReader = ObjDB.GetDataReader(strSelectTab);
        if (ObjReader.Read())
        {
            usertab = ObjReader["RoleName"].ToString();
        }
    return usertab;
    }

    [AjaxPro.AjaxMethod()] 
    public DataSet GetRoleTabs(string userID)
    {
        string strSelectTab = "Select * from GetRoleTabs(" + userID + ")";
        ObjAdapter = new SqlDataAdapter(strSelectTab,ObjCon);
        ObjAdapter.Fill(ObjDS,"Tabs");
        return ObjDS;
    }
}

The above code has been written in C#. Here, I have copied both the HTML page and the code behind file code. Remember to set the Language of your code snippet using the Language dropdown. Use the "var" button to to wrap Variable or class names in <code> tags like this.

License

本文没有明确的授权重视,但可能包含的使用条款中的第文字或下载文件本身。如有疑问,请联系作者通过讨论板下面。

 

清单许可证作者可能使用可以在这里找到

here

分享到:
评论

相关推荐

    移动端web开发技巧

    本文档为移动端web开发技巧,在使用html5进行移动端开发的时候需要注意的一些问题。

    Web表单高级技巧

    "Web表单高级技巧"这一主题涵盖了提高用户体验、数据验证、表单处理和交互性等多个方面。接下来,我们将深入探讨这些高级技巧。 首先,我们关注表单设计。一个优秀的Web表单应该直观易用,减少用户的认知负担。这...

    ISI Web of Knowledge使用技巧

    里面有对 isi web of knowledge的20多个使用技巧: 应用技巧一:如何了解您的论文被SCI收录的情况.doc 应用技巧二:如何了解国际上都有哪些科学家在关注您的课题.doc 应用技巧三:如何检索结果中快速找到某个...

    PB11.5_WEB客户端编程技巧

    标题中的“PB11.5_WEB客户端编程技巧”意味着本知识点将围绕PB11.5版本中的WEB开发技术进行展开,重点介绍如何在PowerBuilder(PB)这一开发平台上实现客户端编程,并提供了一系列技巧和方法来优化WEB应用程序的性能...

    Web 窗体高级技巧二--vs2003

    在本主题中,我们将深入探讨"Web 窗体高级技巧二--vs2003",这主要涉及使用Visual Studio .NET 2003进行Web应用开发时的一些高级特性和技术。Visual Studio .NET 2003是微软推出的强大开发工具,支持ASP.NET 1.x框架...

    Web窗体代码语法和技巧

    总结来说,Web窗体代码语法和技巧是ASP.NET开发的关键组成部分,理解并掌握混合代码、内联代码和隐藏代码的使用,以及代码隐藏页的工作原理,将有助于提升Web应用的开发效率和质量。通过合理选择代码组织方式,可以...

    研华Webaccess技巧

    ### 研华WebAccess技巧详解 #### 一、自定义历史趋势图 **知识点概述:** 在使用研华WebAccess进行数据可视化时,自定义历史趋势图是一项重要的功能,它可以帮助用户根据实际需求定制更加直观的数据展示方式。本文...

    Web 表单高级技巧

    本资源包“Web表单高级技巧”专注于深入理解并运用ASP.NET中的Web表单技术,它包含了PPT、视频教程和文档,以及示例代码,旨在帮助开发者提升其Web表单设计和实现的能力。 首先,我们要了解Web表单在ASP.NET中的...

    webaccess 使用技巧

    WebAccess 是一款强大的网页式监控系统,主要用于工业自动化领域的数据采集和分析。...以上是WebAccess的一些核心使用技巧,熟练掌握这些技巧,将有助于你更高效地使用WebAccess进行设备监控和管理。

    ctf web解题找flag夺旗赛之常用的解题思路及技巧

    ctf web解题 找flag夺旗赛ctf web解题找flag夺旗赛之常用的解题思路及技巧ctf web解题找flag夺旗赛之常用的解题思路及技巧ctf web解题找flag夺旗赛之常用的解题思路及技巧ctf web解题找flag夺旗赛之常用的解题思路及...

    Web站点设计技巧

    在探讨“Web站点设计技巧”这一主题时,我们需要理解网页设计的重要性以及如何通过有效的策略提升用户体验和网站性能。Web设计不仅是关于美观的视觉呈现,它更关乎如何将内容有效地传达给用户,同时确保网站易用性...

    delphi技巧-web编程

    当我们谈论“Delphi技巧-Web编程”,这意味着我们将深入探讨如何利用Delphi进行Web应用程序的开发。在本篇文章中,我们将详细讲解Delphi在Web开发中的应用,以及一些实用的技巧。 首先,Delphi提供了多种框架和库...

    软件测试基础—Web测试方法和技巧.ppt

    软件测试基础—Web测试方法和技巧 本资源概括了软件测试基础,其中着重介绍了Web测试方法和技巧。下面是从该资源中提取的知识点: Web应用场景 * 简单的Web应用场景:没有交互、静态的简单网站 * 复杂的Web应用...

    PB11.5 WEB客户端编程技巧总结

    PB11.5 Web客户端编程主要涉及将传统的C/S应用程序转换为基于Web的应用程序,以适应浏览器环境。在转换过程中,PowerBuilder (PB)代码从客户端迁移到了...理解并掌握这些技巧,对于提升PB11.5 Web应用的品质至关重要。

    WEB常见漏洞与挖掘技巧研究.pptx

    WEB 常见漏洞与挖掘技巧研究 本篇文章旨在总结 WEB 常见漏洞和挖掘技巧,帮助读者了解 WEB 安全领域中的常见漏洞和防护方法。 一、 SQL 注入 SQL 注入是 WEB 安全中最常见的漏洞之一,通常是由于 SQL 语句的拼接...

    WebAccess管理技巧.pdf

    VMware vSphere Web Access 管理技巧 VMware vSphere Web Access 是一种基于浏览器的应用程序,允许用户通过 Web 浏览器管理 VMware ESX 和 vCenter Server。下面是使用 vSphere Web Access 管理虚拟机的技巧。 1....

    WebAccess实战技巧一:按钮条的制作方法.rar

    这可能是关于WebAccess按钮条制作的教程文档,包含了实际操作中的技巧和最佳实践。 总的来说,创建WebAccess中的按钮条需要掌握HTML、CSS和JavaScript的基本知识,同时关注用户体验和无障碍性。通过合理的布局设计...

    实用技巧Web篇(3) 源码

    在本节中,我们将深入探讨"实用技巧Web篇(3) 源码"的主题,主要关注`TestScroll.html`这个文件,它很可能是关于网页滚动效果或交互的一个实例。在Web开发中,源码是理解网站工作原理、优化性能和实现独特功能的...

Global site tag (gtag.js) - Google Analytics