Use Asp.net MVC, jquery, and jquery UI to build Ajax-based Ria applications.

Use Asp.net MVC, jquery, and jquery UI to build Ajax-based Ria applications.
Asp.net MVC, a beginner the day before yesterday, found that some things are more convenient to do with web form. however, Asp.net MVC also has its advantages. it would be too convenient to combine jquery and jquery UI for Ajax-based applications !! The following is a graphical description:
This time I made a tree control. It should be noted that all the demos were made using Ajax, and the addition, deletion, and modification were not refreshed, and the skin could be easily changed. The following is the final result:

Create a category. Use effect to work with Flex. It is very convenient to make this effect.

Edit category... same open dialog

Delete function.

The following is another theme... it is very convenient to change theme... change CSS to OK

This is a black topic. There are many official downloads ..

It seems so strong ..

Next, let's briefly explain how to use its Ajax functions. The following functions use nbearlite. I have always liked nbearlite ..
To add data, we wrote the following controller:
[Acceptverbs (httpverbs. Post)] public contentresult create (formcollection f) {int pid = 0; If (! Int. tryparse (F ["parentid"], out PID) pid = 0; always ways. DB. insert (tables. tree ). addColumn (tables. tree. PID, pid ). addColumn (tables. tree. title, F ["categoryname"]). addColumn (tables. tree. description, F ["Description"]). execute (); Return content ("created successfully! ");}
We usually write down the following view
<Button id = "BTN-createcategories" class = "UI-button UI-state-default UI-corner-all"> new Category </button> <br/>
<Div id = "createcategories" style = "display: none;" Title = "new category"> <p> new Category </P> <% using (HTML. beginform ("CREATE", "categories", forpolichod. post, new {id = "FRM-createcategories", name = "FRM-createcategories"}) {list <otistreenode> treelist = This. model as list <otistreenode >;%> <fieldset> <label for = "categoryname"> categoryname </label> <% = html. textbox ("categoryname") %> <label for = "Description"> description </label> <% = html. textbox ("Description") %> <label for = "parentid"> parent class </label> <% = html. treeselect (treelist, "parentid", "select parent class", "") %> </fieldset ><%}%> </div>
As you can see, if you add a submit button, the above will work. maybe the Controller should return an actionresult and do some try {} catch {}.. but the basic structure is like this ..
Next we will add the Ajax function and use the jquery UI ..
Introduce related JavaScript and CSS as follows:
<Link href = "/scripts/jquery/themes/darkness/ui.all.css" rel = "stylesheet" type = "text/CSS"/> <style type = "text/CSS"> label, input {display: block;} body {font-size: 12px;} input. text {margin-bottom: 12px; width: 95%; padding :. 4em;} fieldset {padding: 0; Border: 0; margin-top: 25px ;}. UI-button {margin: 2px 4px; padding: 2px; text-Decoration: none; cursor: pointer; position: relative; text-align: center ;}. UI-dialog. UI-state-highlight ,. UI-dialog. UI-state-error {padding: 4px ;}. portlet {padding: 4px 8px ;}. portlet-header {padding: 4px; margin-bottom: 6px ;} </style> <SCRIPT src = "/scripts/jquery/jquery-1.3.1.js" type = "text/JavaScript"> </SCRIPT> <SCRIPT src = "/scripts/jquery/UI/ UI. core. JS "type =" text/JavaScript "> </SCRIPT> <SCRIPT src ="/scripts/jquery/UI. draggable. JS "type =" text/JavaScript "> </SCRIPT> <SCRIPT src ="/scripts/jquery/UI. resizable. JS "type =" text/JavaScript "> </SCRIPT> <SCRIPT src ="/scripts/jquery/UI. dialog. JS "type =" text/JavaScript "> </SCRIPT> <SCRIPT type =" text/JavaScript "src ="/scripts/jquery/UI/effects. core. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "src ="/scripts/jquery/UI/effects. highlight. JS "> </SCRIPT> <SCRIPT type =" text/JavaScript "src ="/scripts/jquery/external/bgiframe/jquery. bgiframe. JS "> </SCRIPT>
What we need to do now is to capture the post of the traditional form and submit it in Ajax mode.

The first step is to collect the data to be post. So we wrote the following JavaScript code. For convenience, I added it to jquery's global function ..
Jquery. otisajax = {getpostdata: function (fromid) {var Ob = new object (); $ (fromid + ": Input "). each (function (I) {ob [$ (this ). ATTR ("name")] = $ (this ). val () ;}); return {data: OB, Action: $ (fromid ). ATTR ("action"), method: $ (fromid ). ATTR ("method") };}, returntype: {text: "text", HTML: "html", script: "script", JSON: "JSON"}, post: function (fromid, callback, Rtype) {var pinfo = This. getpostdata ( Fromid); $. Post (pinfo. Action, pinfo. Data, callback, Rtype = undefined? This.returntype.html: Rtype );}};
Jquery. otisajax. the getpostdata function is to capture all the data to be post in the form, and capture the URL and method to post. jquery's powerful selection function can be easily implemented.
The function of jquery. otisajax. Post is to call jquery. Post.
OK. Now let's start building the dialog box and implement Ajax submission. The following is all the code.
$ (Function () {$ ("# createcategories "). dialog ({bgiframe: True, autoopen: false, modal: True, buttons: {'new category': function () {$. otisajax. post ("# FRM-createcategories", function (data, textstatus) {alert (data); If (textstatus = "success") {$ ("# createcategories "). dialog ('close'); gettree () ;}// $ ("# createcategories "). dialog ('close') ;}, "text") ;}, 'cancel': function () {$ (this ). dialog ('close') ;}}); $ ("# BTN-createcategories "). click (function () {$ ("# createcategories "). dialog ('open ');});
});

This is the simple code for adding data with Ajax functions. Because it is a demo, n cases are not considered. It can be seen that this approach is very simple and convenient ..
All the above DEMO code. If the friend is interested, please email me. Thank you!