Mouse Atlas Tour (6): Hands-on lab 2 second experiment, using Atlas to declare a block to call Web Services

Source: Internet
Author: User
If you have not performed the first experiment, please do it first. This experiment describes how to use the Atlas announcement block to call web services instead of writing JS scripts, we should remember that in our first experiment, we used JS scripts to call methods in Web Services. Now we should not write that JS script, I don't know why I directly use the Atlas announcement block to call Web Services. I personally think this method is not as simple as the above method (using JS scripts.
Exercise 1: Create an Asp.net Content Page
In this part of the experiment, you will create an Asp.net content page with the same results and controls as in Experiment 1.
1. Create a content page, right-click the default. Master created in the solution manager experiment, select add content page, and name it Helloworlddeclarative. aspx.
2. Switch
Code View, delete the two contentplaceholderid attribute values are not main Element. In the <% @ page command line, set the title attribute to "Atlas Experiment 2"
3. Add the control to the content page. In Add some of the following control labels in the element.

<Form action = "">

<Div>

Search

<Input id = "searchkey" type = "text"/>

<Input id = "searchbutton" type = "button" value = "Search"/>

</Div>

</Form>

<HR style = "width: 300px"/>

<Div>

<Span id = "Results"> </span>

</Div>
 If we switch to the design view at this time, we will see that the design view is the same as the page we did in Experiment 1.

Exercise 2: Create an atlas announcement block to call the web service. In this part of the experiment, create an atlas announcement block tag, you will be able to call the same web service as lab 1 without writing JS Code.
1. In the Code view, in the <asp: content> element, follow the tag you just created </div> and write the following code:
<SCRIPT type = "text/XML-script">

<Page xmlns: script = "http://schemas.microsoft.com/xml-script/2005">

<References>

 

</References>

<Components>

 

</Components>

</Page>

</SCRIPT>
The Atlas announcement block uses the standard XHTML <SCRIPT> MARK. Of course, its type attribute value is text/XML-script. This attribute value is also the only identifier that determines whether it is an atlas announcement block. The root element of the Atlas announcement block is <page>. It contains all the other elements in the Atlas announcement block and has its own namespace, let's take a look at the XML and XHTML documents. Next, the <references> elements and <Components> elements involve the two main parts of the Atlas announcement block: Which JS script file will be used (from the JS script library of Atlas ), interface components associated.
2. In this example, add the following two JS files to the <references> element:
<Add src = "scriptlibrary/atlasui. js"/>

<Add src = "scriptlibrary/atlascontrols. js"/>
In the <Components> element, add a <textbox> element, a <servicemethod> element, a <button> element, and a <label> element. The Code is as follows:

<Components>

<Textbox id = "searchkey"/>

 

<Servicemethod id = "helloservice" url = "helloworldservice. asmx"

Methodname = "helloworld">

<Bindings>

<Binding datacontext = "searchkey" datapath = "text"

Property = "Parameters" propertykey = "query"/>

</Bindings>

<Completed>

<Invokemethod target = "resultsbinding"

Method = "evaluatein"/>

</Completed>

</Servicemethod>

 

<Button targetelement = "searchbutton">

<Click>

<Invokemethod target = "helloservice" method = "INVOKE"/>

</Click>

</Button>

 

<Label targetelement = "Results">

<Bindings>

<Binding id = "resultsbinding" datacontext = "helloservice"

Datapath = "response. Object" property = "text"

Automatic = "false"/>

</Bindings>

</Label>

</Components>

The UI element of Atlas is defined as a child element of the <Components> element.
Use the ID attribute to associate <textbox> with the Textbox Control we wrote before the page.
<Button> mark the button on the page to call the remote method,Targetelement = "searchbutton" determines that the id value on the page is the searchbutton button to call the remote method. The <click> element determines that the button action on the page is to click the event. In hisIn the <invokemethod> sub-element, its target attribute specifies the ID of <servicemethod> we just defined above.
<Servicemethod> indicates the URL of the Web service to be called. The file name is:Helloworldservice. asmx

That is, the Web service we created in Experiment 1. The <servicemethod> element also provides the name of the web service method to be called and detailed information about the method. In his <bindings> tag, the value of the control he specified will be submitted to the remote method as a parameter. In the <completed> tag, specify what will be done after the remote method is complete. The <method> attribute specifies a local Atlas method.Evaluatein is used to obtain the value returned from the server and assign the value to the local object <label>, which is specified through the target, meanwhile, the targetelement attribute of <label> is associated with the span of the page control whose ID value is results. The <bindings> sub-element of <label> specifies how to bind the return value from the remote method to the <span> element on the page.
The code after completion is as follows:

<% @ Page Language = "C #" masterpagefile = "~ /Default. Master "Title =" Atlas Experiment 2 "%>
<Asp: Content ID = "content3" contentplaceholderid = "Main" runat = "server">
<Form action = "">
<Div>
Search
<Input id = "searchkey" type = "text"/>
<Input id = "searchbutton" type = "button" value = "Search"/>
</Div>
</Form>
<HR style = "width: 300px"/>
<Div>
<Span id = "Results"> </span>
</Div>
<SCRIPT type = "text/XML-script">
<Page xmlns: script = "http://schemas.microsoft.com/xml-script/2005">
<References>
<Add src = "scriptlibrary/atlasui. js"/>
<Add src = "scriptlibrary/atlascontrols. js"/>
</References>
<Components>
<Textbox id = "searchkey"/>
<Servicemethod id = "helloservice" url = "helloworldservice. asmx"
Methodname = "helloworld">
<Bindings>
<Binding datacontext = "searchkey" datapath = "text"
Property = "Parameters" propertykey = "query"/>
</Bindings>
<Completed>
<Invokemethod target = "resultsbinding"
Method = "evaluatein"/>
</Completed>
</Servicemethod>

<Button targetelement = "searchbutton">
<Click>
<Invokemethod target = "helloservice" method = "INVOKE"/>
</Click>
</Button>

<Label targetelement = "Results">
<Bindings>
<Binding id = "resultsbinding" datacontext = "helloservice"
Datapath = "response. Object" property = "text"
Automatic = "false"/>
</Bindings>
</Label>

</Components>
</Page>
</SCRIPT>

</ASP: content>

We now set him to the master page and press F5 to run it. Oh, my God, the mouse just left the button and the result is displayed below !!!

Although the question was answered, I still felt depressed and found that he was not able to understand Experiment 1 easily ~~~~~~

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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