In the previous "WebApp MVC," the "different" lightweight Internet application Development Framework describes the technical implementation of WEBAPP MVC and how to use it, and in this chapter it further sums up some of the details of using framework development and provides us with a correct way to develop specific features A total of three points were summed up, the specific contents are as follows:
1.URL Request page
1 Display page using nvelocity
2 special processing of Jqueryeasyui control data in the first page loading
2.Form form submission Data
1) Action Submission
2 data validation prior to action submission
3) using the Jqueryeasyui form control to submit
3.Ajax Request JSON data
1) using the Jqueryeasyui control to request data
2 using the Ajax method in jquery to request data
To explain the above three points together with the example code, we will review the framework of the implementation process diagram:
Instance 01:url Request page
1) Browser input url:http://localhost:11032/views/test/api.aspx?cmd=test_test01
2) TestController Controller code
public class Testcontroller:abstractjqbecontroller
{
public void test01 ()
{
Viewresult = Toview (@ "views\test\test01.htm");
}
}
3) views\test\test01.htm page code
Copy Code
<body>
<p> Instance 01:url Request page </p>
<p>hello world!</p>
</body>
Interface effect
The development of a page through the above code requires two steps, controller file writing and view file writing; First write a controller to receive the URL request, and then through the controller Toview (@ "views\test\test01.htm") method returns the view file Test01.htm, and why Toview method is able to talk view page is now out of use the views engine nvelocity, so the content of this section is "Use nvelocity display page"; then we'll see how the Dynamic Data is displayed on the page.
1) Browser input url:http://localhost:11032/views/test/api.aspx?cmd=test_test01
2) TestController Controller code
public class Testcontroller:abstractjqbecontroller
{
public void test01 ()
{
list<object> data = new list<object> ();
Data. ADD (New {id = 1, name = "option 1"});
Data. ADD (New {id = 2, name = "Option 2"});
Data. ADD (New {id = 3, name = "option 3"});
Data. ADD (New {id = 4, name = "Option 4"});
Data. ADD (New {id = 5, name = "option 5"});
Viewdata.add ("Combox_data", Tojson (data));
Viewresult = Toview (@ "views\test\test01.htm");
}
}
3) views\test\test01.htm page code
4) Right view page source code
Instance 02:form form Submit data
1. Submit data by Action of form
1) Browser input url:http://localhost:11032/views/test/api.aspx?cmd=test_test02
2) TestController Controller code
public void test02 ()
{
Viewresult = Toview (@ "views\test\test02.htm");
}
public void Test02_login ()
{
string name= formdata[' name '] ;
String pass = formdata[' pass '];
viewdata.add ("name", name);
viewdata.add ("Pass", pass);
viewresult = Toview (@) views\test\ Test02_loginsuccess.htm ");
}3) Interface Code
Test02.htm
<title> Untitled Page </title>
<script src= ". /.. /webplugin/jquery-1.8.0.min.js "type=" Text/javascript "></script>
<link rel= "stylesheet" type= text/css "href=". /.. /webplugin/jquery-easyui-1.4.1/themes/bootstrap/easyui.css ">
<link rel= "stylesheet" type= text/css "href=". /.. /webplugin/jquery-easyui-1.4.1/themes/icon.css ">
<script src= ". /.. /webplugin/jquery-easyui-1.4.1/jquery.easyui.min.js "type=" Text/javascript "></script>
<script src= ". /.. /.. /webplugin/jquery-easyui-1.4.1/locale/easyui-lang-zh_cn.js "type=" Text/javascript "></script>
<script src= ". /.. /.. /webplugin/jquerycommon2.5.js "type=" Text/javascript "></script>
<body>
<p> instance 02:form form submission Data </p>
<form id= "LoginForm" method= "post" action= "Api.aspx?cmd=test_test02login" >
<p> Username: <input id= "name" name= "name" type= "text"/></p>
<p> Password: <input id= "pass" type= "Name=" and "text"/></p>
<input id= "Submit1" type= "submit" value= "Login"/>
</form>
<script src= "Test.js" type= "Text/javascript" ></script>
</body>
test02_loginsuccess.htm4) interface Effect
2.action data validation prior to submission
For example: Pre-logon authentication username password cannot be null
1) Modify Test02.htm
<form id= "LoginForm" method= "post" action= "Api.aspx?cmd=test_test02login" "onsubmit=" Check (); " >2 JavaScript script Add check () method
function Check () {
if ($ ("#name"). Text () = "") {
Alert ("User name cannot be empty!") ");
return false;
if ($ ("#pass"). Text () = "") {
Alert ("Password cannot be blank!") ");
return false;
return true;
}3. Use Jqueryeasyui form control submission, equivalent to using AJAX to submit data
function Login () {
Formsubmit ("#loginform", {cmd: "Api.aspx?cmd=test_test02login"},function (ret) {
Window.location.href = "Api.aspx?cmd=test_loginsuccess";
});
}
instance 03:ajax request JSON data
1. Controller codepublic void test03 () { Viewresult = Toview (@ "views\test\test03.htm"); } public void Test03_ajaxdata () { list<object> data = new list<object> (); data. ADD (New {id = 1, name = "option 1"}); data. ADD (New {id = 2, name = "Option 2"}); data. ADD (New {id = 3, name = "option 3"}); data. ADD (New {id = 4, name = "Option 4"}); data. ADD (New {id = 5, name = "option 5"}); Jsonresult = Tojson (data); }2. Interface code
<body>
<p> Instance 03:jqueryeasyui control request data </p>
<p><input class= "Easyui-combobox" id= cb01 "name=" cc1 "data-options=" Valuefield: "id", TextField: "Name", URL : "Api.aspx?cmd=test_test03ajaxdata" "style=" width:200px; ></input></p>
<p><input class= "Easyui-combobox" id= cb02 "name=" CC2 "data-options=" Valuefield: "id", TextField: "Name" Style= "width:200px;" ></input></p>
<script src= "Test.js" type= "Text/javascript" ></script>
<script language= "JavaScript" >
$ (cbloaddata);
</script>
</body>3. Script code
function Cbloaddata () {
Simpleajax ({cmd: "Test_test03ajaxdata"},{},function (ret) {
$ ("#cb02"). ComboBox ("LoadData", ret);
});
}4. Interface effect
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
