I am working with ASP.NET. I am using a repeater to display images, and I also am using a check box for each image.
How can I select individual images and update their values as per image id?
My code is:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
You could use javascript to implement this, something like this should do the trick:
Without jQuery
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
onclick="imageClickHandler(this,event);"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
function imageClickHandler(s,e){
//do something with the current image that is being clicked on.
//The parameter 's' is a reference to the caller of this method and the 'e' contains
//event data
}
With jQuery
If your using jQuery, you could also try something like this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
class="handled"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
<script type="text/javascript" src="jquery-1.7.3"></script>
$(function(){
$("img.handled").click(function(){
//alerts the id of the image thats being clicked on.
alert($(this).attr("id"));
});
});
Related
I currently create a wizard and its steps programmatically and I am trying to show the default side bar with its links to each step on the top instead of the side. Is this possible?
Wizard wiz = new Wizard();
//Do stuff with wizard steps
It's possible with CSS
ASP.NET declarative code
<asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True">
<%-- LAYOUT --%>
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div id="stepIndicator">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
<%-- HEADER --%>
<HeaderTemplate>
<h1 class="text-center">My Form</h1>
<%-- TODO: Add your header elements here --%>
</HeaderTemplate>
<%-- SIDEBAR --%>
<SideBarTemplate>
<ul id="header">
<asp:ListView ID="SideBarList" runat="server">
<ItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" /></li>
</ItemTemplate>
<SelectedItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li>
</SelectedItemTemplate>
</asp:ListView>
</ul>
</SideBarTemplate>
<%-- Wizard Steps --%>
<WizardSteps>
<asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1">
<ContentTemplate>
<%-- TODO: Add your wizard step elements here --%>
</ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
</WizardSteps>
</asp:Wizard>
CSS Stylesheet
#stepIndicator {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#stepIndicator li {
display: inline-block;
}
#stepIndicator li a {
text-decoration: none;
padding: 10px;
display: block;
}
But how???:
On the SideBar template, create a list element
Inside the nested lis, insert the link button you want
The output will be the default format (sidebar on the side)
Add text-align: center for #stepIndicator to center the sidebar
Add display: inline-block for #stepIndicator li to align the the elements of #stepIndicator inline.
I have 2 files :-
Items.aspx with the list of items in a grid view, A button(to open a form for adding new item), and a div with id testing.
code Inside Items.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Basic.Master" AutoEventWireup="true" CodeBehind="Items.aspx.cs" Inherits="FlowerShopAdminPanel.Items" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="header" runat="server">
<div id="dvGrid" class="container">
<!-- This contains the gridview -->
</div>
<div id="testing"></div>
<script>
function openDialog($itemid,$categoryid) {
$('#testing').dialog({
modal: true,
dialogClass: "no-close",
open: function () {
$(this).load('AddItem.aspx?itemid=' + $itemid+'&categoryid='+$categoryid);
$(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
},
height: 500,
width: 500,
title: 'Add Item'
});
}
</script>
<style>
.image {
height: 30vh;
}
.no-close .ui-dialog-titlebar-close {
display: none;
}
</style>
</asp:Content>
This loads a form to add item in a jquery modal. we can upload image to that item using a Button . Above function is on another aspx form in which I am
AddItem.aspx
<div>
<asp:Label runat="server" Text="Category Name"></asp:Label>
<asp:DropDownList runat="server" ID="category_ddl"></asp:DropDownList>
</div>
<div>
<asp:Label runat="server" Text="Item Name"> </asp:Label>
<asp:TextBox runat="server" ID="itemname_txt"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" Text="Description"></asp:Label>
<asp:TextBox runat="server" TextMode="MultiLine" Rows="5" Columns="50" ID="description_txt"></asp:TextBox>
</div>
<div>
<asp:Label runat="server" Text="Main Image"></asp:Label>
<asp:FileUpload runat="server" ID="mainimage_fileupload"/><br />
<asp:Image runat="server" ID="mainimage_img" Visible="false" />
<asp:Button runat="server" ID="fileupload_btn" Text="Upload" OnClick="fileupload_btn_Click" />
<asp:Label runat="server" ID="filename_lbl" Visible="false" ForeColor="Red" Font-Bold="true"></asp:Label>
</div>
<div>
<asp:Label runat="server" Text="Active"> </asp:Label>
<asp:CheckBox runat="server" ID="isActive_chk"/>
</div>
<div>
<asp:Button runat="server" ID="addItem_btn" Text="Add Item" OnClick="addItem_btn_Click"/>
<asp:Button runat="server" ID="cancel_btn" Text="Cancel" OnClick="cancel_btn_Click"/>
</div>
</div>
</form>
Whenever I upload the image it opens up as a normal aspx page. Basically, Whenever the aspx page is refreshed, it opens up as a normal web page. I always want to open it in the jQuery modal.
Please help in resolving this issue.
Thank you
WebSiteVideo.aspx
<asp:DataList ID="DataList1" Visible="true" runat="server" AutoGenerateColumns="false" RepeatColumns="1" CellSpacing="15">
<ItemTemplate>
<a class="player" style="height: 100px; width: 120px; display: block" href='<%# Eval("Id", "File.ashx?Id={0}") %>'>
</a>
<u>
<%# Eval("Name") %>
</u>
</ItemTemplate>
</asp:DataList>
when i am clicking the video it should be Enlarge, According to this coding what have to do? Any solution?
You have to probably call some kind of function through client side which will zoom your video.
Check this JQuery Show Large Image Preview When Hover On Link In Asp.Net
My user control code throws javascript error.
If I don't include uplNewRequestCreation in the main page, everything works as expected. All the server and client side file upload functions are triggered. The reason for including the update panel in main page is to avoid full page postback.
I have tried several solutions from online sources but none helped.
added scriptmanagerproxy to user control page
defined the javascript in code behind page_load - this solution worked, but it did not trigger
OnUploadedComplete="uplFile1_UploadedComplete"
added file upload user control as trigger to the main update panel and changed updatemode to conditional
Error message: After the FileUpload.ascx.cs is initialized, following error message is shown.
Microsoft JScript runtime error: 'clientUploadComplete' is undefined
I appreciate your help very much!
Thanks!!!!
Here's my code structure.
User control
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="FileUpload.ascx.cs"
Inherits="QTrack2.UserControls.FileUpload" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script type="text/javascript">
function clientUploadComplete(sender, args) {
document.getElementById('<%= btnTrigger.ClientID %>').click();
}
</script>
<div style="float: left; margin-left: 0px;">
<asp:GridView ID="grdUploadControls" runat="server" AutoGenerateColumns="False" OnRowDataBound="grdUploadControls_RowDataBound"
CssClass="uploadTable" Caption="CIQ Files Required To Be Uploaded">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblCIQType" CssClass="Label" runat="server" Text='<%#Eval("Key")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="isReqlblCIQType" CssClass="Label" runat="server" Text='<%#Eval("Value")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ControlStyle-CssClass=" ">
<ItemTemplate>
<asp:AsyncFileUpload ID="uplFile1" runat="server" OnUploadedComplete="uplFile1_UploadedComplete"
CompleteBackColor="#E5FFE5" ErrorBackColor="#F4ADAE" Width="300" UploaderStyle="Modern"
ClientIDMode="AutoID" OnClientUploadComplete="clientUploadComplete"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:HiddenField ID="hdnFileSavePath" runat="server" Value="" />
<br />
</div>
<div style="float: left; margin-left: 20px; height: 40%; width: 650px; overflow: auto;
padding-right: 20px;">
<%-- <asp:UpdatePanel ID="upnlFileDisplayHolder" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnTrigger" />
</Triggers>
<ContentTemplate>--%>
<asp:GridView ID="grdFileDisplay" runat="server" AutoGenerateColumns="false" CssClass="uploadTable"
OnRowDataBound="grdFileDisplay_RowDataBound" Caption="CPM Files Currently Uploaded">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileType" CssClass="Label" runat="server" Text='<%#Eval("Value")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFileName" CssClass="Label" runat="server" Text='<%#Eval("Key")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnDeleteFile" CssClass="button" runat="server" Text="Remove" OnClick="btnDeleteFile_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div>
<asp:Button ID="btnTrigger" runat="server" Text="fdkl" Style="display: none;" OnClick="btnTrigger_Click" />
</div>
<%-- </ContentTemplate>
</asp:UpdatePanel>--%>
</div>
<div style="clear: both">
</div>
Main page calling user control
<%# Page Title="New Request" Language="C#" MasterPageFile="~/Site.IM.master" AutoEventWireup="true"
CodeBehind="GenericNewRequest.aspx.cs" Inherits="QTrack2.CreatorPages.NewRequest.Scripts.Generic.GenericNewRequest" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%# Register TagPrefix="uc1" TagName="fileUploadUserControl" Src="~/UserControls/FileUpload.ascx" %>
<%# Register TagPrefix="uc2" TagName="ciqValidationUserControl" Src="~/UserControls/ciqValUserControl.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
// This function is called whenever the user selects expected completion date from view # 3.
// This function checks if the selected date is less than currentDate and sets to the currentDate if true.
function checkSelectedDate(sender, args) {
if (sender._selectedDate < new Date()) {
var previouslySelectedDate = sender._textbox.value;
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="uplNewRequestCreation" runat="server">
<ContentTemplate>
<asp:MultiView ID="mviewNewRequestCreation" runat="server" ActiveViewIndex="0">
<View #1>
.....
</View #1>
<View # 2>
<uc1:fileUploadUserControl ID="multUplUserCntrol1" runat="server" />
.....
</View # 2>
<View # 3>
....
</View #3>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
It is clear your Javascript function is not being registered within the update panel, you can do this:
Declare this function clientUploadComplete outside the User Control and outside the Update Panel.
Or also you can:
Call the document.getElementById('<%= btnTrigger.ClientID %>').click(); function not using a javascript function, something like this...
OnClientUploadComplete="document.getElementById('btnTrigger_clientName').click()"
I am using two listviews to display two tag clouds (a red one and a green one). When the tag gets quite big, it overlaps the smaller ones. Is there a way to space out the tags, i.e vertical padding or something?
<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView1" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("Tag") %>
</ItemTemplate>
<EmptyDataTemplate>
<asp:Label ID="negative_tags" runat="server" Text=""></asp:Label>
</EmptyDataTemplate>
</asp:listview>
</div>
<br />
<div style="padding-left: 25px; padding-right: 25px; text-align: center;">
<asp:listview runat="server" ID="ListView2" ItemPlaceholderID="itemPlaceHolder">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate>
<%# Eval("Tag") %>
</ItemTemplate>
<EmptyDataTemplate>
<asp:Label ID="positive_tags" runat="server" Text=""></asp:Label>
</EmptyDataTemplate>
</asp:listview>
</div>
Yes,
on your <a> tags you can add:
line-height: 30px
or alternativelly you can add
padding-top:5px; padding-bottom:5px