Home > Developer > ASP

Use ASP. NET and AJAX to solve the problem of manual HTML Splicing

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Sys. UI. DataView

To solve the problem of displaying data, we need to use a brand new client control, namely Sys. UI. DataView (DataView for short. We will use DataView to replace the human-hand HTML part mentioned in the previous article and use it to iteratively generate a li element in ul. Therefore, it seems that DataView is used as a Repeater. In fact, the function of DataView is similar to that of ListView with DetailsView.

If you bind an Array to DataView, it is displayed as a ListView. Similar to the LayoutTemplate of ListView, it can also define the overall layout of the control display, and only a small part of the iterative output. For example, compile a table with thead and only iterate the tr output after thead. In this regard, DataView and ListView are exactly the same. The only difference is that the client has no controls such as DataPager, so DataView must display the data of the entire Array at a time.

If you bind a single Object to DataView, it will be displayed as a DetailsView. This allows you to use two detailsviews to make the classic Master-Details display mode, which is the same as that of ListView and DetailsView on the server. Of course, you can't expect DataView to automatically analyze each data item and map the corresponding HTML template like DetailsView. Therefore, you need to manually write the HTML template, but at least that is to write a template in HTML. When writing a template, you can enjoy all the benefits of IDE. during maintenance, you can easily understand the HTML you (or others) wrote.

JavaScript syntax

Next, we need to put DataView into practical applications. First, let's talk about how to instantiate a DataView using JavaScript. Those who have experience writing ASP. net ajax client code should not be unfamiliar with $ create, because DataView inherits from Sys. UI. Control and we can still instantiate it with $ create. However, before that, we need to write the corresponding HTML:

Reference content is as follows:

<ul id="itemTemplate" class="sysTemplate">
            <li>
            <span class="award">{{ Award }}</span>
            <span class="winner">{{ Winner }}</span>
            <span class="film">{{ Film }}</span>
            </li>
            </ul>

Then we can create controls based on the HTML element itemTemplate:

Reference content is as follows:

$ Create (Sys. UI. DataView ,{
DataSource: new Sys. Data. AdoDataSource (),
ServiceUri: "WebDataService. svc ",
Query: "OscarWinners"
},{},{}, $ Get ("itemTemplate "));

Now, the results displayed on the page are exactly the same as the previous HTML version, but we do not need to maintain the HTML code embedded in JavaScript anymore.

Declarative syntax

If you think the above practice is not good enough, you need to write a $ create in pageLoad (), then the declarative syntax may be exactly what you need. You should remember that a long time ago, when ASP. net ajax was also called Atlas, there was already a declarative syntax design, that is, xml-script. For some reason, Microsoft gave up the design, and now the declarative syntax is back, and the design is better than the previous xml-script. If you do not need $ create, you only need to do this to instantiate a DataView through declarative Syntax:

Reference content is as follows:

<Body
Xmlns: sys = "javascript: Sys"
Xmlns: dataView = "javascript: Sys. UI. DataView"
Sys: activate = "*">
<Ul id = "itemTemplate" class = "sysTemplate"
Sys: attach = "dataView"
DataView: datasource = "{new Sys. Data. AdoNetDataSource ()}}"
DataView: serviceuri = "WebDataService. svc"
DataView: query = "OscarWinners">
<Li>
<Span class = "award" >{{ Award }}</span>
<Span class = "winner" >{{ Winner }}</span>
<Span class = "film" >{{ Film }}</span>
</Li>
</Ul>
</Body>

The code we need to change includes declaring the relevant xmlns on the body element, ing the namespace in JavaScript to HTML, or you can understand it as ing to XML/XHTML.

Use the sys: activate = "*" statement to make ASP. net ajax knows that it needs to explain all declarative syntaxes on the page and activate the corresponding components. change the attributes, events, and references that were originally passed to the instance during $ create initialization to the declarative syntax and write them directly on the definition of HTML elements. after these three steps, we can change the component originally created using $ create to be created using declarative syntax.

Summary

DataView allows us to use HTML templates to avoid various problems caused by manual HTML splicing. Meanwhile, declarative syntax allows us to declare client components just like declaring server-side controls. Although in ASP. net ajax 4.0 Preview 3 still has small bugs in these features. For example, I want to use declarative syntax to create an InPlaceEditoBehavior that I wrote myself. This is no problem during the initialization phase, however, a script error is thrown when the object is destroyed on the page.

As I think ASP. net ajax 4.0 Preview 4 will soon come out, I am not going to study Preview 3 in depth. When Preview 4 comes out, I will take a good look at the source code.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
why to use asp net html to asp net converter asp net ajax client side framework failed to load asp net ajax control toolkit how to use dataset in asp net asp net manual how to use in asp net
Related Article
ASP. NET core combined with consul cluster &docker to rea...
ASP. NET Core SignalR uses a generic hub to gracefully invoke...
ASP. NET Core 2.0 leverages Masstransit integrated RABBITMQ
Integration testing of ASP. NET Core Webapi using Xunit
CKEDITOR + CKFINDER image upload configuration (C #/asp.net/php)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More