要達成功能:
1.用GridViwe選取一筆資料後FormView顯示詳細資料
2.可以選取修改刪除新增資料
重點1:不搭配SqlDataSource小精靈。(除了GridView這裡重點放在FormView)
重點2:FormView畫面必須從頭到尾自己做(例如想要TextBox跟等下後端程式去資料庫老出來的資料結合,做法如下)。
選進FormView的ItemTemplate,然後拉進控制項,在用控制項來做DataBinding
(這裡的DataBinding是外觀,真正把資料塞入還是要靠後端的程式來真正撈出來在放入外觀中)。
重點3:因為FormViwe一次顯示一筆資料,所以無法像GridView那樣用CommandName,因此我們新增刪除編輯更新...按鈕必須加在FormView控制項外面。
前端程式碼:
<asp:FormView ID="FormView1" runat="server" AllowPaging="True">
<EditItemTemplate>
文章編號：<asp:Label ID="Label_E_id" runat="server" Text='<%# Eval("id") %>'></asp:Label>
<br />
日期：<asp:TextBox ID="TextBox_E_Test_time" runat="server" Text='<%# Bind("test_time") %>'></asp:TextBox>
<br />
分類：<asp:TextBox ID="TextBox_E_class" runat="server" Text='<%# Bind("class") %>'></asp:TextBox>
<br />
<br />
標題：<asp:TextBox ID="TextBox_E_title" runat="server" Width="400px" Text='<%# Bind("title") %>'></asp:TextBox>
<br />
摘要：<asp:TextBox ID="TextBox_E_summary" runat="server" Height="50px" TextMode="MultiLine"
Width="400px" Text='<%# Bind("summary") %>'></asp:TextBox>
<br />
內容：<asp:TextBox ID="TextBox_E_article" runat="server" Height="200px"
TextMode="MultiLine" Width="400px" Text='<%# Bind("article") %>'></asp:TextBox>
<br />
作者：<asp:TextBox ID="TextBox_E_author" runat="server" Text='<%# Bind("author") %>'></asp:TextBox>
</EditItemTemplate>
<InsertItemTemplate>
<br />
分類：<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem Selected="True">科技</asp:ListItem>
<asp:ListItem>教育</asp:ListItem>
<asp:ListItem>政治</asp:ListItem>
<asp:ListItem>娛樂</asp:ListItem>
<asp:ListItem>其他</asp:ListItem>
</asp:ListBox>
<br />
<br />
標題：<asp:TextBox ID="TextBox_I_title" runat="server" Width="400px"></asp:TextBox>
<br />
摘要：<asp:TextBox ID="TextBox_I_summary" runat="server" Height="50px" TextMode="MultiLine"
Width="400px"></asp:TextBox>
<br />
內容：<asp:TextBox ID="TextBox_I_article" runat="server" Height="200px"
TextMode="MultiLine" Width="400px"></asp:TextBox>
<br />
作者：<asp:TextBox ID="TextBox_I_author" runat="server"></asp:TextBox>
</InsertItemTemplate>
<ItemTemplate>
文章編號：<asp:Label ID="Label_id" runat="server" Text='<%# Eval("id") %>'></asp:Label>
<br />
分類：<asp:Label ID="Label_class" runat="server" Text='<%# Eval("class") %>'></asp:Label>
<br />
<br />
標題：<asp:Label ID="Label_title" runat="server" Text='<%# Eval("title") %>'></asp:Label>
<br />
摘要：<asp:Label ID="Label_summary" runat="server" Text='<%# Eval("summary") %>'></asp:Label>
<br />
內容：<asp:Label ID="Label_article" runat="server" Text='<%# Eval("article") %>'></asp:Label>
<br />
作者：<asp:Label ID="Label_author" runat="server" Text='<%# Eval("author") %>'></asp:Label>
<br />
</ItemTemplate>
<InsertRowStyle BackColor="#CCFFCC" />
</asp:FormView>
<hr />
<br />
<!-- '*** 自己設計 Button按鈕，修改 FormView的模式(加在樣板外) ***************** -->
<asp:Button ID="ButtonEdit" runat="server" Text="Edit Mode（編輯模式）"
onclick="ButtonEdit_Click" />
<asp:Button ID="ButtonInsert" runat="server" Text="Insert Mode（新增模式）"
onclick="ButtonInsert_Click" />
<asp:Button ID="ButtonInsertSubmit" runat="server" Text="Insert_Submit（確認新增）"
visible="false" onclick="ButtonInsertSubmit_Click" />
<asp:Button ID="ButtonUpdate" runat="server" Text="Update（更新）" visible="false"
onclick="ButtonUpdate_Click" />
<asp:Button ID="ButtonCancel" runat="server" Text="Cancel（取消，回到檢視模式）"
visible="false" onclick="ButtonCancel_Click" />
</div>
後端程式碼:
protected void myDBInit()
{
SqlConnection Conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString);
//用來記錄User按下哪一筆資料的id
if (ViewState["t_id"] == null)
{
ViewState["t_id"] = 5; //預設值
}
SqlDataAdapter myAdapter = new SqlDataAdapter("select * from test where id =" + ViewState["t_id"] , Conn);
DataSet ds = new DataSet();
try
{
myAdapter.Fill(ds, "test");
FormView1.DataSource = ds;
FormView1.DataBind();
}
catch (Exception ex)
{
Response.Write("<HR/> Exception Error Message---- " + ex.ToString());
}
}
protected void Page_Load(object sender, EventArgs e)
{
//只有第一次執行此頁,才執行
if (!Page.IsPostBack)
{
myDBInit();
}
}
//GV一被按下,紀錄那一筆資料列的id
protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
{
ViewState["t_id"] = GridView1.SelectedValue.ToString(); //-- 被選取的那一列資料「主索引鍵」
myDBInit();
}
//====================================================================================
//== 改變 FormView的畫面模式 （Button的動作都在下面）==
//====================================================================================
protected void ButtonUpdate_Click(object sender, EventArgs e)
{
SqlConnection Conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString);
SqlDataAdapter myAdapter = new SqlDataAdapter();
//*******************************************************************************
//== 撰寫SQL指令( Update ) ==
//== (使用參數來做，避免 SQL Injection攻擊)
Label myLabel_id = (Label)FormView1.FindControl("Label_E_id");
TextBox myTextBox_class = (TextBox)FormView1.FindControl("TextBox_E_class");
TextBox myTextBox_title = (TextBox)FormView1.FindControl("TextBox_E_title");
TextBox myTextBox_summary = (TextBox)FormView1.FindControl("TextBox_E_summary");
TextBox myTextBox_article = (TextBox)FormView1.FindControl("TextBox_E_article");
TextBox myTextBox_author = (TextBox)FormView1.FindControl("TextBox_E_author");
myAdapter.UpdateCommand = new SqlCommand("Update [test] set [class] = @myClass, [title] = @mytitle, [summary] = @mysummary, [article] = @myArticle, [author] = @myAuthor where [id] = @myID", Conn);
myAdapter.UpdateCommand.Parameters.AddWithValue("@myClass", myTextBox_class.Text);
myAdapter.UpdateCommand.Parameters.AddWithValue("@mytitle", myTextBox_title.Text);
myAdapter.UpdateCommand.Parameters.AddWithValue("@mysummary", myTextBox_summary.Text);
myAdapter.UpdateCommand.Parameters.AddWithValue("@myArticle", myTextBox_article.Text);
myAdapter.UpdateCommand.Parameters.AddWithValue("@myAuthor", myTextBox_author.Text);
myAdapter.UpdateCommand.Parameters.AddWithValue("@myID", ViewState["t_id"]);
Conn.Open();
myAdapter.UpdateCommand.ExecuteNonQuery();
myAdapter.Dispose();
//========================================
//== 更新資料完成！
FormView1.ChangeMode(FormViewMode.ReadOnly); //-- 改變成「瀏覽（唯讀）」模式
ButtonEdit.Visible = true;
ButtonInsert.Visible = true;
ButtonInsertSubmit.Visible = false;
ButtonCancel.Visible = false;
ButtonUpdate.Visible = false;
myDBInit();
GridView1.DataBind();
}
protected void ButtonCancel_Click(object sender, EventArgs e)
{
FormView1.ChangeMode(FormViewMode.ReadOnly); //-- 取消編輯模式，回到「瀏覽（唯讀）」模式
ButtonEdit.Visible = true;
ButtonInsert.Visible = true;
ButtonInsertSubmit.Visible = false;
ButtonCancel.Visible = false;
ButtonUpdate.Visible = false;
myDBInit();
}
protected void ButtonEdit_Click(object sender, EventArgs e)
{
FormView1.ChangeMode(FormViewMode.Edit); //-- 改變成「編輯」模式
ButtonEdit.Visible = false;
ButtonInsert.Visible = false;
ButtonInsertSubmit.Visible = false;
ButtonCancel.Visible = true;
ButtonUpdate.Visible = true;
myDBInit();
}
protected void ButtonInsert_Click(object sender, EventArgs e)
{
FormView1.ChangeMode(FormViewMode.Insert); //-- 改變成「新增」模式
ButtonEdit.Visible = false;
ButtonInsert.Visible = false;
ButtonInsertSubmit.Visible = true;
ButtonCancel.Visible = true;
ButtonUpdate.Visible = false;
}
protected void ButtonInsertSubmit_Click(object sender, EventArgs e)
{
SqlConnection Conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString);
SqlDataAdapter myAdapter = new SqlDataAdapter();
myAdapter.InsertCommand = new SqlCommand("Insert into test(class,title,summary,article,author) VALUES(@myClass,@mytitle,@mysummary,@myArticle,@myAuthor)", Conn);
//***********************************************************
//== 撰寫SQL指令(Insert Into) ==
//== (使用參數來做，避免 SQL Injection攻擊)
ListBox my2ListBox_class = (ListBox)FormView1.FindControl("ListBox1");
TextBox my2TextBox_title = (TextBox )FormView1.FindControl("TextBox_I_title");
TextBox my2TextBox_summary = (TextBox )FormView1.FindControl("TextBox_I_summary");
TextBox my2TextBox_article = (TextBox )FormView1.FindControl("TextBox_I_article");
TextBox my2TextBox_author = (TextBox )FormView1.FindControl("TextBox_I_author");
myAdapter.InsertCommand.Parameters.AddWithValue("@myClass", my2ListBox_class.Text);
myAdapter.InsertCommand.Parameters.AddWithValue("@mytitle", my2TextBox_title.Text);
myAdapter.InsertCommand.Parameters.AddWithValue("@mysummary", my2TextBox_summary.Text);
myAdapter.InsertCommand.Parameters.AddWithValue("@myArticle", my2TextBox_article.Text);
myAdapter.InsertCommand.Parameters.AddWithValue("@myAuthor", my2TextBox_author.Text);
//==使用 @參數的時候，前後沒有加上單引號（’）。
//***********************************************************
Conn.Open();
myAdapter.InsertCommand.ExecuteNonQuery();
myAdapter.Dispose();
//========================================
//== 新增一筆資料完成！
FormView1.ChangeMode(FormViewMode.ReadOnly); //-- 改變成「瀏覽（唯讀）」模式
ButtonEdit.Visible = true;
ButtonInsert.Visible = true;
ButtonInsertSubmit.Visible = false;
ButtonCancel.Visible = false;
ButtonUpdate.Visible = false;
myDBInit();
GridView1.DataBind();
}
留言列表
RWD (1)
