There is a jQuery Dialog with a GridView inside it in my aspx page. also have a button as Save on jQuery Dialog. I need to get values in GridView after click on this button in C#. I have tried as below. But not worked. I changed value in TextBox and click Save button. But it is not gave me edited value. nothing returned.
ASPX Page
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
/* Java scripts and style sheets are here */
<script type="text/javascript">
function showDialog() {
$('#dialogDiv').dialog('open');
}
$(document).ready(function () {
$('#dialogDiv').dialog({
autoOpen: false,
resizable: true,
width: 300,
height: 'auto',
buttons: {
"Save": function () {
$('#' + '<%= btnSaveType.ClientID %>').trigger("click");
}
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div id="dialogDiv" title="Type" style="overflow: hidden">
<div id="TypeDiv" class="divTable">
<div class="divRow">
<div class="divColumn">
<div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="open" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="Type_GV" runat="server" ShowFooter="True" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="Type">
<ItemTemplate>
<asp:TextBox ID="txtType" runat="server" Text='<%# Bind("Type") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="open" runat="server" Text="Open dialog" OnClick="open_Clicked" OnClientClick="showDialog()" />
<br />
<p>
<asp:Button ID="btnSaveType" runat="server" OnClick="btnSaveType_Clicked" Style="visibility: hidden;
display: none;" />
</p>
</asp:Content>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
}
protected void open_Clicked(object sender, EventArgs e)
{
VehicleType vTypeObject = new VehicleType();
Type_GV.DataSource = vTypeObject.GetTypeList();
Type_GV.DataBind();
}
protected void btnSaveType_Clicked(object sender, EventArgs e)
{
foreach (GridViewRow gvr in Type_GV.Rows)
{
TextBox type = (TextBox)gvr.FindControl("txtType");
Debug.WriteLine("type : " + type.Text);
// when debug, print as type :
// nothing print for type.Text
}
}
}
public class VehicleType
{
public string Type { get; set; }
public List<VehicleType> GetTypeList()
{
List<VehicleType> list = new List<VehicleType>()
{
new VehicleType{Type="Type1"}
};
return list;
}
}
How can i solve this ?
Related
I have a Gridview that has a hide/show panel. Inside the Panel there is a dropdown and a button. On button press I need the selected value of the dropdown, but I keep getting the first item, no matted what is selected.
I have been investigating the issue and it is to do with the panel control. If I place the dropdown outside the panel, everything works as intended. But dropdown only passes the first value when inside the panel.
Here is my code:
ASP Code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="DD.aspx.cs" Inherits="DD" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title></title>
<script type="text/javascript">
$(document).on("click", '[src*=plus]', function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$(document).on("click", '[src*=minus]', function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
})
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT * FROM [Requests]"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:constr %>" SelectCommand="SELECT [Name] FROM [Staff]"></asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RequestID" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="RequestID" HeaderText="RequestID" InsertVisible="False" ReadOnly="True" SortExpression="RequestID" />
<asp:TemplateField>
<ItemTemplate>
<img runat="server" style="cursor: pointer" src="images/plus.png" />
<asp:UpdatePanel ID="pnlOrders" runat="server" Style="display: none" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource2" DataTextField="Name" DataValueField="Name" AutoPostBack="true">
</asp:DropDownList>
<asp:Button runat="server" ID="test" OnClick="test_Click" />
</ContentTemplate> </asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
C# Code
protected void test_Click(object sender, EventArgs e)
{
Button btn = (Button)sender;
GridViewRow gvr = (GridViewRow)btn.NamingContainer;
DropDownList referalDD = gvr.FindControl("DD1") as DropDownList;
string www = referalDD.SelectedItem.Text;
string qqq = referalDD.SelectedItem.Value;
}
Can anyone help me to solve this issue
Ok so I have found a work around / solution. Thanks to Niko for the placeholder suggestion. I got rid of this code:
<img runat="server" style="cursor: pointer" src="images/plus.png" />
and the related Jquery
$(document).on("click", '[src*=plus]', function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "images/minus.png");
});
$(document).on("click", '[src*=minus]', function () {
$(this).attr("src", "images/plus.png");
$(this).closest("tr").next().remove();
})
Added a placeholder around the updatepanel and a Image button
<asp:ImageButton runat="server" ID="ShowHide" ImageUrl="~/images/plus.png" OnClick="ShowHide_Click" />
<asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible="false">
And this code for the button click event.
protected void ShowHide_Click(object sender, EventArgs e)
{
ImageButton btn = (ImageButton)sender;
GridViewRow gvr = (GridViewRow)btn.NamingContainer;
PlaceHolder ph = gvr.FindControl("PlaceHolder1") as PlaceHolder;
if (btn.ImageUrl.ToString() == "~/images/plus.png")
{
ph.Visible = true;
btn.ImageUrl = "~/images/minus.png";
}
else
{
ph.Visible = false;
btn.ImageUrl = "~/images/plus.png";
}
}
Note: After further testing the whole issue was to do with UpdatePanel having this code Style="display: none" As soon as I removed this, everything worked. But I added the placeholder for by show/Hide feature.
At the moment i have a link button that when it is clicked it will download a file. Is it possible to have an onclick pop up where the user can select if he wants to download or delete the file?
P.s New to asp.net and C#
<asp:GridView ID="FileTableView" CssClass="datagrid" HeaderStyle-CssClass="datagridHeader" RowStyle-CssClass="datagridRows" runat="server" AutoGenerateColumns="False" DataKeyNames="fileid, filename">
<Columns>
<asp:TemplateField HeaderText="Master Folder">
<ItemTemplate>
<asp:LinkButton ID="FileLinkButton" OnClick="DownloadFile" runat="server" Text='<%# Eval("filename") %>' FileID='<%# Eval("fileid") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You could use Bootstrap to display the modal popup, all you have to do is add these three references to your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
Complete solution can be found below:
Code behind:
public class MyFile
{
public int fileid { get; set; }
public string filename { get; set; }
}
public partial class PopupInGridView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
var f1 = new MyFile { fileid = 1, filename = "File 1" };
var f2 = new MyFile { fileid = 2, filename = "File 2" };
var files = new List<MyFile> { f1, f2 };
FileTableView.DataSource = files;
FileTableView.DataBind();
}
}
protected void File_Command(object sender, CommandEventArgs e)
{
string command = e.CommandName;
string fileId = Session["fileid"] as string;
switch (command)
{
case "ShowPopup":
Session["fileid"] = e.CommandArgument;
ScriptManager.RegisterStartupScript(this, this.GetType(), "myModal", "showPopup();", true);
break;
case "Delete":
//Your delete logic...
break;
case "Download":
//Your download logic...
break;
}
}
}
.ASPX:
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
function showPopup() {
$('#myModal').modal('show');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView
ID="FileTableView"
CssClass="datagrid"
HeaderStyle-CssClass="datagridHeader"
RowStyle-CssClass="datagridRows"
runat="server"
AutoGenerateColumns="False"
DataKeyNames="fileid, filename">
<Columns>
<asp:TemplateField HeaderText="Master Folder">
<ItemTemplate>
<asp:LinkButton ID="lnkChoice" CommandName="ShowPopup" OnCommand="File_Command" CommandArgument='<%# Eval("fileid") %>' runat="server" Text='<%# Eval("filename") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Delete or download?</h4>
</div>
<div class="modal-body">
<asp:Button ID="btnDelete" CommandName="Delete" CommandArgument="" runat="server" Text="Delete" OnCommand="File_Command" />
<asp:Button ID="btnDownload" CommandName="Download" CommandArgument="" runat="server" Text="Download" OnCommand="File_Command" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</body>
Inside an aspx file I have Grid view under asp:panels under an Update Panel
ASPX
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<asp:Panel ID="PnlTraveler" runat="server" Visible="false">
<asp:GridView ID="Gridview1" runat="server" ...>
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<table border="0" style="width: 100%">
<asp:Panel ID="pnlVisualAst" runat="server" Visible="false">
<tr>
<td style="text-indent: 50px; width: 25%">
<asp:Label ID="lblVisAst" runat="server" Text="Visual Assitance"></asp:Label>
</td>
<td>
<input id="chkBoxVisAst" type="checkbox" class="checkbox" enableviewstate="true" />
</td>
<img alt="" src="Images/Ram_Rebel_Reveal-354-331x220.jpg"/ class="overlay_div" style="display:none">
</tr>
</asp:Panel>
</table>
</ItemTemplate>
<asp:TemplateField
</Columns>
</asp:Gridview>
</asp:Panel>
</asp:UpdatePanel>
</asp:Content>
It works if I code my JQuery like the following way
JQUERY
<script type="text/javascript">
$(document).on('ready', function ()
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function ()
{
$('.checkbox').change('click', function ()
{
$('.overlay_div').dialog
({
title: "my jquery popup",
width: 430,
height: 200,
modal: true,
button:
{
Close:
function () {
$(this).dialog('Close');
}
}
});
});
});
});
If I declare my Check boxes under the Gridview(GridView1) with a CSS class = 'checkbox', then on that change event of the particular class the Jquery generates all the events associated with that checkbox class. If I wanna show only one Pop Up window with the change event it shows 4 checkboxes because the Gridview1 is supposed to show 4 checkboxes with same CSS class='checkbox'
How can I detect the event generated from each dynamic checkbox inside that gridview without using CSS class but only with check box id (chkBoxVisAst)?
If I use this peace of code
$('#<%=GridView1.ClientID%>').find('input:checkbox[id$="chkBoxVisAst"]').click(function ()
this portion of code I can actually get any controls id from inside the Gridview
I'm trying to update controls outisde the update panel with the ref. of below link . but its not working. i want to know what i'm missing.in my application can't use these labels inside the update panel.
http://msdn.microsoft.com/en-us/library/bb301423(v=vs.110).aspx
HTML
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Updatepaneltest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(PageLoadingHandler);
function PageLoadingHandler(sender, args) {
var dataItems = args.get_dataItems();
if ($get('Label1') !== null)
$get('Label1').innerHTML = dataItems['Label1'];
if ($get('Label2') !== null)
$get('Label2').innerHTML = dataItems['Label2'];
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
UpdatePanel content.
<asp:Button ID="Button1" Text="Submit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
</div>
</asp:Content>
code behind
protected void Page_Load(object sender, EventArgs e)
{
// ScriptManager ScriptManager1 = ScriptManager.GetCurrent(this.Page);
if (ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack)
{
ScriptManager1.RegisterDataItem(Label1, DateTime.Now.ToString());
ScriptManager1.RegisterDataItem(Label2, DateTime.Now.Year.ToString());
}
}
Control updates inside of updatepanel,
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" Text="Submit" runat="server" />
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
Control updates outside of updatepanel,
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode=Conditional>
<ContentTemplate>
<asp:Button ID="Button1" Text="Submit" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Label ID="Label1" Text="hiii" runat="server" /> <br />
<asp:Label ID="Label2" runat="server" />
Later, write below lines in client side.
var pageInstance = Sys.WebForms.PageRequestManager.getInstance();
pageInstance.add_pageLoaded(UpdateLabelHandler);
function UpdateLabelHandler(sender, args)
{
var ControldataItems = args.get_dataItems();
if ($get('Label1') !== null)
$get('Label1').innerHTML = ControldataItems ['Label1'];
if ($get('Label2') !== null)
$get('Label2').innerHTML = ControldataItems ['Label2'];
}
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterDataItem(Label1, DateTime.Now.ToString());
ScriptManager1.RegisterDataItem(Label2, DateTime.Now.Year.ToString());
}
Hope this may help you.
I want my ajaxToolkit:TabContainer to have a tabpanel that allows the user to add another tab. I only want it to postback when they have clicked the "+" tabpanel and no other.
I can't seem to stop the event bubbling in the Javascript:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function checkTab(sender, e) {
if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+") {
cancelBubble(e);
}
else {
if (!confirm('Are you sure?')) {
cancelBubble(e);
}
}
}
function cancelBubble(e) {
if (e) {
e.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" OnActiveTabChanged="MyTabContainer_OnActiveTabChanged"
AutoPostBack="true" OnClientActiveTabChanged="checkTab">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
protected void MyTabContainer_OnActiveTabChanged(object sender, EventArgs e)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "New Tab";
MyTabContainer.Tabs.Add(tp);
}
Thanks,
Alex
You can use return false; in JavaScript to stop a PostBack. So I think all you need is this:
function checkTab(sender, e)
{
if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+")
{
return false;
}
else
{
return confirm('Are you sure?');
}
}
Add script below to your project and add reference on at at very bottom of page:
Sys.Extended.UI.TabPanel.prototype.raiseClick = function (eventArgs) {
var eh = this.get_events().getHandler("click");
if (eh) {
eh(this, eventArgs);
}
};
Sys.Extended.UI.TabPanel.prototype._header_onclick = function (e) {
e.preventDefault();
var eventArgs = new Sys.CancelEventArgs();
this.raiseClick(eventArgs);
if (eventArgs.get_cancel() === true)
return;
this.get_owner().set_activeTab(this);
this._setFocus(this);
};
Now we add capability to cancel click on particular tab on client. The sample of usage:
<script type="text/javascript">
function AddTabOnClientClick(sender, args) {
args.set_cancel(!confirm("Are you sure?"));
}
</script>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" AutoPostBack="true"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" OnClientClick="AddTabOnClientClick">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script src="Scripts/MyAjaxToolkitExtensions.js" type="text/javascript"></script>
Thanks to jadarnel27, this is the final solution I went for:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
<script type="text/javascript">
function addTab() {
if (confirm('Are you sure?')) {
document.getElementById('<%=AddTabButton.ClientID %>').click();
}
}
</script>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<asp:Button ID = "AddTabButton" runat="server" OnClick="AddTabButton_OnClick" CssClass="DisplayNone" />
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true" OnClientClick="addTab">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
protected void AddTabButton_OnClick(object sender, EventArgs e)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "New Tab";
MyTabContainer.Tabs.Add(tp);
}