Introduction:
The ASP.NET AJAX ListView client control is a templated data control for displaying data records.In this article we are going to discuss about how effectively we are going to use this client control.Importantly this client side control only available in AJAX 2.0 and above versions.
Main:
The Common Properties for Listview ajax control is,
Style properties: These enable you to style the DOM elements that make up the ListView templated data control. In other words, you cannot use the style properties to customize the DOM elements themselves — that is, to replace them with a new set of DOM elements; you can only customize the appearances of these DOM elements.
Template properties: These enable you to customize the DOM elements that make up the ListView control. In other words, you get to decide what types of DOM elements are used to build the ListView control’s UI.
Style Property
Description
get_itemCssClass
Gets the name of the CSS class that styles the even-numbered data rows or items of the ListView control. (A data row is a row that displays a data record.)
set_itemCssClass
Sets the name of the CSS class that styles the evennumbered data rows or items of the ListView control.
get_alternatingItemCssClass
Gets the name of the CSS class that styles the odd-numbered data rows or items of the ListView control.
set_alternatingItemCssClass
Sets the name of the CSS class that styles the odd-numbered data rows or items of the ListView control
get_separatorCssClass
Gets the name of the CSS class that styles the separator rows or items of the ListView control. (A separator row is a row that separates two consecutive data rows.)
set_separatorCssClass
Sets the name of the CSS class that styles the separator rows or items of the ListView control.
get_selectedItemCssClass
Gets the name of the CSS class that styles the selected data row or item of the ListView control.
set_selectedItemCssClass
Sets the name of the CSS class that styles the selected data row or item of the ListView control
Template Property
Description
get_emptyTemplate
Gets a reference to the empty template. (The empty template is the one that specifies the markup that will be shown to the end user when the data collection bound to the ListView control does not contain any data records.)
set_emptyTemplate
Sets the empty template. (Take the following steps to specify the empty template. First, add an
get_itemTemplate
Gets a reference to the item template. (The item template is the one that specifies the markup that displays a data record.)
set_itemTemplate
Sets the item template. (Take these steps to specify the item template. First, add an
get_layoutTemplate
Gets a reference to the layout template. (The layout template is the one that specifies the layout markup for the whole ListView control.)
set_layoutTemplate
Sets the layout template. (Take these steps to specify the layout template. First, add a
get_separatorTemplate
Gets a reference to the separator template. (The separator template is the one that specifies the markup that separates two consecutive data rows of the ListView control.)
set_separatorTemplate
Sets the separator template. (Take the following steps to specify the separator template. First, add a
See this examble,
Script Part,
We are retrieving author details using selected author ID with page refresh,
<script language="javascript" type="text/javascript">
function renderCompleteCallback(sender, eventArgs)
{
alert("Rendering is completed!");
}
function onSuccess(result, userContext, methodName)
{
userContext.set_data(result);
if (firstTime)
{
firstTime = false;
selectionChangedCallback(userContext);
}
}
function onFailure(result, userContext, methodName)
{
var builder = new Sys.StringBuilder();
builder.append("timedOut:");
builder.append(result.get_timedOut());
builder.appendLine();
builder.appendLine();
builder.append("message:");
builder.append(result.get_message());
builder.appendLine();
builder.appendLine();
builder.append("stackTrace:");
builder.appendLine();
builder.append(result.get_stackTrace());
builder.appendLine();
builder.appendLine();
builder.append("exceptionType:");
builder.append(result.get_exceptionType());
builder.appendLine();
builder.appendLine();
builder.append("statusCode:");
builder.append(result.get_statusCode());
builder.appendLine();
builder.appendLine();
builder.append("methodName:");
builder.append(methodName);
alert(builder.toString());
}
function selectionChangedCallback(sender, eventArgs)
{
var BookAuthorID = sender.get_selectedValue();
var listView = Sys.Application.findComponent("listView");
MyWebService.GetBooks(BookAuthorID, onSuccess, onFailure, listView);
}
var firstTime = true;
function pageLoad()
{
var listView = Sys.Application.findComponent("listView");
listView.set_itemCssClass("itemCssClass");
listView.set_alternatingItemCssClass("alternatingItemCssClass");
listView.set_selectedItemCssClass("selectedItemCssClass");
var BookauthorList = Sys.Application.findComponent("BookauthorList");
if (!BookauthorList.get_data())
MyWebService.GetAuthors(onSuccess, onFailure, BookauthorList);
}
</script>
<script language="javascript" type="text/javascript"> function renderCompleteCallback(sender, eventArgs) { alert("Rendering is completed!"); } function onSuccess(result, userContext, methodName) { userContext.set_data(result); if (firstTime) { firstTime = false; selectionChangedCallback(userContext); } } function onFailure(result, userContext, methodName) { var builder = new Sys.StringBuilder(); builder.append("timedOut:"); builder.append(result.get_timedOut()); builder.appendLine(); builder.appendLine(); builder.append("message:"); builder.append(result.get_message()); builder.appendLine(); builder.appendLine(); builder.append("stackTrace:"); builder.appendLine(); builder.append(result.get_stackTrace()); builder.appendLine(); builder.appendLine(); builder.append("exceptionType:"); builder.append(result.get_exceptionType()); builder.appendLine(); builder.appendLine(); builder.append("statusCode:"); builder.append(result.get_statusCode()); builder.appendLine(); builder.appendLine(); builder.append("methodName:"); builder.append(methodName); alert(builder.toString()); } function selectionChangedCallback(sender, eventArgs) { var BookAuthorID = sender.get_selectedValue(); var listView = Sys.Application.findComponent("listView"); MyWebService.GetBooks(BookAuthorID, onSuccess, onFailure, listView); } var firstTime = true; function pageLoad() { var listView = Sys.Application.findComponent("listView"); listView.set_itemCssClass("itemCssClass"); listView.set_alternatingItemCssClass("alternatingItemCssClass"); listView.set_selectedItemCssClass("selectedItemCssClass"); var BookauthorList = Sys.Application.findComponent("BookauthorList"); if (!BookauthorList.get_data()) MyWebService.GetAuthors(onSuccess, onFailure, BookauthorList); } </script> |
In html part,
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference InlineScript="true" Path="WebService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
</Scripts>
</asp:ScriptManager>
<center>
<b>Select an author:</b>
<select id="BookauthorList">
</select>
<br />
<br />
</center>
<div id="listView" />
<div style="display: none;">
<div id="layout">
<table width="100%">
<thead>
<tr style="background-color: Tan">
<th>
BookTitle</th>
<th>
BookPublisher</th>
<th>
BookPrice</th>
</tr>
</thead>
<tbody id="itemContainer">
<tr id="item">
<td id="BookTitle">
</td>
<td id="BookPublisher">
</td>
<td id="BookPrice">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
<script type="text/xml-script">
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<components>
<selector id="BookauthorList" textProperty="BookAuthorName"
valueProperty="BookAuthorID" selectionChanged="selectionChangedCallback" />
<listView id="listView" itemTemplateParentElementId="itemContainer"
renderComplete="renderCompleteCallback">
<layoutTemplate>
<template layoutElement="layout"/>
</layoutTemplate>
<itemTemplate>
<template layoutElement="item">
<label id="BookTitle">
<bindings>
<binding dataPath="BookTitle" property="text" />
</bindings>
</label>
<label id="BookPublisher">
<bindings>
<binding dataPath="BookPublisher" property="text" />
</bindings>
</label>
<label id="BookPrice">
<bindings>
<binding dataPath="BookPrice" property="text" transform="ToString"
transformerArgument="${0}" />
</bindings>
</label>
</template>
</itemTemplate>
</listView>
</components>
</page>
</script>
</body>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference InlineScript="true" Path="WebService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
</Scripts>
</asp:ScriptManager>
<center>
<b>Select an author:</b>
<select id="BookauthorList">
</select>
<br />
<br />
</center>
<div id="listView" />
<div style="display: none;">
<div id="layout">
<table width="100%">
<thead>
<tr style="background-color: Tan">
<th>
BookTitle</th>
<th>
BookPublisher</th>
<th>
BookPrice</th>
</tr>
</thead>
<tbody id="itemContainer">
<tr id="item">
<td id="BookTitle">
</td>
<td id="BookPublisher">
</td>
<td id="BookPrice">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
<script type="text/xml-script">
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<components>
<selector id="BookauthorList" textProperty="BookAuthorName"
valueProperty="BookAuthorID" selectionChanged="selectionChangedCallback" />
<listView id="listView" itemTemplateParentElementId="itemContainer"
renderComplete="renderCompleteCallback">
<layoutTemplate>
<template layoutElement="layout"/>
</layoutTemplate>
<itemTemplate>
<template layoutElement="item">
<label id="BookTitle">
<bindings>
<binding dataPath="BookTitle" property="text" />
</bindings>
</label>
<label id="BookPublisher">
<bindings>
<binding dataPath="BookPublisher" property="text" />
</bindings>
</label>
<label id="BookPrice">
<bindings>
<binding dataPath="BookPrice" property="text" transform="ToString"
transformerArgument="${0}" />
</bindings>
</label>
</template>
</itemTemplate>
</listView>
</components>
</page>
</script>
</body> |
Conclusion:
I believe,its helps,
Happy Coding.
Dear Author netprogramminghelp.com !
Bravo, the excellent message
I want to quote your post in my blog. It can?
And you et an account on Twitter?
I’m impressed! It’s nice to see someone very passionate about what they do. Trust all your future posts turn out as well.Thanks!
I usually don’t commonly post on many another Blogs, yet I just has to say thank you… keep up the amazing work. Ok unfortunately its time to get to school.
Hello. Fantastic job, if I wasn’t so busy with my school work I read your entire site. Thanks!
Thank you for this article. It was very informative.
This is a fantastic post, but I was wondering how do I suscribe to the RSS feed?
Hi markus,you can subscribe the feed in right sidebar,i subscribed very long back,This site is really interesting,and innovative and very useful.
I Will have to come back again when my course load lets up – nonetheless I am taking your RSS feed so I can read your site offline. Thanks.
Great article, thanks for sharing.
This is a amazing post, but I was wondering how do I suscribe to the RSS feed?
Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also…
This is a exceptional post, but I was wondering how do I suscribe to the RSS feed?
Im glad I located this webpage, I couldnt obtain any information on this subject before. I also manage a niche site and in case you are ever interested in doing some guest writing for me if possible feel free to let me know, im always look for people to check out my weblog. Please stop by and leave a comment sometime!
I randomly browse blogs on the internet, and I discover your article to be very informational. I have already bookmark it on my browser, in order that I can view your blog post again later. Also, I’m questioning whether your weblog is open for hyperlink exchange, as I really want to alternate links with you. I don’t usually do this, however I hope that we can have a mutual hyperlink exchange. Let me know and have an incredible day!
Thanks I really needed this.