get selected values in repeater control - asp.net

i have a repeater control which shows the list of all available products to show to a customer. this repeater control might have 5 items each, and in each of the itemtemplate in the repeater i have a button which is add to cart. once the user clicks this button i want to get the "ID" of that particular product through VB. please note that sometimes in the aspx page i can easily pass the id to a href="" redirect like this
Dim productid As String = DirectCast(Repeatershowsproducts.Controls(0).FindControl("ID"), Label).Text
it always return me the 1st product ID in the list and i wanted it to select the particular one the user chose after clicking the add to cart button. the user my have clicked the Third product meanwhile its showing the ID of the first product
Heres my aspx code.
<asp:Repeater ID="Repeatershowproducts" runat="server">
<ItemTemplate>
<div class="prtm-block-content bg-primary overflow-wrapper">
<div style="margin-top: 15px;" class="left col-xs-3">
<img class="img-responsive img-circle display-ib" src="<%#Eval("productimgpath")%>" alt="Avatar" title="Sponsor Profile Photo">
</div>
<div style="margin-top: 15px;" class="right col-xs-9">
<p class="font-sm"><i class="fa fa-user"></i>FullName: <span class="font-sm mrgn-b-md fw-bold"><%#Eval("productfullname")%></span></p>
<p class="font-sm"><i class="fa fa-bitcoin"></i>Amount: <span style="word-wrap: break-word;" class="font-sm mrgn-b-md fw-bold"><%#Eval("productprice")%> BTC</span></p>
<p class="font-sm"><i class="fa fa-phone"></i>deleivery days: <span class="font-sm mrgn-b-md fw-bold"><%#Eval("productdelivery")%></span></p>
<p class="font-sm"><i class="fa fa-globe"></i>Product location: <span class="font-sm mrgn-b-md fw-bold"><%#Eval("productcountry")%></span></p>
<p class="font-sm">Status: <span class="font-sm mrgn-b-md fw-bold"><%#Eval("Status")%></span></p>
<asp:Label ID="lblproductid" runat="server" Text='<%#Eval("ID")%>'></asp:Label>
</div>
<center>
<div class="text-center center">
<asp:Button ID="Button1" OnClick="addtocart" CssClass="btn btn-lg fw-bold btn-primary btn-rounded" runat="server" Text="Add product to cart" />
</div>
</div>
</center>
</div>
<hr />
</ItemTemplate>
</asp:Repeater>

The easiest way is to change the button from a OnClick to a OnCommand and add a CommandArgument to the button.
<asp:Button ID="Button1" OnCommand="Button1_Command"
CommandArgument='<%# Eval("itemid") %>' runat="server" Text="Add product to cart" />
And then read that value in code behind.
Protected Sub Button1_Command(ByVal sender As Object, ByVal e As CommandEventArgs)
Dim ProductID As Integer = Convert.ToInt32(e.CommandArgument)
End Sub

Related

bootstrap collapse collapses when clicking on calendar icon

I have a bootstrap panel-collapse as follows
<div class="panel-heading">
Business/Financial Information <a data-toggle="collapse" href="#BusFinInfo"><span class="glyphicon glyphicon-collapse-down"></span></a>
</div>
<div id="BusFinInfo" class="panel-collapse collapse">
and an ajax calendar extender as follows
<div class="input-group">
<asp:TextBox ID='txtTermNotifctnDate' runat='server' CssClass='form-control'></asp:TextBox>
<span class="input-group-addon" id="inputCalenderTermNotifctnDate">
<asp:LinkButton ID="lnkBtnTermNotifctnDate" runat="server"><i class="icon-Calendar"></i></asp:LinkButton>
</span>
<ajaxtoolkit:CalendarExtender ID="ceTermNotifctnDate" runat="server" TargetControlID="txtTermNotifctnDate"
PopupButtonID="lnkBtnExecutionDate" PopupPosition="BottomLeft" Format="MM/dd/yyyy"></ajaxtoolkit:CalendarExtender>
</div>
The problem is that when I click on the calendar control, the panel collapses.
Simple mistake that I overlooked. PopupButtonID was wrong and didn't match the link button.

Dropdownlist in Update Panel Populated on SelectedIndexChanged of Another does not Populate

I do not know what happened here as I know for a fact that this code was working. The only thing I know for sure that changed in the project was an upgrade to jQuery 3.31. I have 2 dropdownlists in an UpdatePanel in a modal. The first list populates as expected. The second dropdown is supposed to populated OnSelectedIndexChanged event of the first. The event is firing, and there are 5 records returned, but the dropdownlist is blank.
UPDATE After looking at previous versions in TFS this did occur after upgrading to jQuery 3.31.
Here is the modal code:
<div id="modalTicketReportSelect" class="md-modal colored-header custom-width md-effect-9 primary">
<div class="md-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close md-close"><i class="icon s7-close"></i></button>
<h3 class="modal-title">Ticket Type Report</h3>
</div>
<div class="modal-body form">
<div class="panel panel-alt3 panel-transparent">
<div class="panel-heading panel-heading-cg">
<button runat="server" id="btnAddToGrid" type="button" class="btn btn-alt3" data-dismiss="modal" onserverclick="btnAddToGrid_ServerClick" ><i class="icon s7-check"></i> Save</button>
<button type="button" data-dismiss="modal" class="btn btn-alt3 md-close"><i class="icon s7-close"></i> Cancel</button>
</div>
</div>
<asp:UpdatePanel runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="form-group">
<label class="text-danger">Ticket Type</label>
<asp:DropDownList ID="ddlTicketTypes" runat="server" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="ddlTicketTypes_SelectedIndexChanged"></asp:DropDownList>
</div>
<div class="form-group">
<label class="text-danger">Ticket Report</label>
<asp:DropDownList ID="ddlTicketReport" runat="server" CssClass="form-control" ></asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
Here is the event handler:
protected void ddlTicketTypes_SelectedIndexChanged(object sender, EventArgs e)
{
//log postback
LoggerBA.Log(DB_Context, Path.GetFileName(Request.ServerVariables["SCRIPT_NAME"]), MethodBase.GetCurrentMethod().Name, UtilityBA.LoggerLevel.Info, "postback");
ticketProfileId = Guid.Parse(ddlTicketTypes.SelectedValue);
ticketProfileName = ddlTicketTypes.SelectedItem.Text;
//PopulateTicketReports(ticketProfileId.ToString());
Guid TicketProfileId = Guid.Empty;
if (Guid.TryParse(ticketProfileId.ToString(), out TicketProfileId))
{
LookupListItemBO SReportTypeListItem = LookupListBA.LookupListItem_GetByBothDatakeys(DB_Context, "SYS_REPORTTYPE", "REPORTTYPE_SINGLE");
Guid ReportTypeId = SReportTypeListItem.LookupListItemId;
List<CG.Reports.Views.ReportView.SavedReportBO> singleticketreports = CG.Reports.BLL.DevExpressBA.SavedReport_GetByModuleReportTypeId_AndTypeIdentifierId(DB_Context, "TICKET", ReportTypeId, TicketProfileId, true);
ddlTicketReport.DataSource = singleticketreports;
ddlTicketReport.DataTextField = "ReportName";
ddlTicketReport.DataValueField = "SavedReportId";
ddlTicketReport.DataBind();
ListItem oSelect = new ListItem("[Make Selection]", "");
ddlTicketReport.Items.Insert(0, oSelect);
ddlTicketReport.SelectedIndex = 0;
}
else
{
ddlTicketReport.Items.Clear();
}
}
Dev tools reveal no errors on page. I am stumped! Any assistance is greatly appreciated.

ModalPopupExtender does not show in aspx

i try to design a popup window in my aspx page. The problem is the page is reloaded and the popup not shown!
here is the code
aspx
<asp:ScriptManager ID="ScriptManager2" runat="server"></asp:ScriptManager>
<asp:Label ID="popuplbl" runat="server"></asp:Label>
<cc1:ModalPopupExtender ID="mpe" PopupControlID="panel1" TargetControlID="popuplbl" CancelControlID="cancelbtn" runat="server"></cc1:ModalPopupExtender>
<asp:Panel ID="panet1" class="modal fade in" runat="server">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal"></button>
<h4 class="modal-title">New Study Design</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Some Input</h4>
<p><input class="col-md-12 form-control" type="text"> </p>
<p><input class="col-md-12 form-control" type="text"> </p>
</div>
</div>
</div>
<div class="modal-footer">
<button id="cancelbtn" class="btn default" type="button" data-dismiss="modal">Cancel</button>
<button class="btn blue" type="button">Add</button>
</div>
</div>
</div>
</asp:Panel>
<button runat="server" id="AddNew_StudyDesign" class="btn sbold green" title="Add New Study Design" style="width:200px" onserverclick="AddNew_StudyDesign_Click" >
Add New Study Design <i class="fa fa-plus"></i>
</button>
c#
protected void AddNew_StudyDesign_Click(object sender, System.EventArgs e)
{
mpe.Show();
}
I try using "ToolkitScriptManager" but it is not known!
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<cc1:ToolkitScriptManager ID="ScriptManager1" runat="server" />
I can see one issue,
Replace PopupControlID attribute in ModalPopupExtender ,
PopupControlID="panel1"
To
PopupControlID="panet1"
Panel ID is panet1, not panel1.
Additionally, Panel should have display style none (style="display:none;"), but you can keep as per your requirements.

Cannot Bind to asp:Dropdownlist in Bootstrap Modal

For some reason, I cannot bind to an asp:Dropdownlist inside a Modal, and I can't figure out what I am missing. If I move the dropdownlist outside of the Modal, that data binds perfectly, but inside the Modal, the dropdownlist is always blank. Can someone please tell me what I am missing here:
Here is the Modal:
<div id="copyEmployeeModal" class="md-modal colored-header md-effect-9 prmiary">
<div class="md-content">
<div class="modal-header">
<button type="button" data-dismiss="modal3" aria-hidden="true" class="close md-close" onclick="return CloseModal();"><i class="icon s7-close"></i></button>
<h3 class="modal-title">
<asp:Label ID="lblcopyEmployeeModalTitle" runat="server" Text="Copy Employee Permissions"></asp:Label>
</h3>
</div>
<div class="modal-body form" style="padding: 0px!important;">
<asp:DropDownList ID="ddlNonGroupEmployees" runat="server" CssClass="form-control" AutoPostBack="true"></asp:DropDownList>
</div>
</div>
</div>
Here is the code to bind the dropdownlist:
ddlNonGroupEmployees.DataSource = GetNonGroupEmployees();
ddlNonGroupEmployees.DataTextField = "DisplayName";
ddlNonGroupEmployees.DataValueField = "EmployeeId";
ddlNonGroupEmployees.DataBind();
I know the above code has data, and as I said if I move the dropdownlist out of the modal and place it on the page, the data binds to the dropdownlist with no issues. Can anyone tell me what I am missing here?
Any assistance is greatly appreciated!

confirm delete for gridview row with bootstrap modal

I would like to add a confirmation modal after the click of delete in gridview.
The problem is that with this addition the delete takes place only for the first row of the gridview even if I try to delete another row.
I have the code below inside an itemtemplate in a gridview
<asp:LinkButton ID="diagrafi" runat="server" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#delete_Modal">
<asp:Image ID="Image1" Width="20px" runat="server" ImageUrl="images/del.png"/>
</asp:LinkButton>
<div class="modal fade" id="delete_Modal" tabindex="-2" 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-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">
delete command
</h4>
</div>
<div class="modal-body">
<p>
are you sure?…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="myFunction()"> cancel</button>
<asp:Button ID="epivevaiosi" CommandArgument='<%#Eval("kodikos")+"|"+Eval("tablename")%> '
CommandName="DeleteRow" runat="server" type="button" Text="Διαγραφή" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
Is there a way to pass to bootstrap modal the right parameters that will be relevant to the clicked row?
Thank you in advance..
Yes - Bootstrap provides a way to pass parameters to modals, but you need to rework your gridview
Before you begin - the sample code here is generating a gridview Delete command which will require you to have an associated delete query in your datasource. If you do not, you can change the Delete$N call to something like MyConfirmedDelete and process the delete in the gridview RowCommand event
So, to begin....
You need to add a basic template field that contains a simple button to the gridview columns, one that does NOT cause a postback and modified with the bootstrap modal attributes
<Columns>
<!--...other gridview fields... -->
<asp:TemplateField>
<ItemTemplate>
<button id="btnDeleteConfirm" runat="server" type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#deleteConfirmModal"
data-postcommand="">Delete</button>
</ItemTemplate>
</asp:TemplateField>
<!--...other gridview fields... -->
</Columns>
Note the attribute data-postcommand="". postcommand is a user supplied data attribute and must be prefixed with data- to work with the modal. This is going to be filled in the code behind and will contain the delete reference for the appropriate row:
In the Code Behind VB:
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
For Each gvr As GridViewRow In GridView1.Rows
Dim btn As HtmlButton = gvr.FindControl("btnDeleteConfirm")
Dim pbo As New PostBackOptions(GridView1,
String.Format("Delete${0}", gvr.RowIndex),
String.Empty, False, True, False, True, False, String.Empty)
If btn IsNot Nothing Then
btn.Attributes("data-postcommand") =
ClientScript.GetPostBackEventReference(pbo, True)
End If
Next
MyBase.Render(writer)
End Sub
In the Code Behind C#:
using System.Web.UI.HtmlControls;//add this
protected override void Render(HtmlTextWriter writer){
foreach(GridViewRow gvr in Gridview1.Rows){
HtmlButton btn = gvr.FindControl("btnDeleteConfirm") as HtmlButton;
PostBackOptions pbo =new PostBackOptions(GridView1,
String.Format("Delete${0}", gvr.RowIndex),
String.Empty, false, true, false, true, false,
String.Empty);
if( btn != null){
btn.Attributes["data-postcommand"] =
ClientScript.GetPostBackEventReference(pbo, True);
}
}
base.Render(writer);
}
There are a few significant things to note in the above:
We are looping thru the gridview datarows
For each row we build a PostBackOptions object
The object is used in the call to ClientScript.GetPostBackEventReference()
Which returns the postback string specific to the row and registers the call for event validation. Remember the true Delete button now resides in the modal and not the gridview, so we must register and that can only be done in Render, hence the override.
The javascript string is passed to the modal upon Click
Next, you must move the modal out of the gridview, only one modal is required. I placed mine at the bottom of the page just inside the closing </form>
This is a modified example from the Bootstrap website
Note the <asp:LinkButton> replacement
<!-- Modal -->
<div class="modal fade" id="deleteConfirmModal" 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-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Delete</h4>
</div>
<div class="modal-body">
Delete...Really???
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<asp:LinkButton ID="LinkButton2" runat="server"
ClientIDMode="Static"
CssClass="btn btn-primary">LinkButton</asp:LinkButton>
</div>
</div>
</div>
</div>
And per the Bootstrap docs here is the jquery that performs the parameter replacement:
<script type="text/javascript">
$('#deleteConfirmModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var pbcommand = button.data('postcommand') // Extract info from data-* attributes
var modal = $(this)
modal.find('#LinkButton2').attr('href', pbcommand);
});
</script>
The deletion takes place only for the first row because of the id attribute of the modal.Html does not accepts multiple id attributes with the same name on a single page. So when you click delete the same model is called over and over again. You need to have different names for all you modal ids. for example for similar problem that i faced i wrote this code.
<asp:GridView ID="gvCustomerView"
CssClass="table table-striped table-bordered bootstrap-datatable datatable"
runat="server" AutoGenerateColumns="false"
EmptyDataText="No records found"
OnRowDeleting="gvCustomerView_RowDeleting"
DataKeyNames="Id"
ShowFooter="True"
AllowPaging="True"
PageSize="150"
OnRowCommand="gvCustomerView_RowCommand"
OnPageIndexChanging="gvCustomerView_PageIndexChanging">
<Columns>
<asp:BoundField HeaderText="Atoll" DataField="atoll_name"></asp:BoundField>
<asp:BoundField HeaderText="Island" DataField="iland_name"></asp:BoundField>
<asp:BoundField HeaderText="Area" DataField="area_name" />
<asp:BoundField HeaderText="Customer name" DataField="customer_name"></asp:BoundField>
<asp:BoundField HeaderText="Branch name" DataField="branch_name"></asp:BoundField>
<asp:BoundField HeaderText="Account Number" DataField="account_number"></asp:BoundField>
<asp:BoundField HeaderText="Password" DataField="password"></asp:BoundField>
<asp:TemplateField HeaderText="Blacklist">
<ItemTemplate>
<% if (Convert.ToBoolean(Session["edit"]))
{ %>
Make Blacklist
<% } %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Settings">
<ItemTemplate>
<% if (Convert.ToBoolean(Session["edit"]))
{ %>
<i class="fa fa-cog"></i>
<% } %>
<%--settings dialog--%>
<div class="modal fade" id="<%#Eval("Id")%>" 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">×</button>
<h3>Settings</h3>
</div>
<div class="modal-body">
<div class="control-group">
<div class="controls" style="margin: 10px">
<i class="fa fa-pencil-square-o" style="margin-top: 5px"></i>
<% if (Convert.ToBoolean(Session["edit"]))
{ %>
<asp:LinkButton ID="lnkEdit" CommandArgument='<%#Eval("Id")%>' CommandName="Action"
runat="server">Edit</asp:LinkButton>
<% } %>
</div>
<div class="controls" style="margin: 10px">
<i class="fa fa-eye" style="margin-top: 5px"></i>
<asp:LinkButton ID="lblView" runat="server" Text="View" CommandName="View"
CommandArgument='<%#Eval("Id")%>'></asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</div>
<%--End settings Dialogue--%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<% if (Convert.ToBoolean(Session["delete"]))
{ %>
<asp:LinkButton OnClientClick="return window.confirm('Are you confirm to delete?')" CommandArgument='<%#Eval("Id")%>'
CommandName="Delete" runat="server"><i class="fa fa-close"></i></asp:LinkButton>
<% } %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Look above the setting dialogue comment I have passed Id of the bound data to the SettingsEntry javascript function and i also have set the id attribute of the settings modal to the corresponding Id of the bound data.
Then SettingsEntry javascript function is like this.
function SettingsEntry(id) {
$('#' + id).modal('show');
}
Apply this to your case and you are good to go.
thanks Shahid khan
also you can use this form for yourself
<asp:TemplateField ItemStyle-CssClass="first-name" HeaderStyle-CssClass="first-name" HeaderText="اقدامات">
<ItemTemplate>
<!-- Button HTML (to Trigger Modal) -->
<asp:LinkButton
ID="LinkButton_Delete1"
data-toggle="modal"
data-target='<%# "#" + Eval("ID").ToString()%>'
runat="server"
CommandArgument='<%#Eval("ID")%>'
CommandName="delete">
<span data-toggle="popover" data-placement="top" title="حذف" class="glyphicon glyphicon-trash"/>
</asp:LinkButton>
<asp:LinkButton ID="LinkButton_Edit1"
runat="server"
OnCommand="btn_Edit1_Command"
data-toggle="popover"
CommandArgument='<%#((GridViewRow) Container).RowIndex.ToString() + "," + Eval("ID").ToString()%>'>
<span data-toggle="popover" data-placement="top" title="ویرایش" class="glyphicon glyphicon-edit"><span>
</asp:LinkButton>
<!-- Modal HTML -->
<div class="modal fade" id="<%#Eval("ID")%>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog Modal-position">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>آیا شما مطمئن به حذف این رکورد می باشید؟</p>
</div>
<div class="modal-footer">
<asp:Button
Text="خیر"
CssClass="btn btn-info"
data-dismiss="modal"
runat="server" />
<asp:Button
ID="btn_Delete1"
Text="بله"
CssClass="btn btn-danger"
UseSubmitBehavior="false"
data-dismiss="modal"
runat="server"
OnCommand="btn_Delete1_Command"
CommandArgument='<%#Eval("ID").ToString()%>' />
</div>
</div>
</div>
</div>
</ItemTemplate>
and this javascript for tooltip message as "Shahid khan" mentioned
<script type="text/javascript">
$(document).ready(function () {
InitializeBootstrap();
});
// For Re-Binding Jquery after Partial Postback...
function InitializeBootstrap() {
$("[data-toggle=popover]").popover({ trigger: "hover" });
}

Resources