melo 唐

重點1:

我用兩個Panel各自包住兩個區塊(一個是插入資料的區塊,一個是更新資料庫資料的區塊)。

重點2:

CKEditor就跟TextBox控制項抓取的方法一樣。

前端畫面:

插入資料區塊:

<asp:Panel ID="Panel2" runat="server">
<div>
標題:<asp:DropDownList ID="DropDownList1" runat="server" Height="16px" Width="115px">
<asp:ListItem>運動</asp:ListItem>
<asp:ListItem>休閒</asp:ListItem>
<asp:ListItem>科技</asp:ListItem>
</asp:DropDownList>
<br />
<br />
分類:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
摘要:<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<br />
文章內容:<CKEditor:CKEditorControl ID="CKEditorControl1" runat="server" Height="231px" BasePath="~\Chap_09_Manual_Input\[Samples]CKEditor_VS_2012\WebSite45_CKeditor_411_CS\ckeditor_4.1.1_full\ckeditor\">
</CKEditor:CKEditorControl>
<br />
<br />
<br />
作者:<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="新增一筆文章" Width="192px" OnClick="Button1_Click" />
</asp:Panel>
<br />
<br />

更新資料庫資料的區塊:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource2" PageSize="5" Width="914px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" AllowSorting="True" CellPadding="4" ForeColor="#333333" GridLines="None" OnSorting="GridView1_Sorting">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True" SortExpression="id" />
<asp:BoundField DataField="test_time" HeaderText="test_time" SortExpression="test_time" />
<asp:BoundField DataField="class" HeaderText="class" SortExpression="class" />
<asp:BoundField DataField="title" HeaderText="title" SortExpression="title" />
<asp:BoundField DataField="summary" HeaderText="summary" SortExpression="summary" />
<asp:BoundField DataField="author" HeaderText="author" SortExpression="author" />
</Columns>
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:testConnectionString %>" DeleteCommand="DELETE FROM [test] WHERE [id] = @id" InsertCommand="INSERT INTO [test] ([test_time], [class], [title], [summary], [author]) VALUES (@test_time, @class, @title, @summary, @author)" SelectCommand="SELECT [id], [test_time], [class], [title], [summary], [author] FROM [test]" UpdateCommand="UPDATE [test] SET [test_time] = @test_time, [class] = @class, [title] = @title, [summary] = @summary, [author] = @author WHERE [id] = @id">
<DeleteParameters>
<asp:Parameter Name="id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="test_time" Type="DateTime" />
<asp:Parameter Name="class" Type="String" />
<asp:Parameter Name="title" Type="String" />
<asp:Parameter Name="summary" Type="String" />
<asp:Parameter Name="author" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="test_time" Type="DateTime" />
<asp:Parameter Name="class" Type="String" />
<asp:Parameter Name="title" Type="String" />
<asp:Parameter Name="summary" Type="String" />
<asp:Parameter Name="author" Type="String" />
<asp:Parameter Name="id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:testConnectionString %>" DeleteCommand="DELETE FROM [test] WHERE [id] = @id" InsertCommand="INSERT INTO [test] ([test_time], [class], [title], [summary], [article], [author]) VALUES (@test_time, @class, @title, @summary, @article, @author)" SelectCommand="SELECT [id], [test_time], [class], [title], [summary], [article], [author] FROM [test]" UpdateCommand="UPDATE [test] SET [test_time] = @test_time, [class] = @class, [title] = @title, [summary] = @summary, [article] = @article, [author] = @author WHERE [id] = @id">
<DeleteParameters>
<asp:Parameter Name="id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="test_time" Type="DateTime" />
<asp:Parameter Name="class" Type="String" />
<asp:Parameter Name="title" Type="String" />
<asp:Parameter Name="summary" Type="String" />
<asp:Parameter Name="article" Type="String" />
<asp:Parameter Name="author" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="test_time" Type="DateTime" />
<asp:Parameter Name="class" Type="String" />
<asp:Parameter Name="title" Type="String" />
<asp:Parameter Name="summary" Type="String" />
<asp:Parameter Name="article" Type="String" />
<asp:Parameter Name="author" Type="String" />
<asp:Parameter Name="id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<br />

<asp:Panel ID="Panel1" runat="server" Visible="False">
日期:<asp:TextBox ID="TextBox_time" runat="server"></asp:TextBox>
<br />
<br />
標題:<asp:TextBox ID="TextBox_title" runat="server"></asp:TextBox>
<br />
<br />
分類:<asp:TextBox ID="TextBox_class" runat="server"></asp:TextBox>
<br />
<br />
摘要:<asp:TextBox ID="TextBox_summary" runat="server"></asp:TextBox>
<br />
<br />
文章內容:<CKEditor:CKEditorControl ID="CKEditorControl2" runat="server">
</CKEditor:CKEditorControl>
<br />
<br />
<br />
作者:<asp:TextBox ID="TextBox_author" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="確認修改" Width="274px" OnClick="Button2_Click" />
<br />
</asp:Panel>

所以會前端分成上下兩個畫面。

插入資料區塊畫面:(按下新增文章後會把插入資料這邊的panel顯示給disable掉,把更新資料庫畫面那邊的panel給顯示出來)

更新以及顯示資料庫資料畫面:(GridView按下選取即可對這筆資料用CKEditor更改)

後置程式碼:

protected void Page_Load(object sender, EventArgs e)
{

}

//按下後新增一筆資料
protected void Button1_Click(object sender, EventArgs e)
{
//把這個插入資料的區塊給隱藏起來
Panel2.Visible = false;

SqlDataSource SqlDataSource2 = new SqlDataSource();

SqlDataSource2.ConnectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString;

SqlDataSource2.InsertParameters.Add("mytitle", TextBox1.Text);
SqlDataSource2.InsertParameters.Add("myTest_time", System.DateTime.Now.ToShortDateString());
SqlDataSource2.InsertParameters.Add("myClass",DropDownList1.SelectedItem.Value.ToString());
SqlDataSource2.InsertParameters.Add("mySummary", TextBox2.Text);

SqlDataSource2.InsertParameters.Add("myArticle", CKEditorControl1.Text);

SqlDataSource2.InsertParameters.Add("myAuthor", TextBox4.Text);

SqlDataSource2.InsertCommand = "Insert into test(title,test_time,class,summary,article,author) values(@myTitle,@myTest_time,@myClass,@mysummary,@myArticle,@myAuthor)";

int aff_row = SqlDataSource2.Insert();

if (aff_row <= 0)
{
Response.Write("新增資料失敗");
}
else
{
Response.Write("新增資料成功");

}
SqlDataSource2.Dispose();
}

//選取GridView要修改的資料後,會把資料庫資料抓到textbox跟CKEditor中給user修給
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
Panel1.Visible = true;

SqlConnection Conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString);
SqlDataReader dr = null;

SqlCommand cmd = new SqlCommand("select id,test_time,class,title,summary,article,author from test where id =" + GridView1.SelectedValue, Conn);
ViewState["myID"] = GridView1.SelectedValue;

try
{
Conn.Open();
dr = cmd.ExecuteReader();
dr.Read();

TextBox_time.Text = dr["test_time"].ToString();
TextBox_class.Text = dr["class"].ToString();
TextBox_title.Text = dr["title"].ToString();
TextBox_summary.Text = dr["summary"].ToString();
CKEditorControl2.Text = dr["article"].ToString();
TextBox_author.Text = dr["author"].ToString();
}
catch (Exception ex)
{
Response.Write(ex.ToString());
}
finally
{
if (dr != null)
{
cmd.Cancel();
//----關閉DataReader之前，一定要先「取消」SqlCommand
dr.Close();
}
//---- Close the connection when done with it.
if (Conn.State == ConnectionState.Open)
{
Conn.Close();
Conn.Dispose(); //---- 一開始宣告有用到 New的,最後必須以 .Dispose()結束
}
}
}

//按下後會更新您選擇的那筆資料
protected void Button2_Click(object sender, EventArgs e)
{
SqlDataSource SqlDataSource1 = new SqlDataSource();

SqlDataSource1.ConnectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString;

SqlDataSource1.UpdateParameters.Add("myTitle", TextBox_title.Text);
SqlDataSource1.UpdateParameters.Add("myTest_time", System.DateTime.Now.ToShortDateString());
SqlDataSource1.UpdateParameters.Add("myClass", TextBox_class.Text);
SqlDataSource1.UpdateParameters.Add("mySummary", TextBox_summary.Text);
//**************************************************
//*** 使用 FckEditor的話，必須寫成 FCKeditor1.Value ***
SqlDataSource1.UpdateParameters.Add("myArticle", CKEditorControl2.Text);
//**************************************************
SqlDataSource1.UpdateParameters.Add("myAuthor", TextBox_author.Text);

SqlDataSource1.UpdateCommand = "Update test set title=@myTitle, test_time=@myTest_time, class=@myClass, summary=@mysummary, article=@myArticle, author=@myAuthor where id = " + ViewState["myID"];

int aff_row2 = SqlDataSource1.Update();
if (aff_row2 == 0)
{
Response.Write("更新失敗");
}
else
{
Response.Write("<font color=blue>資料修改成功！</font>");
}
SqlDataSource1.Dispose();
Panel1.Visible = false;
Panel2.Visible = true;
GridView1.DataBind();
}