rtomosaka

2015-04-28

開窗取值2 - 程式開發

摘要:開窗取值2 - 程式開發

需要兩個網頁(皆為Asp.net WebForm，小弟還不會MVC)，一為主頁(後稱為A頁)，一為開窗頁(後稱為B頁)

1、A頁需要四個控件，三個為前端(HTML)，一個為後端(ASP.NET)
       <div>

        <input type='button' onclick='Open();' value='Add' id='ibtnAdd' />
        <input type='button' onclick='Delete();' value='Delete' id='ibtnDelete' />
        <table style="border: 2px black solid;" rules="all" cellpadding='5' id='GroupTable'>
            <tr>
                <td>
                    選取
                </td>
                <td>
                    編號
                </td>
                <td>
                    姓名
                </td>
            </tr>
        </table>
        <asp:TextBox runat="server" ID="txtData" TextMode="MultiLine" Height="150px" Width="250px"
            Enabled="false" />
    </div>
有一個後端的控件是為PostBack的時候，可以抓到其值，這樣就可以存檔。
 
2、B頁需要兩個後端的控件，只要可以取得值用什麼控件並不限定，只是小弟用下列兩個控件做比較快！
<table>
            <tr>
                <td colspan="2">
                    <asp:Button ID="btnSave" runat="server" Text="確定" OnClick="btnSave_Click" />
                </td>
            </tr>           
            <tr>
                <td colspan="2">
                    <asp:GridView ID="gvDetail" runat="server" AutoGenerateColumns="False" BackColor="White"
                        BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1"
                        GridLines="None" Width ="250px">
                        <RowStyle BackColor="#DEDFDE" ForeColor="Black" />
                        <Columns>
                            <asp:TemplateField HeaderText="選用">
                                <ItemTemplate>
                                    <asp:CheckBox ID="cbSelect" runat="server" />
                                </ItemTemplate>
                                <ItemStyle Width="40px" />
                            </asp:TemplateField>
                            <asp:BoundField DataField="No" HeaderText="編號" ItemStyle-HorizontalAlign="Center">
                                <ItemStyle HorizontalAlign="Center" Width="80px" />
                            </asp:BoundField>
                            <asp:BoundField ControlStyle-BackColor="Yellow" DataField="Name" HeaderText="名稱"
                                ItemStyle-HorizontalAlign="Center">
                                <ControlStyle BackColor="Yellow"></ControlStyle>
                                <ItemStyle HorizontalAlign="Center" Width="120px" />
                            </asp:BoundField>                                                   
                        </Columns>
                        <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
                        <PagerStyle BackColor="#C6C3C6" ForeColor="Black" HorizontalAlign="Right" />
                        <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#E7E7FF" />
                    </asp:GridView>
                </td>
            </tr>
        </table>
 
3、B頁後端需要撰寫程式，如下
using Newtonsoft.Json;   <    需要找一個Newtonsoft.Json.dll，上Google一下就會有答案
 
protected void Page_Load(object sender, EventArgs e)
{
     if (IsPostBack == false)
     {
         GetGVData();
     }
}
 
將有被選取的資料，存到Json格式
protected void btnSave_Click(object sender, EventArgs e)
{
            List<DataObj> tObjList = new List<DataObj>();
            foreach (GridViewRow tGVr in gvDetail.Rows)
            {
                CheckBox tCB = (CheckBox)tGVr.Cells[0].FindControl("cbSelect");
 
                if (tCB.Checked == true)
                {
                    需要自己建立資料類別  DataObj
                    DataObj tObj = new DataObj();
                    tObj.No = tGVr.Cells[1].Text.Trim();
                    tObj.Name = tGVr.Cells[2].Text.Trim();
                    tObjList.Add(tObj);
                }
            }
 
            string tResultJson = JsonConvert.SerializeObject(tObjList);
            this.Page.Controls.Add(new LiteralControl(string.Format("<script>window.opener.SetTable('{0}'); window.close();</script>", tResultJson)));
}
 
造假資料的地方，這裡可以修改成取存DB的程式
private void GetGVData()
{
            DataTable tDt = new DataTable();
            tDt.Columns.Add(new DataColumn("No", typeof(string)));
            tDt.Columns.Add(new DataColumn("Name", typeof(string)));
 
            DataRow tDr = tDt.NewRow();
            tDr["No"] = "001";
            tDr["Name"] = "Johnny";
            tDt.Rows.Add(tDr);
 
            tDr = tDt.NewRow();
            tDr["No"] = "002";
            tDr["Name"] = "Mary";
            tDt.Rows.Add(tDr);
 
            tDr = tDt.NewRow();
            tDr["No"] = "003";
            tDr["Name"] = "Tim";
            tDt.Rows.Add(tDr);
 
            tDr = tDt.NewRow();
            tDr["No"] = "004";
            tDr["Name"] = "Steven";
            tDt.Rows.Add(tDr);
 
            tDr = tDt.NewRow();
            tDr["No"] = "005";
            tDr["Name"] = "Brain";
            tDt.Rows.Add(tDr);
 
            gvDetail.DataSource = tDt;
            gvDetail.DataBind();
}
 
建立一個存放Json的Class，這裡要注意的是，類別的屬性名稱要與DataTable的欄位名稱一樣！
public class DataObj
{
        private string gNo = "";
        private string gName = "";
 
        public DataObj() { }
 
        public string No
        {
            get
            {
                return gNo;
            }
            set
            {
                gNo = value;
            }
        }
 
        public string Name
        {
            get
            {
                return gName;
            }
            set
            {
                gName = value;
            }
        }
}
 
4、A頁需要引用JQuery，當然如果JavaScript熟悉的話，也可以不引用JQuery
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-2.1.1.min.js")%>"></script>
<script type="text/javascript">
 
    開啟資料窗
    function Open() {
        window.open('OpenWinData.aspx', null, 'width=320, height=300, top=100, left=200,         resizable=yes,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes');
    }
 
    設定資料 Table
    function SetTable(pJsonData) {
        if (pJsonData != '') {
            var tJsonObj = JSON.parse(pJsonData);
 
            第一次新增Table
            if ($('#<%=txtData.ClientID %>').val() == '') {
                InitTable(tJsonObj);
                $('#<%=txtData.ClientID %>').val(pJsonData);
            }
            else {
                $.each(tJsonObj, function(i, item) {
                    var tAppendCheck = AppendCheck(item.No);
 
                    if (tAppendCheck == false) {
                        新增一筆資料 隱藏欄位
                        AppendData(item);
 
                        var tNewObjList = JSON.parse($('#<%=txtData.ClientID %>').val());
                        新增一筆資料 Table
                        InitTable(tNewObjList);
                    }
                    else {
                        alert('編號' + item.No + '重複');
                    }
                });
            }
        }
    }
 
    刪除資料時
    function Delete() {
        var tJsonObj = JSON.parse($('#<%=txtData.ClientID %>').val());
        var i = 0;
 
        $('#GroupTable tr').each(function() {
 
            if (i > 0) {
                var tRow = $(this);
                if (tRow.find('input[type="checkbox"]').is(':checked')) {
                    tRow.remove();
                    splice(第n個元素, 刪除n個值)
                    tJsonObj.splice(i - 1, 1);
                    i--;
                }
            }
            i++;
        });
 
        $('#<%=txtData.ClientID %>').val(JSON.stringify(tJsonObj));
    }
 
    檢查加入的資料是否有重複
    function AppendCheck(pAppendKey) {
        true 有重複；False 沒有重複
        var tResult = false;
        var tOriJsonObj = JSON.parse($('#<%=txtData.ClientID %>').val());
 
        $.each(tOriJsonObj, function(i, item) {
            if (pAppendKey == item.No) {
                tResult = true;
            }
        });
 
        return tResult;
    }
 
    新增一筆資料 隱藏欄位
    function AppendData(pObj) {
        var tOriJsonObj = JSON.parse($('#<%=txtData.ClientID %>').val());
 
        tOriJsonObj.push(pObj);
 
        $('#<%=txtData.ClientID %>').val(JSON.stringify(tOriJsonObj));
    }
 
    初始化資料 Table
    function InitTable(pObjList) {
 
        $('#GroupTable tr').each(function(i) {
            if (i > 0) {
                var tRow = $(this);
                tRow.remove();
            }
        });
 
        $.each(pObjList, function(i, item) {
            $("#GroupTable").append("<tr>" +
                                  "<td>" + "<input type='checkbox'>" + "</td>" +
                                  "<td>" + item.No + "</td>" +
                                  "<td>" + item.Name + "</td>" +
                                  "</tr>");
        });
    }
 
    等網頁載完(PostBack)後要做的事
    $(function() {
        var tJsonObj = JSON.parse($('#<%=txtData.ClientID %>').val());
        InitTable(tJsonObj);
    });
</script>

以上便可以完成其劇情應用，小弟對網頁設計的概念總是一知半解，若其中有什麼可以修正的(應該很多吧)，

請指導一下小弟，非常感謝！