The Ajax functions we implemented in the previous step work fast and well. Sometimes it is so fast that the user does not notice that the RSVP link has been updated to a new text. To make the output text more explicit, we add a simple animation to the updated information to get the user's attention. The default ASP. Net MVC Project template already contains jquery-a very good and popular open-source JavaScript Library (also supported by Microsoft ). Jquery provides a large number of functions, including an HTML Dom selection and result library. To use jquery, you must first reference the jquery script. Because jquery is used almost everywhere on the entire website, we add script references to the site. Master page so that all pages can be used. <Script SRC= "/Scripts/jQuery-1.3.2.js" Type= "Text/JavaScript"> </Script> Tip: Make sure that you have installed the Javascript smart prompt patch for vs 2008 SP1, which provides rich smart prompts for JavaScript files (including jquery. You can download from here: http://tinyurl.com/vs2008javascripthotfix written with jquery Code The common $ () JavaScript method is often used to query one or more HTML elements using the CSS selector. For example, $ ("# rsvpmsg") selects all HTML elements whose IDs are rsvpmsg, $ (". Something") selects all HTML elements of CSS classes with "something. You can even write more advanced queries, such as using $ ("input [@ type = radio] [@ checked]") to return all the selected radio buttons. Once you select elements, you can call methods, such as hiding them: $ ("rsvpmsg "). hide (); in this example, we will define a simple JavaScript function named animatersvpmessage. The function is: select the <div> element of rsvpmsg and adjust the text size in an animation. The following code increases the text size within 400 milliseconds. < Script Type = "Text/JavaScript"> Function Animatersvpmessage (){ $ ( "# Rsvpmsg" ). Animate ({fontsize: "1.5em" },400 ); } </ Script > After Ajax is called, the preceding JavaScript function is called by passing its name to the Ajax. actionlink () auxiliary method (through the onsuccess event attribute of ajaxoptions ). <% = Ajax. actionlink ( " Register the banquet " , "Register" , "RSVP" , New {Id = model. dinnerid }, New Ajaxoptions {Updatetargetid = "Rsvpmsg" , Onsuccess = "Animatersvpmessage" }) %> Now, when you click the [register this dinner party] link and the Ajax call is complete, the returned message will become larger in animation. In addition to onsuccess events, the ajaxoptions object exposes onbegin, onfailure, and oncomplete events, as well as many other attributes and useful options.
Simplified-
Refactoring RSVP partial
View The Details View template is a little too long, and it is a little difficult to understand. To improve code readability, create a new partial view-rsvpstatus. ascx to encapsulate all the RSVP view code in the Details View. Right-click the \ views \ dinners folder and choose add-> View menu item. Set the dinner object as a strong viewmodel, and copy/paste the content from the details. aspx view to RSVP.
Next, create another partial view-editanddeletelinks. ascx, which encapsulates the code for editing and deleting links. You can also set the dinner object as a strong viewmodel and copy/paste-edit and delete the logic from the details. aspx view.
In this way, the bottom of the Details View template contains two calls to the HTML. renderpartial () method: <% Html. renderpartial ( "Editanddeletelinks" ); %> <% Html. renderpartial ( "RSVP" ); %> The following is a list of files in the/views/dinners directory after two partial view templates are added:
This makes the code more concise and easy to read and maintain.
