Add other ASP. net ajax Technologies

Source: Internet
Author: User

Add other ASP. net ajax Technologies

We can implement the <form> section similar to the one contained in TaskView. ascx. Furthermore, we can also describe each task item, but can convert a regular submission-based form into a form that supports AJAX technology. In this way, the edit and delete operations of task items can be implemented in the partial refresh state. This is explained in the sample code and will not be repeated here.

Next, I want to introduce how to add some scripts and add them to the UI of our sample program to create other HTML based on AJAX interaction. Specifically, I want to add a watermark effect to the text box. This effect provides a user-friendly prompt for user input. The watermark effect is displayed as long as there is no user input. When the user places the input focus in the text box, the watermark effect disappears.

Of course, Due to space limitations, we will not discuss the script itself too carefully. For more information about this script, see the source code of this article, but note that the watermark effect is implemented as a client Behavior of the ASP. net ajax framework that everyone may be familiar. Like any other behavior component, the text box used in our example is also associated with the DOM element, and it subscribes to related events caused by this element.

In traditional web form pages, I often directly use server controls that support AJAX functions, such as WatermarkExtender, and associate them with a server control. However, in this example, I use another extension method for rendering. Through this method, I can also create and initialize an instance of the script behavior component. The code snippet of the key part of the view after I update is provided below:

 
 
  1. <% RenderBeginAjaxForm(Url.Action("Add"),  
  2. new { Update="taskList, UpdateType="appendBottom",  
  3. Highlight="True",  
  4. Starting="startAddTask", Completed="endAddTask" }); %> 
  5. <input type="text" name="name" id="nameTextBox" /> 
  6. <% Ajax.Watermark("nameTextBox",  
  7. new { watermarkText="[What do you need to do?]",  
  8. watermarkCssClass="watermark"}); %> 
  9.  
  10. <input type="submit" name="addTask" value="Add Task" /> 
  11. <% RenderEndForm(); %> 

The above extension method is quite simple to implement. In fact, it calls the ready-made AJAX framework. The following code defines the WatermarkBehavior class:

 
 
  1. public static class WatermarkBehavior {  
  2. public static void Watermark(this AjaxHelper ajaxHelper,
    string id, object watermarkOptions) {  
  3. ajaxHelper.RegisterScript("~/Views/Scripts/Watermark.js");  
  4. ajaxHelper.RegisterScriptBehavior(id, "Ajax.Watermark", watermarkOptions);  
  5. }  

Of course, we can also control the above encoding in more detail, but here only shows the code snippets that provide the core part of the Script Function for collecting and registering, and generate them to the page, then, instantiate the behavior object and associate it with the corresponding DOM elements, and pass it to the selection provided by the view to customize the specific instance introduction to add ASP. other AJAX technologies.

  1. ASP. net mvc Web Application Project
  2. IIS6 ASP. net isapi request processing process
  3. Seven user management controls for ASP. NET controls
  4. RSA encryption for ASP. Net
  5. How to obtain database strings using ASP. NET

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.