trying to dynamic asp:FileUpload , refresh trouble - c#

i need the users of my web system to do uploads ( up 4 ).
the upload itself its working , but i dont want all for box appering at start, so tried to hide the 2nd ,3rd and 4th upload boxes until the user need them .
here the aspx code part
<fieldset>
<div class="frm tam">
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload1" runat="server" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload2" runat="server" Visible="false" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload3" runat="server" Visible="false" /></div>
<div class="lin">
<asp:FileUpload ID="FileUpload4" runat="server" Visible="false" /></div>
<div class="lin">
<asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
<asp:Button ID="btnAdd" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
<asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>
</fieldset>
and the code behind to show and hide the boxes
protected void btnAdd_Click(object sender, EventArgs e)
{
if (FileUpload2.Visible == false)
{
FileUpload2.Visible = true;
}
else if (FileUpload3.Visible == false)
{
FileUpload3.Visible = true;
}
else if (FileUpload4.Visible == false)
{
FileUpload4.Visible = true;
}
}
protected void btnRem_Click(object sender, EventArgs e)
{
if (FileUpload4.Visible == true)
{
FileUpload4.Visible = false;
}
else if (FileUpload3.Visible == true)
{
FileUpload3.Visible = false;
}
else if (FileUpload2.Visible == true)
{
FileUpload2.Visible = false;
}
}
and when i click on Add File, the new box appear but the filepaths selected on the other boxes are cleared. Can i avoid this clear ?
*edit: i´m using net framework 4.0 .

The file get lost on postback. Alternatively, you can achieve that with JavaScript
<div id="div1">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div id="div2" style="display:none"> <!-- visibility:hidden -->
<asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div id="div3" style="display:none">
<asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div id="div4" style="display:none">
<asp:FileUpload ID="FileUpload4" runat="server" />
</div>
Then put each FileUpload control in each of the divs.
<input type="button" valud="Add" onclick="addControls()" />
Then use JavaScript to make them visible
function addControls()
{
document.getElementById('div2').style.display = 'inline-block';
//$('#div2').show(); <--- JQuery
}

The problem here is that uploading files works slightly differently to most input controls...
Rather than posting the file path value that is entered, it actually posts the file content so
on postback this value gets lost.
It seems to me like your best bet is to do something with javascript on the client to show/hide these upload controls. This would also be a better user experience as the user wouldn't have to wait for postback each time.
You could do this with jQuery...
http://jsfiddle.net/BAwfH/2/
<fieldset>
<div class="frm tam">
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload2" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload3" runat="server" />
</div>
<div class="lin">
<asp:FileUpload ID="FileUpload4" runat="server" />
</div>
<div>
<asp:Button ID="btnUpload" runat="server" Text="Upload"OnClick="btnUpload_Click" />
<asp:Button ID="btnAdd" class="add-button" runat="server" Text="ADD File" OnClick="btnAdd_Click" />
<asp:Button ID="btnRem" runat="server" Text="Remove File" OnClick="btnRem_Click" />
</div>
<script type="text/javascript">
$(document).ready(function(){
var lines = $('.lin');
lines.hide();
lines.filter(':first').show();
$('.add-button').click(function(){
lines.filter(':hidden:first').show();
if(lines.filter(':hidden').length == 0)
$(this).hide();
});
});

Related

I need to change the text of NextButton using RadWizard

I'm trying to change the text of next button in radwizard from the code behind, can some one please help me?
I have four steps and I want to be able to change the text of the button next when I'm in a specific step of the wizard, is this possible
<telerik:RadWizard ID="rwzPurchase" runat="server" Height="510px" Width="100%" DisplayProgressBar="false" OnNextButtonClick="rwzPurchase_NextButtonClick1" DisplayNavigationButtons="true" DisplayCancelButton="true">
<WizardSteps>
<%-- Confirmation --%>
<telerik:RadWizardStep Title="Confirmation">
<div class="row-fluid">
<div class="control-group-header margin-bottom-10">
<asp:label class="label-greentheme label label-inline-border" ID="LBTitle" runat="server">RP Specific Options</asp:label><br />
</div>
<br />
</div>
<div style="text-align:left">
<asp:Label ID="LBMessage" runat="server" Font-Size="Large" CssClass="message" />
</div>
</telerik:RadWizardStep>
<%-- Grower Information --%>
<telerik:RadWizardStep Title="Grower Information">
<uc1:GrowerInfo runat="server" ID="GrowerInfo" />
</telerik:RadWizardStep>
<%-- E-Signature --%>
<telerik:RadWizardStep Title="E-Signature">
<uc1:eSigControl runat="server" ID="eSigControl" />
</telerik:RadWizardStep>
<%-- Finish --%>
<telerik:RadWizardStep Title="Finish">
<div class="container">
<div class="row-fluid">
<div class="control-group-header margin-bottom-10">
<asp:Label class="label-greentheme label label-inline-border" ID="LBSuccessTitle" runat="server" /><br />
</div>
<br />
<asp:Label ID="LBSuccessText" runat="server" Font-Size="Large"/>
</div>
</div>
</telerik:RadWizardStep>
</WizardSteps>
</telerik:RadWizard>
c#
protected void rwzPurchase_NextButtonClick1(object sender, WizardEventArgs e)
{
if (rwzPurchase.ActiveStep.Title == "Grower Information")
{
//Here is where I want to change the text of button if we are in this specific step
RadButton button = (RadButton)sender;
button.Text = "test";
this.rwzPurchase.CommandArea.CommandElements.Add(button);
}
}

how to display picture after user selection

My problem is that I want to get the preview of the image after the user chooses one,
but unfortunately nothing is happening. I don't understand why.
Can anyone help me out?
Here is my aspx:
<div class="container-fluid">
<div class="row-fluid">
<div class="btn-toolbar">
<asp:Button runat="server" CssClass="btn btn-primary" ID="OK_btn" Text="OK" OnClick="OK_btn_Click" />
<asp:LinkButton PostBackUrl="ClientMembershipDetailList.aspx"
OnClientClick="return blockConfirm('Are you sure you want to cancel?', event, '')"
CausesValidation="false"
runat="server" CssClass="btn btn-primary" ID="Cancel_btn" Text="Cancel" />
</div>
</div>
<div class="well tab-primary ui-tabs">
<ul class="nav nav-tabs ui-tabs-nav">
<li class="active">Member Details</li>
<li>Dependants</li>
<li>Medical History</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<div class="span6">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">Client:</label>
<div class="controls with-tooltip">
<asp:HiddenField runat="server" ID="ID_txt" />
<asp:TextBox runat="server" CssClass="input-large" ID="ClientID_Txt" Enabled="false" />
</div>
</div>
<asp:ScriptManagerProx ID="ScriptManager1" runat="server" />
<div class="control-group">
<label class="control-label">Picture</label>
<div class="controls with-tooltip">
<asp:HiddenField runat="server" ID="Picture_Txt" />
<asp:Image runat="server" Width="100" ImageUrl="~/Images/Pictures/PictureNA.jpg"
Height="120" ID="Picture_Img" />
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
UploadingBackColor="SteelBlue" />
<%--<asp:FileUpload runat="server" ID="PictureFileUpload" />--%>
</div>
</div>
and this is the aspx.cs,
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
System.Threading.Thread.Sleep(5000);
if (AsyncFileUpload1.HasFile)
{
string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString();
AsyncFileUpload1.SaveAs(fileName);
}
}
Make sure your image is inside an Ajax UpdatePanel and then, in your UploadedComplete handle, set the image source to that uploaded image.
For that, you need to save your image in a public visible place in your website.
Example:
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload1.HasFile)
{
string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString();
AsyncFileUpload1.SaveAs(fileName);
Picture_Img.ImageUrl = "~/Images" + Guid.NewGuid().ToString();
}
}

Printing data upon saving

I am using asp.net(C#) web forms. I have complaints.aspx page which takes several inputs from users and then saves them upon clicking SAVE button. It's working perfectly but now I am stuck with one problem, I want to make a printout of the submitted record upon clicking the save button. It should be printed from the local printer but I couldn't find any solutions for it.
.aspx code:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="frmStaffMembers.aspx.cs" Inherits="frmStaffMembers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function () {
$("#btnUpdate").hide();
$("#btnDelete").hide();
$("#btnCancel").hide();
$("#lblSelectedID-Span").hide();
$("#txtSelectedID-Span").hide();
var showHide = $("#HiddenFieldShowHideButtons").val();
if (showHide == "True") {
$("#btnUpdate").show();
$("#btnDelete").show();
$("#btnCancel").show();
$("#lblSelectedID-Span").show();
$("#txtSelectedID-Span").show();
$("#buttonSearch").hide();
$("#Save-Span").hide();
$("#HiddenFieldShowHideButtons").val("False");
}
$("#btnUpdate").click(function () {
$("#ConfirmMsg").text("Are you sure to update this record?");
$("#Delete-Span").hide();
$("#lblSelectedID-Span").hide();
$("#txtSelectedID-Span").hide();
$("#Save-Span").show();
$("#buttonSearch").show();
$("#Update-Span").show();
$("#btnUpdate").hide();
$("#btnDelete").hide();
$("#btnCancel").hide();
$("#ModalConfirmAction").modal({ show: true })
});
$("#btnDelete").click(function () {
$("#ConfirmMsg").text("Are you sure to delete this record?");
$("#Update-Span").hide();
$("#lblSelectedID-Span").hide();
$("#txtSelectedID-Span").hide();
$("#Delete-Span").show();
$("#Save-Span").show();
$("#buttonSearch").show();
$("#btnDelete").hide();
$("#btnUpdate").hide();
$("#btnCancel").hide();
$("#ModalConfirmAction").modal({ show: true })
});
$("#btnCancel").click(function () {
$("#btnUpdate").hide();
$("#btnDelete").hide();
$("#btnCancel").hide();
$("#lblSelectedID-Span").hide();
$("#txtSelectedID-Span").hide();
$("#buttonSearch").show();
$("#Save-Span").show();
ClearTextBoxes();
});
});
function ClearTextBoxes() {
$("input[type=text]").each(function () {
$(this).val("");
});
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="widget">
<div class="widget-header">
<div class="title">
Staff Members
<span id="sectionDetails" class="mini-title" runat="server"> Enter/Edit record </span>
</div> <!-- widget title-->
</div> <!-- widget header -->
<div class="widget-body">
<div class="row-fluid">
<!-- cons start -->
<div class="shortcut-group">
<asp:HiddenField ID="HiddenFieldSetMessage" runat="server"
ClientIDMode="Static"/>
<asp:HiddenField ID="HiddenFieldShowMessage" runat="server"
ClientIDMode="Static"/>
<asp:HiddenField ID="HiddenFieldShowHideButtons" runat="server"
ClientIDMode="Static" />
<span id="lblSelectedID-Span"><label id="lblSelectedID" runat="server">Selected ID</label></span>
<span id="txtSelectedID-Span"><asp:TextBox ID="txtSelectedID" runat="server" ReadOnly="True"
CssClass="textField_width"></asp:TextBox></span>
<label>Member Name</label>
<asp:TextBox ID="txtMemberName" runat="server" ValidationGroup="GroupCompanies"
CssClass="textField_width"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtMemberName" ErrorMessage="Member Name is Required"
ForeColor="Red" ValidationGroup="grpValidationTextboxes">Member Name is Required
</asp:RequiredFieldValidator>
<br />
<label>Member CNIC</label>
<asp:TextBox ID="txtMemberCNIC" runat="server" CssClass="textField_width"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtMemberCNIC" ErrorMessage="Member CNIC is Required"
ForeColor="Red" ValidationGroup="grpValidationTextboxes">Member CNIC is Required
</asp:RequiredFieldValidator>
<br />
<label>ContactNo</label>
<asp:TextBox ID="txtContactNo" runat="server" CssClass="textField_width"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="txtContactNo" ErrorMessage="Contact No is Required"
ForeColor="Red" ValidationGroup="grpValidationTextboxes">Conatact No is Required
</asp:RequiredFieldValidator>
<br />
<label>Head's Designation</label>
<asp:DropDownList ID="ddlHeadDesignations" runat="server" width="220px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="ddlHeadDesignations" InitialValue="0" ErrorMessage="Selection is Required"
ForeColor="Red" ValidationGroup="grpValidationTextboxes">Selection is Required
</asp:RequiredFieldValidator>
<br />
<label>Is Morning?</label>
<asp:DropDownList ID="ddlMorningEvening" runat="server" width="220px">
<asp:ListItem Value="-1" Text="-Select-"></asp:ListItem>
<asp:ListItem Value="1" Text="Yes"></asp:ListItem>
<asp:ListItem Value="0" Text="No"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="ddlMorningEvening" InitialValue="-1" ErrorMessage="Selection is Required"
ForeColor="Red" ValidationGroup="grpValidationTextboxes">Selection is Required
</asp:RequiredFieldValidator>
<br />
<br/>
<span id="Save-Span">
<asp:Button ID="btnSave" CssClass="btn btn-success" runat="server" Text="Save"
onclick="btnSave_Click" ValidationGroup="grpValidationTextboxes" ClientIDMode="Static" />
</span>
<input type="button" id="btnUpdate" class="btn btn-success" value="Update"/>&nbsp
<input type="button" id="btnDelete" class="btn btn-danger" value="Delete"/>&nbsp
<input type="button" id="btnCancel" class="btn btn-success" value="Cancel" />
Search Records
</div> <!-- shourtcut group">
<!-- cons end -->
</div> <!-- row fluid -->
</div> <!-- widget body-->
</div> <!-- widget-->
<div class="clearfix"></div>
<!-- Modal -->
<div id="myModal" style="width:700px important;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Search Records</h3>
</div>
<div class="modal-body">
<p>Please enter staff member's name to search relevant record/Press search button with empty field to view all records</p>
<label>Staff Member</label>
<asp:TextBox ID="txtStaffMemberNamePopUp" runat="server"></asp:TextBox>
<asp:Button ID="btnSearchPopup" CssClass="btn btn-success pad_mar" runat="server" Text="Search"
onclick="btnSearchPopup_Click" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearchPopup" EventName = "Click"/>
<asp:AsyncPostBackTrigger ControlID = "gridviewStaffMembers" EventName="PageIndexChanging" />
<asp:AsyncPostBackTrigger ControlID="gridviewStaffMembers"
EventName="SelectedIndexChanging" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblMsgPopUp" runat="server"
Text="No records found for the specified criteria" Visible="False"
ForeColor="Red"></asp:Label>
<asp:GridView ID="gridviewStaffMembers" CellPadding="20" runat="server"
AutoGenerateSelectButton="True" Visible="False"
GridLines="None"
AllowPaging="True"
CssClass="mGrid"
PagerStyle-CssClass="pgr"
AlternatingRowStyle-CssClass="alt"
OnPageIndexChanging="gridviewStaffMembers_PageIndexChanging" >
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
<FooterStyle BorderWidth="0px" />
<PagerStyle CssClass="pgr"></PagerStyle>
<RowStyle BorderWidth="0px" CssClass="row" Wrap="True" />
<SelectedRowStyle CssClass="selected-row" ForeColor="White" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<asp:Button ID="btnClose" runat="server" Text="Close" CssClass="btn btn-success" data-dismiss="modal" aria-hidden="true" />
<asp:Button ID="btnEdit" CssClass="btn btn-success" runat="server" Text="Edit" onclick="btnEdit_Click"/>
</div>
</div>
<!-- this is confirmation modal-->
<div id="ModalConfirmAction" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="H1">Confirmation</h3>
</div>
<div class="modal-body">
<p id="ConfirmMsg"></p>
</div>
<div class="modal-footer">
<span id="Delete-Span">
<asp:Button ID="btnDeletePopUp" CssClass="btn btn-danger" runat="server"
Text="Delete" onclick="btnDeletePopUp_Click" />
</span>
<span id="Update-Span">
<asp:Button ID="btnUpdatePopUp" CssClass="btn btn-success" runat="server" Text="Update"
onclick="btnUpdatePopUp_Click" />
</span>
<asp:Button ID="btnClosePopup" runat="server" Text="Cancel"
CssClass="btn btn-success" onclick="btnClosePopup_Click"/>
</div>
</div>
</asp:Content>
.cs code:
protected void btnSave_Click(object sender, EventArgs e)
{
try
{
short HeadDesignationID = Convert.ToInt16(ddlHeadDesignations.SelectedValue);
short IsMorning = Convert.ToInt16(ddlMorningEvening.SelectedValue);
StaffMembersBizz StaffMembersBizz = new StaffMembersBizz(txtMemberName.Text, txtMemberCNIC.Text,
txtContactNo.Text, HeadDesignationID, IsMorning);
ManageStaffMembers mngStaffMembers = new ManageStaffMembers();
bool Result = mngStaffMembers.Insert(StaffMembersBizz);
if (Result == true)
{
HiddenFieldSetMessage.Value = "Saved";
HiddenFieldShowMessage.Value = "True";
Clear(txtMemberName, txtMemberCNIC, txtContactNo);
}
else
{
HiddenFieldSetMessage.Value = "RecordAlreadyExists";
HiddenFieldShowMessage.Value = "True";
}
}
catch (Exception)
{
HiddenFieldSetMessage.Value = "NotSaved";
HiddenFieldShowMessage.Value = "True";
}
}
I assume after you save, there is some sort of confirm page?
If so in your Save event, you could add the following code which will bring up the print prompt for the confirmation page automatically. You can't make the client print on your own because that is controlled on their end but you can make the print dialog appear.
Add this server side code to the end of you Save event:
ClientScript.RegisterStartupScript(this.GetType(), "FormLoading", "window.print();", true);
Make sure that page that is served up has the print data that you need and is formatted correctly. You can customize the css to apply a print only style as well.

Alertify.JS and ASP.NET: Call Javascript from Code-behind

I have a question.
I am now using the current version of Alertify.js found here. I wanted to integrate it with my ASP.NET application. When I click the Save button from my Modal Dialog, it proceeds to the code-behind without problems. I've tried "alert("Test");" inside the ScriptManager.RegisterClientScriptBlock and it does render.
Now when I try to use my custom function located in one of the files I've added, it seems the script does not respond, i.e. Alertify does not show.
Here is the JavaScript code from my custom JS file, my C# Code behind for that Save button, and the ASP.NET Page.
JS
function callFeedbackMessage(inputType, inputText) {
var inputFeedback = inputType;
e.preventDefault();
if (inputType == 'Error') {
alertify.error(inputText);
return false;
}
else if (inputType == 'Success') {
alertify.success(inputText);
return false;
}
else {
alertify.log(inputText, "", 10000);
return false;
}
}
C# Code Behind of lnkSave_Click
protected void lnkSave_Click(object sender, EventArgs e)
{
Category newCategory = new ProgrammersToolkitLibrary.BOM.Category();
bool isSuccess = true;
newCategory.CategoryName = txtCategoryName.Text;
newCategory.Description = txtDescription.Text;
isSuccess = CategoryController.CreateNewCategory(newCategory);
if (isSuccess == true)
{
grdCategoriesList.DataBind();
upCategoriesList.Update();
ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "alert", "callFeedbackMessage('Success', 'Okay');", true);
}
else
{
}
}
ASP.NET Page
<%# Page Title="" Language="C#" MasterPageFile="~/Layout/Layout.Master" AutoEventWireup="true" CodeBehind="Category_List.aspx.cs" Inherits="ProgrammersToolkit.Views.Maintenance.Categories.Category_List" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div style ="text-align:left;">
<h3>Article Categories</h3>
<div class="btn-group">
<button class="btn btn-default" data-toggle="modal" data-target="#AddCategoryModal"><span class="glyphicon glyphicon-plus"></span> Add Category</button>
<asp:LinkButton ID="LinkButton2" runat="server" CssClass="btn btn-default"><img src="../../../Layout/img/Icon_Excel.gif" /> Export to Excel</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-default"><img src="../../../Layout/img/Icon_Excel.gif" /> Import from Excel</asp:LinkButton>
</div>
</div>
<br /><br />
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class ="col-lg-6">
<div class="input-group">
<asp:TextBox ID="txtSearch" runat="server" CssClass="form-control"></asp:TextBox>
<span class="input-group-btn">
<asp:LinkButton ID="lnkSearch" runat="server" CssClass="btn btn-default">Search</asp:LinkButton>
<asp:LinkButton ID="lnkReset" runat="server" CssClass="btn btn-default">Reset</asp:LinkButton>
</span>
</div>
</div>
<div class ="col-lg-6"></div>
</div>
</div>
<div class="panel-body">
<asp:UpdatePanel ID="upCategoriesList" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="grdCategoriesList" runat="server" CssClass = "table table-hover table-responsive" Width="100%"
DataSourceID="odsCategoriesList" AllowPaging="true" PageSize="10" GridLines="None" BorderStyle="NotSet" BorderWidth="0px"
AutoGenerateColumns="false">
<PagerSettings FirstPageText="<< First" LastPageText="Last >>" NextPageText="Next >"
Position="Bottom" PreviousPageText="< Previous" />
<Columns>
<asp:TemplateField HeaderStyle-CssClass="input-group-addon" ItemStyle-CssClass="input-group-addon">
<ItemTemplate>
<asp:CheckBox ID="chkSelectItem" runat="server" />
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server" />
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Category Name" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<asp:LinkButton ID="lnkCategoryName" runat="server" OnCommand="lnkCategoryName_Command"
CommandArgument='<%# Eval("CategoryId") %>' CommandName='<%# Eval("CategoryName") %>'
Text='<%# Eval("CategoryName") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-HorizontalAlign="Left" />
</Columns>
<PagerStyle HorizontalAlign="Right" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:ObjectDataSource ID="odsCategoriesList" runat="server" EnablePaging="True" TypeName="ProgrammersToolkitLibrary.Controller.CategoryController"
SelectMethod="GetListOfCategories" SelectCountMethod="GetListOfCategoriesCount"></asp:ObjectDataSource>
</div>
<div class="modal fade" id="AddCategoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Add New Category</h4>
</div>
<div class="modal-body">
<table style="width:100%;text-align:left;">
<tr>
<td style = "width: 30%;"><label for="txtCategoryName">Category Name:</label></td>
<td>
<asp:TextBox ID="txtCategoryName" runat="server" CssClass="form-control"></asp:TextBox>
</td>
</tr>
<tr>
<td style = "width:30%; vertical-align:text-top;"><label for="txtDescription">Description:</label></td>
<td>
<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Rows="3" CssClass="form-control"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:LinkButton ID="lnkSave" runat="server" CssClass="btn btn-primary" OnClick="lnkSave_Click" ClientIDMode="Static">Save</asp:LinkButton>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</asp:Content>
Thank you.
Ju-chan

Passing Control's Value to Modal Popup

Just would like know how to pass textbox value to a modal popup after clicking a button using ModalPopUpExtender in ASP.NET, I've tried these codes but seems that I have no luck :(
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Button1.Attributes.Add("onclick", "showModalPopup(); return false;");
}
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick='showModalPopup(); return false;' />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" OkControlID="btnOkay" BackgroundCssClass="ModalPopupBG">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" Style="display: none" runat="server">
<div class="HellowWorldPopup">
<div class="PopupHeader" id="PopupHeader">
Header</div>
<div class="PopupBody">
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
<div class="Controls">
<input id="btnOkay" type="button" value="Done" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
</div>
</asp:Panel>
javascript
function showModalPopup() {
//show the ModalPopupExtender
var value;
value = document.getElementById("TextBox1").value;
$get("<%=Label1.ClientID %>").value = value;
$find("<%=ModalPopupExtender1.ClientID %>").show();
}
I wonder what I miss out :(, Thanks and I hope someone could help me :)
use
value = document.getElementById('<%=TextBox1.ClientID %>').value;
instead of
value = document.getElementById("TextBox1").value;

Categories