Develop Reference

Datalist not displaying items ASP.NET

I have a serious problem with data list I HATE IT so much. I have a list of data that displays cart items in a table.. basic right?
Sure, but not for data list! its like data list says I MUST DESTROY YOU. The data list does not show any items that I should display!
Here are some screenshots that will let you understand my issue here.
So basically the items are displayed in VS, but in the web application it doesn't.
PLEASE HELP :(
Here is the code:
<div class="container-sm cart-page">
<table>
<tr>
<th>المنتج</th>
<th>الكمية</th>
<th>السعر الفرعي</th>
</tr>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="1" RepeatLayout="Flow">
<ItemTemplate>
<tr>
<td>
<div class="cart-info">
<img src="http://bestjquery.com/tutorial/product-grid/demo8/images/img-1.jpg" alt="camera">
<div>
<p>Camera 211</p>
<small>السعر: 50 ر.س.</small>
<br>
حذف
</div>
</div>
</td>
<td>
<input type="number" value="1" min="1" max="10"></td>
<td>50 ر.س.</td>
</tr>
</ItemTemplate>
</asp:DataList>
</table>
<div class="total-price">
<table>
<tr>
<td class="titles">السعر الفرعي</td>
<td>150 ر.س.</td>
</tr>
<tr>
<td class="titles">VAT</td>
<td>22.50 ر.س.</td>
</tr>
<tr>
<td class="titles">المجموع</td>
<td>172.50 ر.س.</td>
</tr>
<tr>
<td>
<a href="store.aspx">
<button type="submit" class="btn btn-primary btn-continue-shopping">إكمال التسوق</button>
</a>
</td>
<td>
<a href="checkout.aspx">
<button type="submit" class="btn btn-primary btn-checkout">إكمال الدفع</button>
</a>
</td>
</tr>
</table>
</div>
</div>

You need to set the DataSource property with some list or table of data.
Here is a link to the MSDN article: https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.basedatalist.datasource?view=netframework-4.8#System_Web_UI_WebControls_BaseDataList_DataSource
What is your data source? Are you using a database?
If you do not have a database you can mockup a dataset in XML, JSON, or CSV and then deserialize into your code.
I believe that you can bind anything that implements IList.

Update panel on Telerik control

In my asp.net application there are several dropdown and textbox control which creates dynamically. So on select of dropdown while data is being fetched I want to show update progress on div. Also I dont want to post back call so whole page should not be refreshed.
Here is my code
<div class="col-md-2">
<div class="filter-section">
<table>
<tr>
<td>
<asp:Panel ID="ControlsParent" ViewStateMode="Enabled" ClientIDMode="Static" runat="server"></asp:Panel>
</td>
</tr>
<tr>
<td>
<asp:Button ID="BtnShowReport" runat="server" ClientIDMode="Static" CssClass="btn btn-primary btn-block" Text="Show Report" OnClick="BtnShowReport_Click" />
</td>
</tr>
</table>
</div>
</div>
I am new to Telerik so dont have idea to use.

Put the code insiode the Update Panel, I am using Simple asp and haven't used Telerik in following:
// you code codes here
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress DynamicLayout="true" ID="upProgSearch" DisplayAfter="1500" runat="server" >
<ProgressTemplate>
<div id="progressBackgroundFilter"></div>
<div id="processMessage" style="width:100px;">
<asp:Image ID="Image1" ImageUrl="~/images/Loading.gif" runat="server" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
for preventng auto postback use <triggers> tags in update panel and use <asp:AsyncPostBackTrigger> and specify the event name that causes postback and you don't want .

How to get Dynamic Span id in jquery?

Iam using jquery in asp.net
I have one user control in which i have div and in div table and in table tr and in tr td and in td i have lables.
ASCX :
<div ID="Container" runat="server" class="dvContainer">
<table ID="Table" class = "Tablecs">
<thead><tr>
<td colspan="2">
<asp:Label ID="lbl1" Text="Swiss" runat="server" /></td>
</tr>
</thead>
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td><asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" /></td>
<td ><asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" /></td>
</tr>
<tr>
<td><asp:Label ID="lblAA" Text="SUN 12/21 05:04" runat="server" /></td>
<td ><asp:Label ID="lblAD" Text="SUN 12/21 19:00" runat="server" /></td>
</tr>
</table>
i want to bind data dynamically to these user control. i.e., binding data to lables in user contol.
my Jquery
$div.find(".Table").text(oPorts[iCount].Name); // my result is an array of oPorts and i have filed as Name
But this is not working fine.
when i checked into code dynamically its generating SPAN for each and every lable
How to find that SPAN id dynamiccaly in a loop and bind data to lables??
Any help is appreciated. Thanks in Advance.

suppose you have a usercontrol with a markup like given below
<%# Control Language="C#" AutoEventWireup="true"
CodeBehind="WebUserControl1.ascx.cs" Inherits="DOTNET_FORMS.WebUserControl1" %>
<div id="Container" runat="server" class="dvContainer">
<table id="Table" class="Tablecs">
<tr>
<td>
<asp:Label ID="lblPA" Text="SUN 12/21 05:04" runat="server" />
</td>
<td>
<asp:Label ID="lblPD" Text="SUN 12/21 19:00" runat="server" />
</td>
</tr>
</table>
</div>
and you have registered this usercontrol on your .aspx page like this:
<%# Register TagPrefix="UC" TagName="Test" Src="~/WebUserControl1.ascx" %>
and used it like this:
<UC:Test ID="uc1" runat="server" />
then, when you run your page, your elements get rendered something like
<div id="uc1_Container" class="dvContainer">
<table id="Table" class="Tablecs">
<tr>
<td>
<span id="uc1_lblPA">SUN 12/21 05:04</span>
</td>
<td>
<span id="uc1_lblPD">SUN 12/21 19:00</span>
</td>
</tr>
<tr>
<td>
<span id="uc1_lblAA">SUN 12/21 05:04</span>
</td>
<td>
<span id="uc1_lblAD">SUN 12/21 19:00</span>
</td>
</tr>
</table>
</div>
see how ids of your labels and other elements (elements with runat="server" attribute ) got changed i.e.
lblPA > uc1_lblPA
lblPD > uc1_lblPD
Container > uc1_Container
so, you have to look out for these changes, because only then you can grab these elements using jQuery, cause jQuery is a client side language, it executes, after the server side code (runat="server") has executed.
However, if you do not want to look out for modified id, you can do following
remove runat="server" attribute, and make sure your ids are unique, all of them
let the runat="server" attribute be their, place an attribute clientidmode="static" on all of your server side controls. and Ids wont change.
use ClientId i.e. in your jQuery selector, grab an element like this: $('#"+'<%= lblPA.ClientID %>');
now, since your IDs are unique, you don't need to find, directly grab the elements like this:
$('#lblPA').text();
or if you want to loop through all the tds of your table with class Tablecs, do this:
$('.Tablecs tr td').each(function(index, item){
alert($(item).text());
});

Javascript for a popup. Asp.net for Visual Studio 2005

What JavaScript has to be written for a popup when a link is clicked? Correct me if there is anything else to be done.
Link is written like this.
<div style="float:left; padding-left:9px;">
<asp:LinkButton ID="lnkActiveInactive" runat="server" OnClick="lnkActiveInactive_Click"
CssClass="linkclass" Font-Underline="True">Cancel My Account</asp:LinkButton>
</div>
And popup extender is like this.
<cc1:ConfirmButtonExtender DisplayModalPopupID="ModalPopupExtender2" ID="ConfirmButtonExtender2"
runat="server" TargetControlID="lnkActiveInactive">
</cc1:ConfirmButtonExtender>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" OkControlID="btnYesCancel" CancelControlID="btnNoCancel"
BackgroundCssClass="modalBackground" PopupControlID="pnlCancelPopup" TargetControlID="lnkActiveInactive"
runat="server">
</cc1:ModalPopupExtender>
<asp:Panel CssClass="modalPopup" ID="pnlCancelPopup" runat="server">
<!-- Common Popup Control Begin -->
<table class="tblCommonPopup" width="690px" cellpadding="0" cellspacing="0">
<tr>
<td class="topLeft">
</td>
<td class="topMiddle">
</td>
<td class="topRight">
</td>
</tr>
<tr>
<td colspan="3" class="middle" align="center">
<!-- Content Area Begin -->
<table>
<tr>
<td>
</td>
<td colspan="2" style="padding-top: 10px;">
<table width="100%">
<tr>
<td align="center">
Feel free to change your package to Basic, there is no charge for this Package.<br /><br />If you still wish to cancel,
your account will become inactive within DealTown and any further billing will <br />discontinue.
We will keep you account in our system for some time if you wish to active it again.<br /><br />Are you sure you
wish to cancel your account?
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="4">
<input id="btnYesCancel" type="button" value="YES" class="popupButton" />
<input id="btnNoCancel" type="button" value="NO" class="popupButton" />
</td>
</tr>
</table>
<!-- Content Area Ends -->
</td>
</tr>
<tr>
<td class="bottomLeft">
</td>
<td class="bottomMiddle">
</td>
<td class="bottomRight">
</td>
</tr>
</table>
<!-- Common Popup Control End -->
</asp:Panel>

Im not sure if I understood your question clearly, but this is how to pop up in JS
<script type="text/javascript">
<!--
function Confirmation() {
var answer = confirm("Are you sure you want to Cancel your Account?")
if (answer){
alert("Goodbye!")
}
else{
alert("Thanks for not Cancelling")
}
}
//-->
</script>
<div style="float:left; padding-left:9px;">
<asp:LinkButton ID="lnkActiveInactive" onclick="Confirmation();">Cancel My Account</asp:LinkButton>
</div>
This code is used is you run on the client side. If you want it to run on server side you have to do it on the codebehind like such
if (!IsPostBack) {
this.lnkActiveInactive.Attributes.Add("onclick", "javascript:Confirmation()");
}

If you just want a confirmation dialog for the 'cancel my account' you can simply place some javascript in your aspx page.
Something like:
onclick="javascript:confirm()"
Hope this helps!

I think the other responders have missed that you are using the ASP.NET Ajax Toolkit ModalPopupExtender.
The answer to your question is, no, no Javascript is required. Setting the TargetControlID of the ModalPopupExtender to your LinkButton should be sufficient to get the pop-up to appear. If that's not happening, something else is wrong.
One thing I notice is that you have an OnClick handler on the LinkButton. This shouldn't be necessary if the only function of the link button is to pop up the dialog.

xVal and jQuery Submit Button

I have a simple form. Its got one field and a submit button.
I hide the submit button. The submit button is actually triggered with an anchor
tag that calls a javascript method that uses jQuery to get the element and execute
a click(). This works fine, the form posts and record is successfully written into the DB.
So now I added xVal for validation. I am trying to add in the simple client side validation.
It doesn't work when I click the anchor tag. However, if I un-hide the submit button and try posting the form with that instead of using the anchor tag that's calls the js method, it does work. So basically I am trying to figure out why it doesn't work when I use the js method to trigger the click of the submit button.
Any grande ideas? Thanks much!
Heres some code...
<div id="manufacturerButtons" class="moduleRow">
<%= Html.ActionImage(Url.Content("~/Content/Icons/bullet_go_back.png"), "Back To Admin", "Admin", "Admin")%>
| <a class="actionImage" href="javascript: addManufacturer();">
<img border="0" src="<%= Url.Content("~/Content/Icons/accept.png")%>"> <span>Add
Manufacturer </span></a>
</div>
<div class="moduleContent">
<div id="manufacturerContainer">
<div class="moduleRow">
<h3>
New Manufacturer</h3>
</div>
<div class="moduleRow">
<% Html.BeginForm("NewManufacturer", "Admin", FormMethod.Post); %>
<table class="noBorder" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 125px">
<h6>Name:</h6>
</td>
<td>
<%= Html.TextBox("Name") %>
</td>
</tr>
<tr style="display: none;">
<td>
</td>
<td>
<input type="submit" id="btnAdd" name="btnAdd" />
</td>
</tr>
</table>
<% Html.EndForm(); %>
<%= Html.ClientSideValidation<EquipmentManufacturer>() %>
</div>
</div>
Javascript:
function addManufacturer() {
//$('form').submit(); // doesnt work when trying to validate either
$('#btnAdd').click();
return true;
}

What you need to do is trigger the jQuery validation on your form. Try:
$('form').validate();
To submit the form upon successful validation, try:
$('form').validate({ submitHandler: function(form) { form.submit(); } });
Note that 'form' should be a valid jQuery selector for your form...