博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

.net Web C# + javascript应用实例

Posted on 2010-12-16 15:32  David.guo的丹麦童话  阅读(1683)  评论(0)    收藏  举报

业务部门要求开发一个新客户的下单网站，该网站在下单编辑产品时，要实现对同一个页上4个产品的添加和编辑，但任一时刻只能编辑一个产品。imgProd1，imgProd2，imgProd3，imgProd4分别显示4个产品的图片，当点击任一个图片时，展开这个图片的明细编辑页，其它产品的明细将缩起来。当展开一个明细后，里面有两块，一个RadGrid 显示列出该产品的所有明细，每一行明细的右边都有Edit,Copy,Cancel三个按钮；上面还有一个Table 项用来新增和修改每一行明细，当点击了Grid中的某一行明细右边的Edit和Copy时把当前明细行载入到Table中去编辑。 当点击了Save按钮后再更新Grid中的明细列表。

其中，由Javascript 及服务端方法实现，点击了一个图片时，展开它自已的内容，隐藏其它产品的明细内容

以下为：aspx页 

代码 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FNProdEdit.aspx.cs" Inherits="MyProj.DEMO.FNProdEdit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <script language="javascript" type="text/javascript">
        function ClickDetail(obj) {
            //debugger;
            //alert('show it ');
            var oriIDname = obj.id;
            var len = oriIDname.length;
            var rtn = 1;
            var selectProd = oriIDname.substring(len - 1, len);
            var objId = 'lnkbtnInput' + selectProd;
            document.getElementById(objId).click();

        }

        function ConfirmDelete(obj) {
            //debugger;
            if (confirm('Are you sure to delete ?')) {
                return true
            }
            return false;
        }
    </script>
    </script>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server"> </telerik:RadScriptManager>
    <fieldset>
    <legend>Product Edit</legend>
    <div>
    <asp:Image ID="imgProd1" runat="server" ImageUrl="~/images/sampleProd.JPG" onclick="ClickDetail(this)" />此产品有：<asp:Label ID="lblItemCount" runat="server" ></asp:Label>个明细：
    </div>
    <fieldset>    
    <legend><asp:LinkButton ID="lnkbtnInput1" Text="明细" runat="server" onclick="lnkbtnInput1_Click"></asp:LinkButton></legend>
    <asp:Panel ID="panEdit1" runat="server" Visible="false"> 
    <fieldset>
    <legend><asp:LinkButton ID="LinkbtnAdd1" Text="Add" runat="server" onclick="LinkbtnAdd1_Click"></asp:LinkButton></legend>
    <asp:Panel ID="panLineEdit1" runat="server" Visible="false" >
    <asp:HiddenField ID="hfid" runat="server" />
    <table border="1">
    <tr>
    <td>Line#</td>
    <td>Product#</td>
    <td>WashNO</td>
    <td>Component1(En)</td>
    <td>Component2(En)</td>
    <td>Component1(Turkey)</td>
    <td>Component2(Turkey)</td>
    <td>RN#</td>
    <td>MADE IN</td>
    <td>QTY</td>
    </tr>
    <tr>
    <td><asp:Label ID="lblLineNO" runat="server"></asp:Label></td>
    <td><asp:Label ID="lblProducNO" runat=server></asp:Label></td>
    <td><asp:DropDownList ID="ddlWashNO" runat="server"></asp:DropDownList></td>
    <td><asp:DropDownList ID="ddleComponent1" runat="server"></asp:DropDownList></td>
    <td><asp:DropDownList ID="ddleComponent2" runat="server"></asp:DropDownList></td>
    <td><asp:DropDownList ID="ddltComponent1" runat="server"></asp:DropDownList></td>
    <td><asp:DropDownList ID="ddltComponent2" runat="server"></asp:DropDownList></td>
    <td><asp:TextBox ID="txtRN" runat="server"></asp:TextBox></td>
    <td><asp:DropDownList ID="ddlMadeIn" runat="server"></asp:DropDownList></td>
    <td><asp:TextBox ID="txtQTY" runat="server"></asp:TextBox></td>
    <td><asp:Button ID="btnAdd" runat="server" Text="Save" onclick="btnAdd_Click" /></td>
    </tr>
    </table>
    </asp:Panel>
    </fieldset>        
    <telerik:RadGrid ID="RadGridProdl" runat="server" GridLines="None" 
        AllowMultiRowSelection="True" ClientSettings-Selecting-AllowRowSelect="true" 
        AutoGenerateColumns="False" AllowPaging="False" 
        OnItemCommand ="RadGridProdl_ItemCommand" Skin="Outlook" >
     <MasterTableView >
        <Columns>
            <%--<telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn"/>--%>
            <telerik:GridTemplateColumn Visible="false">
            <ItemTemplate>
                <%--<asp:HiddenField ID="hforderId" runat="server" Value='<%# Eval("ID") %>' />--%>
            </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn UniqueName="LineNO" HeaderText="Line#" DataField="LineNO">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ProductNO" HeaderText="Product#" DataField="ProductNO">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="WashNO" HeaderText="WashNO" DataField="WashNO">
            </telerik:GridBoundColumn>            
            <telerik:GridBoundColumn UniqueName="eComponent1" HeaderText="Component1(En)" DataField="eComponent1">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="eComponent2" HeaderText="Component2(En)" DataField="eComponent2">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="tComponent1" HeaderText="Component1(Turkey)" DataField="tComponent1">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="tComponent2" HeaderText="Component2(Turkey)" DataField="tComponent2">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="RN" HeaderText="RN#" DataField="RN">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="MADEIN" HeaderText="MADE IN" DataField="MADEIN">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="QTY" HeaderText="QTY" DataField="QTY">
            </telerik:GridBoundColumn>            
            <telerik:GridTemplateColumn>
            <ItemTemplate>
                <asp:Button ID="btnProdEdit1" runat="server" Text="Edit" CommandName="ProdEdit1" CommandArgument='<%# Eval("LineNO") %>' Visible="true" />
            </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
            <ItemTemplate>
                <asp:Button ID="btnProdCopy1" runat="server" Text="Copy" CommandName="ProdCopy1" CommandArgument='<%# Eval("LineNO") %>' Visible="true" />
            </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn>
            <ItemTemplate>
                <asp:Button ID="btnProdCancel1" runat="server" Text="Cancel" CommandName="ProdCancel1" CommandArgument='<%# Eval("LineNO") %>' Visible="true" OnClientClick=" return ConfirmDelete(this)" />
            </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings >    
    </ClientSettings>
    </telerik:RadGrid>
    </asp:Panel>
    </fieldset>
    <br />
    
    <div>
    <asp:Image ID="imgProd2" runat="server" ImageUrl="~/images/sampleProd.JPG" onclick="ClickDetail(this)" /><asp:Label ID="Label1" runat="server" Text="4个明细"></asp:Label>
    </div>
    <fieldset>
    <legend><asp:LinkButton ID="lnkbtnInput2" Text="明细" runat="server" onclick="lnkbtnInput2_Click"></asp:LinkButton></legend>
    <asp:Panel ID="panEdit2" runat="server" Visible="false"> 
    <asp:Panel ID="panLineEdit2" runat="server" Visible="false" ></asp:Panel>
    产品明细2<br />
    产品明细2<br />
    产品明细2
    </asp:Panel>
    </fieldset>
    <br />
    
    <div>
    <asp:Image ID="imgProd3" runat="server" ImageUrl="~/images/sampleProd.JPG" onclick="ClickDetail(this)" /><asp:Label ID="Label2" runat="server" Text="2个明细"></asp:Label>
    </div>
    <fieldset>
    <legend><asp:LinkButton ID="lnkbtnInput3" Text="明细" runat="server" onclick="lnkbtnInput3_Click"></asp:LinkButton></legend>
    <asp:Panel ID="panEdit3" runat="server" Visible="false"> 
    产品明细3<br />
    产品明细3<br />
    产品明细3
    </asp:Panel>
    </fieldset>
    <br />
    
    <div>
    <asp:Image ID="imgProd4" runat="server" ImageUrl="~/images/sampleProd.JPG" onclick="ClickDetail(this)" /><asp:Label ID="Label3" runat="server" Text="1个明细"></asp:Label>
    </div>
    <fieldset>
    <legend><asp:LinkButton ID="lnkbtnInput4" Text="明细" runat="server" onclick="lnkbtnInput4_Click"></asp:LinkButton></legend>
    <asp:Panel ID="panEdit4" runat="server" Visible="false"> 
    产品明细4<br />
    产品明细4<br />
    产品明细4
    </asp:Panel>
    </fieldset>
    </fieldset>
    </form>
</body>
</html>

  

以下为其服务端代码：

代码 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Telerik.Web.UI;

namespace OOSCRM.CRMDEMO
{
    public partial class FNProdEdit : System.Web.UI.Page
    {


        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        protected void LinkbtnAdd1_Click(object sender, EventArgs e)
        {
            this.panLineEdit1.Visible = true;
            this.hfid.Value = "";
            int _sn = Convert.ToInt32(this.lblItemCount.Text);
            _sn++;
            this.lblLineNO.Text = _sn.ToString();
            this.lblProducNO.Text = "";
            this.ddlWashNO.Text = "";
            this.ddleComponent1.Text = "";
            this.ddleComponent2.Text = "";
            this.ddltComponent1.Text = "";
            this.ddltComponent2.Text = "";
            this.txtRN.Text = "";
            this.ddlMadeIn.Text = "";
            this.txtQTY.Text = "";
        }

        protected void lnkbtnInput1_Click(object sender, EventArgs e)
        {
            if (this.panEdit1.Visible)// == true)
            {
                this.panEdit1.Visible = false;
            }
            else
            {
                this.panEdit1.Visible = true;
                
                this.panEdit2.Visible = false;
                this.panEdit3.Visible = false;
                this.panEdit4.Visible = false;
                this.panLineEdit1.Visible = false;

                DataTable dt = new DataTable();
                dt.Columns.Add("LineNO");
                dt.Columns.Add("ProductNO");
                dt.Columns.Add("WashNO");
                dt.Columns.Add("eComponent1");
                dt.Columns.Add("eComponent2");
                dt.Columns.Add("tComponent1");
                dt.Columns.Add("tComponent2");
                dt.Columns.Add("RN");
                dt.Columns.Add("MADEIN");
                dt.Columns.Add("QTY");
                DataRow ndr = dt.NewRow();
                ndr[0] = "1";
                ndr[1] = "Prod1234";
                ndr[2] = "wash000";
                ndr[3] = "Component111";
                ndr[4] = "Component111";
                ndr[5] = "Component111";
                ndr[6] = "Component111";
                ndr[7] = "RN";
                ndr[8] = "Made in China";
                ndr[9] = "200";
                dt.Rows.Add(ndr);
                
                this.RadGridProdl.DataSource = dt;
                this.RadGridProdl.DataBind();
                this.lblItemCount.Text = dt.Rows.Count.ToString();

            }

        }

        protected void lnkbtnInput2_Click(object sender, EventArgs e)
        {
            if (this.panEdit2.Visible)// == true)
            {
                this.panEdit2.Visible = false;
            }
            else
            {
                this.panEdit2.Visible = true;
                this.panEdit1.Visible = false;
                this.panEdit3.Visible = false;
                this.panEdit4.Visible = false;
            }
        }

        protected void lnkbtnInput3_Click(object sender, EventArgs e)
        {
            if (this.panEdit3.Visible)// == true)
            {
                this.panEdit3.Visible = false;
            }
            else
            {
                this.panEdit3.Visible = true;
                this.panEdit2.Visible = false;
                this.panEdit1.Visible = false;
                this.panEdit4.Visible = false;
            }
        }

        protected void lnkbtnInput4_Click(object sender, EventArgs e)
        {
            if (this.panEdit4.Visible)// == true)
            {
                this.panEdit4.Visible = false;
            }
            else
            {
                this.panEdit4.Visible = true;
                this.panEdit2.Visible = false;
                this.panEdit3.Visible = false;
                this.panEdit1.Visible = false;
            }
        }

        protected void RadGridProdl_ItemCommand(object source, GridCommandEventArgs e)
        {
            if (e.CommandName == "ProdEdit1")
            {
                string _SelectedLine = e.CommandArgument.ToString();
                this.panLineEdit1.Visible = true;
                this.hfid.Value = _SelectedLine;

                foreach (GridDataItem gditem in this.RadGridProdl.Items)
                {
                    if (_SelectedLine == gditem["LineNO"].Text)
                    {
                        this.lblLineNO.Text = gditem["LineNO"].Text;
                        this.lblProducNO.Text = gditem["ProductNO"].Text;
                        this.ddlWashNO.Text = gditem["WashNO"].Text;
                        this.ddleComponent1.Text = gditem["eComponent1"].Text;
                        this.ddleComponent2.Text = gditem["eComponent2"].Text;
                        this.ddltComponent1.Text = gditem["tComponent1"].Text;
                        this.ddltComponent2.Text = gditem["tComponent2"].Text;
                        this.txtRN.Text = gditem["RN"].Text.Replace("&nbsp;", "");
                        this.ddlMadeIn.Text = gditem["MADEIN"].Text;
                        this.txtQTY.Text = gditem["QTY"].Text.Replace("&nbsp;", "");
                        break;
                    }
                }

            }
            else if (e.CommandName == "ProdCopy1")
            {
                string _SelectedLine = e.CommandArgument.ToString();
                this.panLineEdit1.Visible = true;
                foreach (GridDataItem gditem in this.RadGridProdl.Items)
                {
                    if (_SelectedLine == gditem["LineNO"].Text)
                    {
                        this.lblLineNO.Text = gditem["LineNO"].Text;
                        this.lblProducNO.Text = gditem["ProductNO"].Text;
                        this.ddlWashNO.Text = gditem["WashNO"].Text;
                        this.ddleComponent1.Text = gditem["eComponent1"].Text;
                        this.ddleComponent2.Text = gditem["eComponent2"].Text;
                        this.ddltComponent1.Text = gditem["tComponent1"].Text;
                        this.ddltComponent2.Text = gditem["tComponent2"].Text;
                        this.txtRN.Text = gditem["RN"].Text.Replace("&nbsp;", "");
                        this.ddlMadeIn.Text = gditem["MADEIN"].Text;
                        this.txtQTY.Text = gditem["QTY"].Text.Replace("&nbsp;", "");
                        break;
                    }
                }
            }
            else if (e.CommandName == "ProdCancel1")
            {
                //MsgBox.Show(this.Page, "The SizeCode disabled successfully.");
            }
        }

        protected void btnAdd_Click(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();

            dt.Columns.Add("LineNO");
            dt.Columns.Add("ProductNO");
            dt.Columns.Add("WashNO");
            dt.Columns.Add("eComponent1");
            dt.Columns.Add("eComponent2");
            dt.Columns.Add("tComponent1");
            dt.Columns.Add("tComponent2");
            dt.Columns.Add("RN");
            dt.Columns.Add("MADEIN");
            dt.Columns.Add("QTY");

            if (!string.IsNullOrEmpty(this.hfid.Value))
            {

                foreach (GridDataItem gditem in this.RadGridProdl.Items)
                {
                    DataRow ndr = dt.NewRow();
                    ndr[1] = gditem["ProductNO"].Text;
                    ndr[2] = gditem["WashNO"].Text;
                    ndr[3] = gditem["eComponent1"].Text;
                    ndr[4] = gditem["eComponent2"].Text;
                    ndr[5] = gditem["tComponent1"].Text;
                    ndr[6] = gditem["tComponent2"].Text;
                    ndr[7] = gditem["RN"].Text;
                    ndr[8] = gditem["MADEIN"].Text;

                    if (gditem["LineNO"].Text == this.hfid.Value)
                    {                        
                        ndr[0] = this.lblLineNO.Text;
                        ndr[9] = this.txtQTY.Text;                        
                    }
                    else
                    {
                        ndr[0] = gditem["LineNO"].Text;
                        ndr[9] = gditem["QTY"].Text;
                    }
                    dt.Rows.Add(ndr);
                }
            }
            else
            {
                foreach (GridDataItem gditem in this.RadGridProdl.Items)
                {
                    DataRow ndr = dt.NewRow();
                    ndr[0] = gditem["LineNO"].Text;
                    ndr[1] = gditem["ProductNO"].Text;
                    ndr[2] = gditem["WashNO"].Text;
                    ndr[3] = gditem["eComponent1"].Text;
                    ndr[4] = gditem["eComponent2"].Text;
                    ndr[5] = gditem["tComponent1"].Text;
                    ndr[6] = gditem["tComponent2"].Text;
                    ndr[7] = gditem["RN"].Text;
                    ndr[8] = gditem["MADEIN"].Text;
                    ndr[9] = gditem["QTY"].Text;
                    dt.Rows.Add(ndr);
                }

                DataRow ndr1 = dt.NewRow();
                int _sn = Convert.ToInt32(this.lblItemCount.Text);
                _sn++;
                ndr1[0] = _sn.ToString();
                ndr1[1] = this.lblProducNO.Text;
                ndr1[2] = this.ddlWashNO.Text;
                ndr1[3] = this.ddleComponent1.Text;
                ndr1[4] = this.ddleComponent2.Text;
                ndr1[5] = this.ddltComponent1.Text;
                ndr1[6] = this.ddltComponent2.Text;
                ndr1[7] = this.txtRN.Text;
                ndr1[8] = this.ddlMadeIn.Text;
                ndr1[9] = this.txtQTY.Text;
                dt.Rows.Add(ndr1);
            }

            this.RadGridProdl.DataSource = dt;
            this.RadGridProdl.DataBind();
            this.panLineEdit1.Visible = false;
            this.hfid.Value = "";

            this.lblItemCount.Text = dt.Rows.Count.ToString();
        }
    }
}