We Keep Coding

Showing comments without reloading page - c#

The code below get me a comment , puts it in the database and then waits for a page reload to show the comment. How can i make the submited comment to be shown right after it has been posted along with the new ones ? This is the code that does the stuff :
Layout:
<table>
<tr>
<td colspan="2">All Comments</td>
<td>
&nbsp
</td>
</tr>
<tr> <td colspan="2"> </td></tr>
<tr>
<td>
<asp:Repeater ID="Repeater1" runat="server" ItemType="SiteStiri.Models.Comments" SelectMethod="GetComments" >
<ItemTemplate>
<table>
<tr>
<td colspan="2">
<asp:Label id="lblDate" runat="server" Text='<%# Item.ReleaseDate %>'></asp:Label>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="lblComment" runat="server" Text='<%# Item.Comment %>'>
</asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
<AlternatingItemTemplate>
<table>
<tr>
<td colspan="2">
<asp:Label id="Label1" runat="server" Text='<%# Item.ReleaseDate %>'></asp:Label>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="Label2" runat="server" Text='<%# Item.Comment %>'>
</asp:Label>
</td>
</tr>
</table>
</AlternatingItemTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</td>
</tr>
<td>
<table>
<tr>
<td colspan="2" >Add Your Comment</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblStatus" runat="server" Visible="False"></asp:Label>
</td>
<td>
&nbsp
</td>
</tr>
<tr>
<td colspan="2">
<asp:TextBox ID="txtcomment" runat="server" TextMode="MultiLine">
</asp:TextBox>
</td>
<td>
&nbsp
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</td>
<td>
&nbsp
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
Code Behind:
public void fnSubmitComment()
{
AddComment cmt = new AddComment();
String x = Request.QueryString["newsID"].ToString();
int y = Convert.ToInt32(x);
bool addSucces = cmt.Addcomment( y , txtcomment.Text);
if (addSucces)
{
lblStatus.Text = "Your Comment has been Added Successfully.";
}
else
{
lblStatus.Text = "Your Comment has not been Added.";
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
fnSubmitComment();
}
public IQueryable<Comments> GetComments()
{
var _db = new SiteStiri.Models.CommentsContext();
IQueryable<Comments> query = _db.Comments;
String x = Request.QueryString["newsID"].ToString();
int y = Convert.ToInt32(x);
query = query.Where(p => p.NewsID == y);
return query;
}
I heard i can do that with ajax ? (My knowledge about ajax is 0 currently) Any tips on how i can do this ?

You must wrapper you repeater in an updatepanel,
set UpdateMode="Conditional" and add a trigger on btnSubmit so when click the button the update the repeater with the normal page life cycle
Remember to bind the repeater after that you add the commet in the codebehind and must be present in your page a ScriptManager control
more or less thus
<asp:ScriptManager runat="server" />
<table>
<tr>
<td colspan="2">All Comments</td>
<td>&nbsp
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server" ItemType="SiteStiri.Models.Comments" SelectMethod="GetComments">
<ItemTemplate>
<table>
<tr>
<td colspan="2">
<asp:Label ID="lblDate" runat="server" Text='<%# Item.ReleaseDate %>'></asp:Label>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="lblComment" runat="server" Text='<%# Item.Comment %>'>
</asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
<AlternatingItemTemplate>
<table>
<tr>
<td colspan="2">
<asp:Label ID="Label1" runat="server" Text='<%# Item.ReleaseDate %>'></asp:Label>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Label ID="Label2" runat="server" Text='<%# Item.Comment %>'>
</asp:Label>
</td>
</tr>
</table>
</AlternatingItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td colspan="2">Add Your Comment</td>
</tr>
<tr>
<td colspan="2">
<asp:Label ID="lblStatus" runat="server" Visible="False"></asp:Label>
</td>
<td>&nbsp
</td>
</tr>
<tr>
<td colspan="2">
<asp:TextBox ID="txtcomment" runat="server" TextMode="MultiLine">
</asp:TextBox>
</td>
<td>&nbsp
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</td>
<td>&nbsp
</td>
</tr>
</table>
</td>
</tr>
</table>

Related

Here is my aspx code. im using a formview and fixed values in which i used an asp.label. but when i run it, formview doesnt show up. i dont have any code behind in which i think i lack? i really appreciate any help. thanks in advance!
<asp:FormView ID="EmployeeFormView" HorizontalAlign="Center"
DataKeyNames="ID"
Gridlines="Both"
RunAt="server"
BackColor="#FFFF66"
BorderColor="#FF8080">
<HeaderStyle backcolor="Navy"
forecolor="#999966"/>
<RowStyle backcolor="White" ForeColor="#CC3300"/>
<EditRowStyle backcolor="#FFFFFF" ForeColor="#FF9966"/>
<ItemTemplate>
<table id="tblcustomerprofile" border="1" cellpadding="1" cellspacing="0">
<tr>
<td style="width:100px">
ID:
</td>
<td style="width:250px">
<asp:Label ID="Label1" runat="server" Text="10999574"></asp:Label>
</td>
<tr>
<td style="width:100px">
Name:
</td>
<td style="width:250px">
<asp:Label ID="Label2" runat="server" Text="Paolo Duhaylungsod"></asp:Label>
</td>
<tr>
<td>
Age:
</td>
<td>
<asp:Label ID="Label12" runat="server" Text="24"></asp:Label>
</td>
<tr>
<td>
Birth Date:
</td>
<td>
<asp:Label ID="Label13" runat="server" Text="06/29/1990"></asp:Label>
</td>
</tr>
<tr>
<td>
Citizenship:
</td>
<td>
<asp:Label ID="Label14" runat="server" Text="Filipino"></asp:Label>
</td>
<tr>
<td>
Status:
</td>
<td>
<asp:Label ID="Label15" runat="server" Text="Single"></asp:Label>
</td>
</tr>
<tr>
<td style="width:100px">
Email Address:
</td>
<td style="width:250px">
<asp:Label ID="Label3" runat="server" Text="paolodexter#yahoo.com"></asp:Label>
</td>
<tr>
<td style="width:100px">
College:
</td>
<td style="width:250px">
<asp:Label ID="Label4" runat="server" Text="De La Salle- College of Saint Benilde"></asp:Label>
</td>
<tr>
<td>
Course:
</td>
<td>
<asp:Label ID="Label5" runat="server" Text="BS- Information Systems"></asp:Label>
</td>
<tr>
<td>
Contact Number:
</td>
<td>
<asp:Label ID="Label6" runat="server" Text="09255666167"></asp:Label>
</td>
</tr>
<tr>
<td>
Address:
</td>
<td colspan="3">
<asp:Label ID="Label7" runat="server" Text="Bf Resort Village, Las Pinas"></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<EmptyDataTemplate>

I believe you need to add the default mode property to your formview.
defaultmode="Edit"
without this the formview would be set to show the empty data template.
You could also try to just add all of your code to the empty data template of the formview then it should all show up

I have a multiview control, that has two views. View1 is the default view, and View2 is the new view. When the end user click a button, I want to change the view to View2. I can't seem to achieve this anyway I go.
ASP.NET Code:
<asp:MultiView ID="MVOrder" runat="server">
<asp:View ID="VOrderNow" runat="server">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Label ID="LblInfo" runat="server"></asp:Label>
</td>
<td>
</td>
<td> </td>
</tr>
<tr>
<td>
<asp:Label ID="LblDrink" runat="server"></asp:Label>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<asp:Label ID="LblItemInfo" runat="server"></asp:Label>
</td>
<td>
</td>
<td> </td>
</tr>
</table>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:View>
<asp:View runat="server" ID="VOrderComplete">
<table class="auto-style1">
<tr>
<td> </td>
<td>
<asp:Label ID="LblOrderComplete" runat="server"></asp:Label>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<asp:Label ID="LblOrderNumberAgain" runat="server"></asp:Label>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<asp:Label ID="LblOrderTimeAgain" runat="server"></asp:Label>
</td>
<td> </td>
</tr>
</table>
</asp:View>
<br/>
</asp:MultiView>
Button Click Event Code:
protected void Button1_Click(object sender, EventArgs e)
{
//MVOrder.ActiveViewIndex = 1;
MVOrder.SetActiveView(VOrderComplete);
}
Page Load Code:
if (!IsPostBack)
{
MVOrder.SetActiveView(VOrderNow);
}
Can someone please tell me what I am doing wrong?

I think you might have some additional code that might make this not work properly. But based on what you've shown, this will post and update your view:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:MultiView ID="MVOrder" runat="server">
<asp:View ID="VOrderNow" runat="server">
<table>
<tr>
<td><asp:Label ID="LblInfo" runat="server" Text="asdfasdfasdf"></asp:Label></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><asp:Label ID="LblDrink" runat="server" Text="lmnoplmnop"></asp:Label></td>
<td></td>
<td></td>
</tr>
<tr>
<td><asp:Label ID="LblItemInfo" runat="server" Text="iteminfo"></asp:Label></td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</asp:View>
<asp:View runat="server" ID="VOrderComplete">
<table class="auto-style1">
<tr>
<td> </td>
<td><asp:Label ID="LblOrderComplete" runat="server" Text="ordercomplete"></asp:Label></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><asp:Label ID="LblOrderNumberAgain" runat="server" Text="ordernumberagain"></asp:Label></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><asp:Label ID="LblOrderTimeAgain" runat="server" Text="ordertimeagain"></asp:Label></td>
<td> </td>
</tr>
</table>
</asp:View>
<br />
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>

I have a textbox in my form which must be validated only if is empty or contains 11 digits.
I tried every solution found on internet but nothing happens.
<script type="text/javascript">
$(document).ready(function() {
$('#ctl00_CPH1_tax_id').attr("placeholder", "1234567890");
$('#ctl00_CPH1_citizen_id').attr("placeholder", "12345678901");
$('#ctl00_CPH1_e_posta').attr("placeholder", "ahmet.mehmet#sirket.com.tr");
//var isbp = $('#ctl00_CPH1_IsBP');
var name = $('#ctl00_CPH1_name').val();
var code = $('#ctl00_CPH1_code').val();
var dropdownlist2 = $('select:first');
var tax_id = $('#ctl00_CPH1_tax_id').val();
var citizen_id = $('#ctl00_CPH1_citizen_id').val();
var email1 = $('#ctl00_CPH1_e_posta').val();
var isbp = $('input[type=checkbox]:first');
var dropdownlist1 = $('select:last');
var isactive = $('input[type=checkbox]:last');
//var dropdownlist1 = $('#ct100_CPH1_DropDownList1');
var tax_id_check = /^\d{10}$/.test(tax_id);
var citizen_id_check = /^$|^\d{11}$/.test(citizen_id);
var email1_check = /^[a-zA-Z0-9._]+#([a-zA-Z0-9.]|[a-zA-Z0-9]+\-[a-zA-Z0-9.])+\.[a-zA-Z]{2,6}$/.test(email1);
dropdownlist1.attr("disabled", "disabled");
isactive.attr("disabled", "disabled");
$(isbp).click(function(e) {
if (isbp.is(':checked')) {
dropdownlist1.removeAttr("disabled");
isactive.removeAttr("disabled");
}
else {
isactive.attr("disabled", "disabled");
dropdownlist1.attr("disabled", "disabled");
}
});
$("#ctl00_CPH1_Button1").click(function(e) {
//console.log(drop2);
//var name_status = /^[a-zA-Z][a-zA-Z]*$/.test(name);
//var code_status = /^[a-zA-Z][a-zA-Z]*$/.test(code);
//var IsBP = $('#ctl00_CPH1_IsBP');
//if (name.length < 3 || name_status == false) {
// e.preventDefault();
// alert('İsim sadece karakterlerden oluşmalı ve en az iki karakter olmalı!');
//}
//if (code.length < 3 || code_status == false) {
// e.preventDefault();
// alert('Soyisim sadece karakterlerden oluşmalı ve en az iki karakter olmalı!');
//}
if (name.length == 0) {
e.preventDefault();
alert("İsim girilmedi!");
}
if (code.length == 0) {
e.preventDefault();
alert("Şirket Kodu girilmedi!");
}
if (dropdownlist2.val() == 0) {
e.preventDefault();
alert("Ülke seçilmedi!");
}
if (citizen_id.length != 0) {
e.preventDefault();
alert("Vatandaşlık numarası onbir haneli olmalı!");
}
if (tax_id.length == 0) {
e.preventDefault();
alert("Vergi numarası girilmedi!");
}
else if (!tax_id_check) {
e.preventDefault();
alert("Vergi numarası on haneli olmalı!");
}
if (email1 != "" && !email1_check) {
e.preventDefault();
alert("E-Posta geçerli değil!");
}
if (isbp.is(':checked') && dropdownlist1.val() == 0) {
e.preventDefault();
alert("İş ortağı tipi seçilmedi!");
}
});
});
This is my script and aspx follows:
<form id="form1" runat="server">
<div>
<center>
<table>
<tr>
<td colspan="3" align="center">
Şirket Giriş Ekranı</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label1" runat="server" Text="İsim"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="name" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label2" runat="server" Text="Şirket Kodu"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="code" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label3" runat="server" Text="Ülke"></asp:Label>
</td>
<td class="style4" colspan="2">
<asp:DropDownList ID="DropDownList2" runat="server"
onselectedindexchanged="DropDownList2_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label4" runat="server" Text="Vergi No"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="tax_id" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label5" runat="server" Text="Vergi Dairesi"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="tax_office" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label6" runat="server" Text="Vatandaşlık No"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="citizen_id" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label7" runat="server" Text="Adres"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="address" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label14" runat="server" Text="E-posta"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="e_posta" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label15" runat="server" Text="Telefon"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="telefon" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label16" runat="server" Text="Fax"></asp:Label>
</td>
<td colspan="2">
<asp:TextBox ID="faks" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label10" runat="server" Text="İş Ortağım"></asp:Label>
</td>
<td colspan="2">
<asp:CheckBox ID="IsBP" runat="server" oncheckedchanged="IsBP_CheckedChanged"/> <!--AutoPostBack="true"-->
<asp:Label ID="Label11" runat="server" Text="Evet"></asp:Label>
</td>
</tr>
<tr>
<td align="left">
<asp:Label ID="Label12" runat="server" Text="İş Ortağı Tipi"></asp:Label>
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td>
<asp:CheckBox ID="IsActive" runat="server"
oncheckedchanged="IsActive_CheckedChanged" />
<asp:Label ID="Label13" runat="server" Text="Aktif"></asp:Label>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Geri" />
</td>
<td colspan="2" align="center">
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Kaydet" />
</td>
</tr>
</table>
<br />
</center>
</div>
</form>
I tried jquery older versions like 1.8.3 which is stable instead of 1.9.1
Also jquery.validate.
When I run the code on chrome and inspect element on console everything runs properly.
But my code does not show any alerts.
"==" works but "!=" or ">" not.
Thanks in advance!
not working textboxes are e_mail and citizen_id. other textboxes work properly.

Use the ASP.NET validator with a regular expression akin to
"(\d{11})?"
<asp:RegularExpressionValidator ControlToValidate="citizen_id"
ValidationExpression="(\d{11})?" runat="server"
Text="Must be 11 digits or empty" />
This will prevent a postback if the textbox "citizen_id" is anything but "" or an 11 digit number.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.regularexpressionvalidator.aspx

This is my repeater control with data coming from [Patient_Master] table. But Visit_Date is coming from [Patient_Visit] table. How can I show Visit_Date to the same repeater? Is it possible to give two datasources to one repeater? [Patient_Master] and [Patient_Visit] have a relation:
<asp:Repeater ID="repeaterPatientList" runat="server" OnItemDataBound="repeaterPatientList_ItemDataBound" >
<ItemTemplate>
<tr onclick="selectRow(this);">
<td class="csstablelisttd" style="display:none" >
<asp:Label ID="lblPID" runat="server" Text='<%#Eval("PID")%>'></asp:Label>
</td>
<td class="csstablelisttd" >
<%#Eval("Patient_Name")%>
</td>
<td class="csstablelisttd">
<asp:Label ID="lblPatientName" runat="server" Text='<%#Eval("Patient_ID")%>'></asp:Label>
</td>
<td class="csstablelisttd" >
<asp:Label ID="lblSex" runat="server" Text='<%#Eval("Sex")%>'></asp:Label>
</td>
<td class="csstablelisttd">
<asp:Label ID="lblPatientsBirthDate" runat="server" Text='<%#Eval("Patients_Birth_Date")%>'></asp:Label>
</td>
<td class="csstablelisttd">
<asp:Label ID="lblLastVisitDate" runat="server" Text='<%#Eval("Visit_Date")%>'></asp:Label>
</td>
<td class="csstablelisttd">
New
</td>
<td id="tdTodaysVisit" bgcolor="#00cc66" runat="server">
<span class="cssgreen">Today's Visit</span>
</td>
<td class="csstablelisttd">
<%--<asp:HyperLink ID="lnkSchedule" CssClass="csshyperlinkSchedulePatient" runat="server" NavigateUrl='<%# Eval("PID", "~/Create_Order.aspx?ID={0}") %>'>Schedule</asp:HyperLink>--%>
Schedule
</td>
</tr>
</ItemTemplate>
</asp:Repeater>

Why don't you use an outer join between patient_master and patient_visit.

because I manually want to show the modal popup (this might be due to the fact that the controls inside the popup have to initialized according to the pressed button or row). Can anyone help me? The button NEVER goes to this EditBtn_Click method, it just aways show my panel.
Code:
protected void EditBtn_Click(object sender, EventArgs e)
{
LinkButton btn = (LinkButton)sender;
GridViewRow row = (GridViewRow)btn.NamingContainer;
int i = Convert.ToInt32(row.RowIndex);
string uid = (string)ManageStaffGrid.Rows[i].Cells[1].Text;
//bind panel
AjaxControlToolkit.ModalPopupExtender mpe = (AjaxControlToolkit.ModalPopupExtender)row.FindControl("EditBtn_ModalPopupExtender");
mpe.Show(); //show the modal popup extender
}
Design:
(from grid)
<ItemTemplate>
<asp:LinkButton ID="EditBtn" runat="server" onclick="EditBtn_Click">Edit</asp:LinkButton>
<asp:ModalPopupExtender ID="EditBtn_ModalPopupExtender" runat="server" CancelControlID="CancelBtn" Enabled="True" PopupControlID="UpdatePanel" TargetControlID="EditBtn">
</asp:ModalPopupExtender>
</ItemTemplate>
<asp:Panel ID="UpdatePanel" runat="server" Style="display: none" BackColor="White" GroupingText="Update User">
<div>
<table><tr>
<td style="width:12px"></td>
<td><asp:Label ID="lblLegend" runat="server" Text=""></asp:Label></td></tr></table>
<br />
<table>
<tr>
<td style="width:12px"></td>
<td style="width: 76px">
<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
</td>
<td>
<asp:Label ID="lblStaffName" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td style="width:12px"> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
<asp:Label ID="lblUserId" runat="server" Text="User ID"></asp:Label>
</td>
<td>
<asp:Label ID="lblStaffUid" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td valign="top" style="width: 70px">
<asp:Label ID="lblSection" runat="server" Text="Section"></asp:Label>
</td>
<td>
<asp:ListBox ID="listSection" runat="server" SelectionMode="Multiple"
CssClass="standardManage" onMouseDown="GetCurrentListValues(this);"
onchange="FillListValues(this);">
</asp:ListBox>
</td>
<td valign="top">
<asp:RequiredFieldValidator ID="RequiredValidatorSection" runat="server"
ControlToValidate="listSection" Display="Dynamic" EnableClientScript="False"
EnableTheming="True" ErrorMessage="Required" ForeColor="Red"></asp:RequiredFieldValidator>
<asp:Label ID="lblValidatorSection" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
<asp:Label ID="lblFunction" runat="server" Text="Function"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlFunction" runat="server" CssClass="standardManage">
</asp:DropDownList>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
<asp:Label ID="lblStaffGender" runat="server" Text="Gender"></asp:Label>
</td>
<td>
<asp:Label ID="lblGender" runat="server"></asp:Label>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
<asp:Label ID="lblRole" runat="server" Text="Role"></asp:Label>
</td>
<td>
<asp:DropDownList ID="ddlRole" runat="server" CssClass="standardManage">
</asp:DropDownList>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 76px">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td style="width: 70px">
</td>
<td align="right">
<asp:Button ID="UpdateBtn" runat="server" Text="Update" OnClick="UpdateBtn_Click"/>
<asp:Button ID="CancelBtn" runat="server" Text="Cancel" />
</td>
<td>
</td>
</tr>
</table>
</div></asp:Panel>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

i found a very helpful link that eventually solves my problems! Please check it out!
http://www.aspdotnet-suresh.com/2011/03/how-to-show-modalpopup-to-edit-gridview.html