What is analog in C#?
js:
$('#MyDiv').show();
var d = document.getElementById('MyDiv');
d.innerHTML = someLargeHtmlCode;
html:
<div id="MyDiv" runat="server" style="display: none;">
</div>
Can I use ?
Some like that:
html:
<asp:Panel id="MyDiv" runat="server" style="display: none;">
</asp:Panel>
But I don't know what C# code must be.
<asp:Panel id="MyDiv" runat="server" Visible="false">
<asp:Literal ID="literal" runat="server" />
</asp:Panel>
and in your code behind:
protected void Page_Load(object sender, EventArgs e)
{
MyDiv.Visible = true;
literal.Text = "Hello";
}
Related
Client side:
<asp:Panel ID="pnlDynamic" runat="server" Style="display: none">
<div class="loginwrapper">
<div class="lgp">
<h2>
<asp:Label runat="server" ID="lblDynamicInfo"></asp:Label></h2>
<p>
<input type="button" id="btnOk" runat="server" value="Ok" />
</p>
</div>
</div>
</asp:Panel>
Server side: aspx page
protected void btnSave_Click(object sender, EventArgs e)
{
lblDynamicInfo.Text = "Fee note has been saved sucessfully. ";
mdldynamic.Show();
}
I am trying to have a validator set up to only fire on the item(car in this instance) that the user wants to add to his or her cart. I am using ListView to display the cars I have for sale. When the user selects the car they want and enters in the quantity, the validators fire for every entry. How would I fix this?
Thank you!!
Cars.apx
<asp:Content ID="Content2" ContentPlaceHolderID="div2" runat="server">
<div class="row">
<asp:ListView ID="ListView1" runat="server" class="custom-class" DataSourceID="SqlDataSource1" OnItemCommand="ListView1_ItemCommand" DataKeyNames="CarID" OnSelectedIndexChanged="ListView1_SelectedIndexChanged">
<ItemTemplate>
<div class="col-sm-4">
<div class="custom_class">
<a href='/Shop/Order/<%# Eval("CarID") %>'>
<img src='/Images/<%# Eval("ImageCar") %>'
alt='<%# Eval("Name") %>' /></a>
<div class="caption">
<h3>
<%# Eval("Name") %>
</h3>
<p>
<b>Price: <%# Eval("CarPrice", "{0:c}") %></b>
<br>
<br>
<%# Eval("Long_Description") %>
</p>
</div>
<div class="row">
<div class="form-group">
<label class="col-sm-1">Quantity:</label>
</div>
</div>
<div class="col-sm-8">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" CssClass="text-danger"
runat="server" ControlToValidate="txtQuantity1" Display="Dynamic"
ErrorMessage="Quantity is a required field."></asp:RequiredFieldValidator>
<asp:RangeValidator ID="RangeValidator1" runat="server" CssClass="text-danger"
ControlToValidate="txtQuantity1" Display="Dynamic"
ErrorMessage="Quantity must range from 0 to 2."
MaximumValue="2" MinimumValue="0" Type="Integer"></asp:RangeValidator>
</div>
<div class="col-sm-3">
<asp:TextBox ID="txtQuantity1" runat="server"
CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="col-sm-12">
<asp:Button ID="btnAdd" runat="server" Text="Add to Cart"
OnClick="btnAdd_Click" CssClass="btn" />
<asp:Button ID="btnCart" runat="server" Text="Go to Cart"
PostBackUrl="~/BuyCars.aspx" CausesValidation="False" CssClass="btn" />
</div>
</div>
</div>
<div>
<asp:Label ID="lblMessage" runat="server" EnableViewState="false"
CssClass="text-info col-sm-12"></asp:Label>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
<div class="col-sm-3">
<asp:TextBox ID="txtQuantity1" runat="server"
CssClass="form-control"></asp:TextBox>
</div>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT [CarID], [Name], [Long_Description], [CarPrice], [ImageCar] FROM [Table] ORDER BY [Name]" OnSelecting="SqlDataSource1_Selecting"></asp:SqlDataSource>
</asp:Content>
Cars.apsc.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace CarSales_REAL
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
if (!IsPostBack)
{
ListView1.DataBind();
}
}
private Product GetSelectedProduct(object id)
{
DataView productsTable = (DataView)
SqlDataSource1.Select(DataSourceSelectArguments.Empty);
//productsTable.RowFilter = "CarID = '" + ListView1.SelectedValue + "'";
DataRowView row = productsTable[1];
Product p = new Product();
p.CarID = row["CarID"].ToString();
p.Name = row["Name"].ToString();
//p.Short_Description = row["Short_Description"].ToString();
p.Long_description = row["long_Description"].ToString();
p.CarPrice = (decimal)row["CarPrice"];
//p.ImageFile = row["ImageFile"].ToString();
return p;
}
protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e)
{
}
protected void btnAdd_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
var product = GetSelectedProduct(ListView1.SelectedValue);
CartItemList cart = CartItemList.GetCart();
CartItem cartItem = cart[product.CarID];
if (cartItem == null)
{
cart.AddItem(product,
Convert.ToInt32(txtQuantity1.Text));
}
else
{
cartItem.AddQuantity(Convert.ToInt32(txtQuantity1.Text));
}
Response.Redirect("BuyCars.aspx");
}
}
protected void btnCart_Click(object sender, EventArgs e)
{
}
protected void ListView1_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
{
}
}
}
The trick is to create a unique ValidationGroup per Item. You can use The ClientID of the ListView for that along with the DataItemIndex. See the snippet for a siple demo.
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"
ValidationGroup='<%# ListView1.ClientID + "_" + Container.DataItemIndex %>'></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Button"
ValidationGroup='<%# ListView1.ClientID + "_" + Container.DataItemIndex %>' />
</ItemTemplate>
</asp:ListView>
When i click on a Button i must show a modal popup
ASPX code:
<section>
<asp:Button ID="btnShowPopup" runat="server" Text="EditContextMenu" Visible="true" OnClick="btnShowPopup_Click" />
<ajax:ModalPopupExtender ID="ModalPopupContextInfo" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopupContextInfo"
CancelControlID="imgClose" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlpopupContextInfo" runat="server" BackColor="White" Height="560px" Width="400px" Style="display: none" >
<div class="contextMenu_edit" >
<div class="context_menu">
<p>Port</p>
<asp:TextBox ID="txtCMEditPort" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>
<div class="clear"></div>
<p>ProformaETA</p>
<asp:TextBox ID="txtCMEditProformaETA" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>
<asp:ImageButton ID="imgbtnCMEditProformaETA" runat="server" ImageUrl="~/image_repository/calendarIcon.jpg" />
<ajax:CalendarExtender ID="ajaxcalProfrmaETA" runat="server" TargetControlID="txtCMEditProformaETA" PopupButtonID="imgbtnCMEditProformaETA" Format="dd-MMM-yyyy"></ajax:CalendarExtender>
<div class="clear"></div>
<p>ProformaETD</p>
<asp:TextBox ID="txtCMEditProformaETD" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>
<asp:ImageButton ID="imgbtnCMEditProformaETD" runat="server" ImageUrl="~/image_repository/calendarIcon.jpg" />
<ajax:CalendarExtender ID="ajaxcalProfrmaETD" runat="server" TargetControlID="txtCMEditProformaETD" PopupButtonID="imgbtnCMEditProformaETD" Format="dd-MMM-yyyy"></ajax:CalendarExtender>
</div>
</div>
</asp:Panel>
</section>
Code Behind :
protected void btnShowPopup_Click(object sender, EventArgs e)
{
ModalPopupContextInfo.Show();
}
This is Not working.
You've forgotten to define imgClose control, which you use as CancelControlID in ModalPopupExtender.
<ajax:ModalPopupExtender ID="ModalPopupContextInfo" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopupContextInfo"
CancelControlID="imgClose" BackgroundCssClass="modalBackground">
That's why your extender does not work.
Also you need to set active index for Model Popup Extender. Mostly it
ASPX Page :
"asp:button id="Button1" runat="server" text="DOWNTIME" cssclass="FormButton" width="20%"
"ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" TargetControlID="Button1" CancelControlID="btnCancel1" PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader"
Then
"asp:multiview id="MultiViewExpanse" runat="server""
asp:View ID="ViewInput" runat="server"
/asp:View
/asp:multiview
C#
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (!IsPostBack)
{
ModalPopupContextInfo.ActiveViewIndex = 0;
}
}
}
It works...fine...If still want some..help.... Ping me...
On my MasterPage I have 2 update panels which are surrounded with Panels. Two of them contain 'Details View' controls and some buttons.
On the other hand, I have one UpdatePanel which contains image buttons and link buttons.
The idea is that I'm fetching from the database the messages ( 2 kinds), showing them on the Page. When the user clicks on a button (LinkButton or ImageButton), he or she sees a 'Popup Control'. On the popup control, he or she can see the message details and if needed, cancel them or approve.
Here is where I am stuck. If I remove the ImageButtons from the UpdatePanels, I won't be able to refresh them without a full postback.
Should I have 'popup extensions' in the UpdatePanel with the ImageButtons, but then when I click on the button from 'popup panel' - it disappears ( there is no full postback, it just disappears) - it should just change the DetailsView page.
How do I make it work?
Thanks in advance !
(I need this solution because I want to use a timer to refresh LinkButtons )
here is my code behind :
protected void Page_Load(object sender, EventArgs e)
{
try
{
//here im pulling data from database and binding it with 'details view' controls, its not big deal so i think i don't have to show it?
wyswietl_powiadomienia_o_wydarzeniach();
wyswietl_ilosc_zaproszen_do_przyjaciol();
wyswietl_ilosc_nieodczytanych_wiadomosci();
}
catch (Exception)
{
}
}
protected void ButtonWczesniej_Click(object sender, EventArgs e)
{
DetailsViewEventsRequests.PageIndex = DetailsViewEventsRequests.PageIndex - 1;
ButtonDalej.Enabled = true;
wyswietl_powiadomienia_o_wydarzeniach();
}
protected void ButtonDalej_Click(object sender, EventArgs e)
{
//
DetailsViewEventsRequests.PageIndex = DetailsViewEventsRequests.PageIndex + 1;
ButtonWczesniej.Enabled = true;
wyswietl_powiadomienia_o_wydarzeniach();
}
protected void ButtonInvLeft_Click(object sender, EventArgs e)
{
DetailsViewIfFriends.PageIndex = DetailsViewIfFriends.PageIndex - 1;
}
protected void ButtonInvRight_Click(object sender, EventArgs e)
{
DetailsViewIfFriends.PageIndex = DetailsViewIfFriends.PageIndex + 1;
}
And my aspx: (only one updatepanel with detail's view because 2nd one is very simillar)
<div id="NotifyAreaWhite">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="NotifyAreaDiv">
<div id="NotifyDivMail">
<div id="NotifyLeftMSG"><asp:ImageButton ID="ImageButtonNotifyMsg" runat="server"
ImageUrl="~/images/msg.png" PostBackUrl="~/wiadomosci.aspx"
ToolTip="Wyslij wiadomosc" /></div>
<div class="NotifyRight"> <asp:LinkButton ID="LabelNotifyMsgNo" runat="server" Text="0" Font-Size="Large" PostBackUrl="~/wiadomosci.aspx"/></div>
</div>
<div class="NotifyDiv">
<div id="NotifyLeftFrend" class="NotifyLeft"> <asp:ImageButton ID="ImageButtonNotifyFrends" runat="server"
ImageUrl="~/images/friends.png"
ToolTip="Zaproszenia od znajomych." /></div>
<div id="NotifyRightFrend" class="NotifyRight"><asp:LinkButton ID="LabelNotifyFrendsNo" runat="server" Text="0" Font-Size="Large"/></div>
</div>
<div class="NotifyDiv">
<div id="NotifyLeftWyd" class="NotifyLeft"> <asp:ImageButton ID="ImageButtonWydarzenia" runat="server" ImageUrl="~/images/event.png" ToolTip="Zaproszenia do wydarzen." /></div>
<div id="NotifyRightWyd" class="NotifyRight"> <asp:LinkButton ID="LabelNotifyEventsNo" runat="server" Text="0" Font-Size="Large"/></div>
</div>
</div>
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtender"
runat="server" Enabled="true" OkControlID="ButtonZamknijOkno" CancelControlID="ButtonZamknijOkno"
TargetControlID="ImageButtonWydarzenia" PopupControlID="PanelZaproszeniaEventy"
BackgroundCssClass="NotifyPageTloClass"/> //extender showing Panel
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonZamknijOkno" CancelControlID="ButtonZamknijOkno"
TargetControlID="LabelNotifyEventsNo" PopupControlID="PanelZaproszeniaEventy"
BackgroundCssClass="NotifyPageTloClass"/>
<asp:ModalPopupExtender ID="PanelProsbyOznajomosc_ModalPopupExtender"
runat="server" Enabled="true" OkControlID="ButtonFrendCloseNotifier" CancelControlID="ButtonFrendCloseNotifier"
TargetControlID="ImageButtonNotifyFrends" PopupControlID="PanelProsbyOznajomosc"
BackgroundCssClass="NotifyPageTloClass"/>
<asp:ModalPopupExtender ID="PanelProsbyOznajomosc_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonFrendCloseNotifier" CancelControlID="ButtonFrendCloseNotifier"
TargetControlID="LabelNotifyFrendsNo" PopupControlID="PanelProsbyOznajomosc"
BackgroundCssClass="NotifyPageTloClass"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:Panel ID="PanelZaproszeniaEventy" runat="server" Width="318px" CssClass="NotifyWydTlo" >
<asp:UpdatePanel ID="UpdatePanelZaproszeniaEventy" runat="server" RenderMode="Block">
<ContentTemplate>
<asp:DetailsView ID="DetailsViewEventsRequests" runat="server" DataKeyNames="Charakterystyka" AutoGenerateRows="False" Height="17px" Width="313px" HorizontalAlign="Center" onitemcreated="DetailsViewEventsRequests_ItemCreated">
<Fields>
<asp:BoundField DataField="UserName" HeaderText="Zalozyciel" SortExpression="Nazwisko" />
<asp:BoundField DataField="Miasto" HeaderText="Gdzie?" SortExpression="Miasto" />
<asp:BoundField DataField="Data_ZalozeniaWydarzenia" HeaderText="Data wyslania" SortExpression="Miasto" />
</Fields>
<FooterTemplate>
</FooterTemplate>
<HeaderTemplate>
<div>
<div style="float:left;">
<asp:Label ID="LabelNazwaWydarzenia" runat="server"
Text='<%# Eval("Nazwa_Wydarzenia") %>'></asp:Label>
</div>
<div style="float:right; margin-left:5px;">
<asp:Button ID="ButtonZobacz" runat="server" CssClass="myButton" Text="Zobacz Wydarzenie" Font-Size="X-Small" Width="150px" ClientIDMode="AutoID" OnClick="ButtonZobacz_click" UseSubmitBehavior="True"/>
</div>
</div>
</HeaderTemplate>
<EmptyDataTemplate>
<table id="Table1" runat="server" style="border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px; color:#FF5041; margin-left:auto; margin-right:auto;">
<tr>
<td>Nie masz zadnych zaproszen.</td>
</tr>
</table>
</EmptyDataTemplate>
</asp:DetailsView>
<table style="margin-left:auto; margin-right:auto;">
<tr>
<td>
<asp:Button ID="ButtonWczesniej" Width="69px" Height="41px" runat="server" Text="<<" OnClick="ButtonWczesniej_Click" CssClass="myButton" /></td> //button previous msg
<td>
<asp:Button ID="ButtonDalej" Width="69px" Height="41px" runat="server" Text=">>" ///button next msg
OnClick="ButtonDalej_Click" CssClass="myButton"/></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<div style="margin-left:auto; margin-right:auto; width: 112px;">
<asp:Button CssClass="myButton" ID="ButtonZamknijOkno" Width="100%" //button closing popup
Height="41px" runat="server" Text="ZAMKNIJ"/>
</div>
</asp:Panel>
I hope i described it well. Sorry For my weak english and some Polish words in code :)
As i should do at the begining i made this example on empty page and try something else.. mode="Conditional" did the trick.
I should give that code before, not that long one :)
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HyperLink ID="HyperLinkPanelOn" runat="server">click here to show popup</asp:HyperLink>
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonClose" CancelControlID="ButtonClose"
TargetControlID="HyperLinkPanelOn" PopupControlID="Panel1" BackgroundCssClass="NotifyPageTloClass" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="Panel1" runat="server">
<asp:UpdatePanel ID="UpdatePanelPopUp" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="postback" />
<asp:Button runat="server" Text="postback" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="ButtonClose" runat="server" Text="Zamknij" />
</asp:Panel>
So simple.. I thought it's something bigger :/
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;