When I first came into contact with Ajax, I thought it was amazing. I changed the page that needs to be refreshed every time I submitted it, and the whole page jitters to be the same as that of the desktop program.
So I have a great liking for it. I like to drop it in a certain corner of the web page. Moreover, it is so simple to use. You only need to drag two controls to make full use of its magical functions.
But soon after, when I knew that this method of directly dragging controls was not a real partial return, I immediately began to reject my previous practice. I did not like this kind of eye-catching thing.
I took the time to read several Ajax tutorials on webcast a few days ago. I finally learned how to use Ajax without using the updatepanel control. Although I only met one of the Ajax approaches, however, at least partial return is implemented. Here are some small achievements.
<body>
<form id="form1" runat="server">
<div>
<select id="DDLtype" name="D1" runat ="server">
<option></option> </select>
<select id="DDLarticle" name="D2">
<option></option>
</select>
</div>
</form>
</body>
Add the runat = "server" attribute to ddltype to obtain the item type data when loading the page ..
// The following attributes are required
[System. Web. Script. Services. scriptservice]
Public class webser: system. Web. Services. WebService
{
Public webser ()
{
}
// If a complex type such as dataset is returned (reference set reference), it must be stored on the web. In the config file.
// The ariticle class only contains simple data types.
[Webmethod]
Public icollection <Article> getarticles (INT typeid)
{
Companyentities Ne = new companyentities ();
VaR result = from P in NE. Articles
Where p. type. ID = typeid
Select new article
{
Id = P. ID,
Name = P. Name
};
Return result. asenumerable (). Cast <Article> (). tolist ();
}
}
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<select id="DDLtype" name="D1" runat ="server" >
<option></option>
</select>
<select id="DDLarticle" name="D2">
<option></option>
</select>
</div>
</form>
</body>
<SCRIPT type = "text/JavaScript">
// Getarticles is a ddltype onchange event Function
Function getarticles (DDL ){
VaR id = DDL. Options [DDL. selectedindex]. value;
// Webser is the class name of WebService,
// Getarticles is the function name in the webser class.
// Getarticlessucceed is the callback function called after the call is successful.
Webser. getarticles (ID, getarticlessucceed );
}
// After a successful return, the result parameter should be an array
Function getarticlessucceed (result ){
VaR DDL = Document. getelementbyid ("ddlarticle ");
DDL. Options. Length = 0;
For (I = 0; I <result. length; I ++ ){
VaR option = Document. createelement ("option ");
// Access data directly through attributes
Option. value = Result [I]. ID;
Option. Text = Result [I]. Name;
DDL. Options. Add (option );
}
}
</SCRIPT>
Get it done ....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
