现在位置首页 / 项目实战 /正文

asp.net服务端控件ascx使用jquery开发客户端操作代码实例

作者: IT小兵 | 2013年9月24日| 热度:℃ | 评论: |参与:

asp.net的ascx服务器控件,很好用。比如直接生成下拉框菜单数据、多选数据。

但是如果需要交互的话,本身是会回发的,这里我们需要用js来控制交互部分的工作。‘


这里以多选城市数据作为例子,说一下,asp.net+jquery开发ascx的服务端控件的代码。

1、服务端数据准备

这里使用的是ajaxpro.dll。需要load的时候注册一下:

   AjaxPro.Utility.RegisterTypeForAjax(typeof(UserControls_SysConfig_CityMutiSelect));

数据代码:

  [AjaxPro.AjaxMethod]
    public static DataTemp GetSendCity(string citylist, string schemeid)
    {
        StringBuilder data = new StringBuilder();
        DataTemp datatmp = new DataTemp();
        datatmp.Arraydata = new List<CustomTreeNode>();
        try
        {
            Kaitone.UI.BLL.SysConfig.City bll = new Kaitone.UI.BLL.SysConfig.City();
            List<Kaitone.Model.City> list = new List<Kaitone.Model.City>();
            list = bll.GetList().CityData;
            StringBuilder sb = new StringBuilder();
            string[] strlist = citylist.Split(';');//这是拆分开的,每一个box对应的位置的guid哦
            List<int> selectcity = new List<int>();
            if (list != null)
            {
                sb.Append("[");//{ id:1, pId:0, name:"随意勾选 父 1", open:true},
                foreach (Kaitone.Model.City pos in list.Where(a => a.ParentID != 0))
                {
                    if (selectcity.Contains(pos.CityID))//包含这个城市了,被选择了。
                    {
                        sb.Append("{id:\"" + pos.CityID.ToString() + "\",pId:0,name:\"" + pos.CityName.ToString() +
                            "\","
                            + GetChildCity(selectcity, true, pos.CityID, list, datatmp) + ",   font:{'color':'blue'},},");
                        CustomTreeNode onetree = new CustomTreeNode();
                        onetree.id = pos.CityID.ToString();
                        onetree.pId = pos.ParentID.ToString();
                        onetree.name = pos.CityName;
                        datatmp.Arraydata.Add(onetree);
                    }
                    else
                    {
                        if (pos.ParentID == 0)
                        {
                            sb.Append("{id:\"" + pos.CityID.ToString() + "\",pId:" + pos.ParentID + ",name:\"" + pos.CityName.ToString() +
                      "\","
                       + " open:true, nocheck:true},");
                        }
                        else
                        {
                            sb.Append("{id:\"" + pos.CityID.ToString() + "\",pId:" + pos.ParentID + ",name:\"" + pos.CityName.ToString() +
                      "\","
                       + " open:true},");
                        }
                    }
                }
                if (sb.Length > 1)
                {
                    sb.Remove(sb.Length - 1, 1);
                }
                sb.Append("]");
                datatmp.TreeData = sb.ToString();
                return datatmp;
            }
            else
            {
                return new DataTemp();
            }
        }
        catch (Exception ex)
        {
            return new DataTemp();
        }
    }

我使用的是ztree控件。c#代码组织是ztree需要的json串。


2.客户端html代码:按照ztee的html代码加。

 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="CityMutiSelect.ascx.cs" Inherits="UserControls_SysConfig_CityMutiSelect" %>
 
 <input id="citySel" type="text" class="content_input" onfocus="showMenu();" readonly value="" style="width:180px;" onclick="showMenu(); "  runat="server" />
		&nbsp;&nbsp;&nbsp;&nbsp;<a id="menuBtn" runat="server" href="#" onclick="showMenu(); return false;">选择</a> 
		 
<div id="menuContent" runat="server" class="menuContent" style="display:none; position: absolute;">
	<ul id="treeDemo" runat="server"   class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</div>

3.客户端js代码


<SCRIPT type="text/javascript">

<!--

    var setting = {

        check: {

            enable: true,

            chkboxType: { "Y": "", "N": "" }

        },

        view: {

            dblClickExpand: false

        },

        data: {

            simpleData: {

                enable: true

            }

        },

        callback: {

            beforeClick: beforeClick,

            onCheck: onCheck

        }

    };


    var zNodes = [

];


    function beforeClick(treeId, treeNode) {

        var zTree = aaazTree.getZTreeObj("<%=treeDemo.ClientID %>");

        zTree.checkNode(treeNode, !treeNode.checked, null, true);

        return false;

    }


    function onCheck(e, treeId, treeNode) {

        var zTree = aaazTree.getZTreeObj("<%=treeDemo.ClientID %>"),

nodes = zTree.getCheckedNodes(true),

v = "";

        id = "";

        for (var i = 0, l = nodes.length; i < l; i++) {

            v += nodes[i].name + ",";

            id += nodes[i].id + ",";

        }

         

        if (v.length > 0) v = v.substring(0, v.length - 1);

        if (id.length > 0) id = id.substring(0, id.length - 1);

        var cityObj = $("#<%=citySel.ClientID %>");

        cityObj.attr("value", v);

        var txtID = $("#<%=txtID.ClientID %>");

        txtID.attr("value", id); 

    }

    function GetSendCity() {

        var SchemeID = RequestParam("SchemeID");

        UserControls_SysConfig_CityMutiSelect.GetSendCity("", SchemeID, CallbackShowCityList);

    }

    function CallbackShowCityList(res) {


        valu = res.value;

        if (valu != null) {

            zNodes = eval(valu.TreeData);

            //  SelectedPositionList = valu.Arraydata;

            //  GetHtml();

            aaazTree.init($("#<%=treeDemo.ClientID %>"), setting, zNodes); 


        }

        else {


        }

    }

    function showMenu() {

        var cityObj = $("#<%=citySel.ClientID %>");

        var cityOffset = $("#<%=citySel.ClientID %>").offset();

        $("#<%=menuContent.ClientID %>").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");


        $("body").bind("mousedown", onBodyDowncity);

    }

    function hideMenu() {

        $("#<%=menuContent.ClientID %>").fadeOut("fast");

        $("body").unbind("mousedown", onBodyDowncity);

    }

    function onBodyDowncity(event) {

        if (!(event.target.id == "<%=menuBtn.ClientID %>" || event.target.id == "<%=citySel.ClientID %>"

        || event.target.id == "<%=menuContent.ClientID %>" || $(event.target).parents("#<%=menuContent.ClientID %>").length > 0)) {

            hideMenu();

        }

    }

    function CheckIsSelectedCity(strimes) {

        var cityObj = $("#<%=citySel.ClientID %>");

        var ischeck = cityObj.attr("value");

        if (ischeck.length == 0) {

            alert(strimes);

            return false;

        }

        else {

            return true;

        }

    }

  

//-->

</SCRIPT>

 

 函数showMenu是获取数据的方法。绑定数据的时候,需要考虑asp.net服务器控件的客户端id,

所以使用: var cityObj = $("#<%=citySel.ClientID %>");

citySel是服务端控件。


4.在使用ascx的aspx页面注册并使用:

注册:<%@ Register src="../../UserControls/SysConfig/CityMutiSelect.ascx" tagname="CityMutiSelect" tagprefix="uc2" %>

注意:路径要正确。不然会报错。

asp.net服务端控件开发

调用:

        <uc2:CityMutiSelect ID="CityMutiSelect1" runat="server" />

获取选择的城市数据:则需要获取控件txtID的value即可:

    var txtID = $("#<%=txtID.ClientID %>");

        txtID.attr("value", id); 


这样,asp.net ascx服务端控件开发和使用就完成了。


转发注明来自:IT分享 http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询