MVC + jQuery development B/S system: Form submission (1)

JqueryIs an excellent protocol Cr protocol pt framework.MVCIs a design pattern that forcibly separates the input, processing, and output of an application. Today we will talk about how to use JQuery + MVC to process form submission.

Expected results:

1. Form Verification before submission

2. Form Verification

3. Submitted feedback

OK. Let's talk about how it works.

The front-end <form action = 'xxx. aspx 'method = 'post'> </form> specifies the processing page for accepting forms. Method Here we only talk about post. If you submit a form using ajax, xxx. aspx is the request url. The callback after the ajax request is the submission result of the Response Form (error, success). The feedback we submit is represented by a float layer (lightbox. Instead of using alert (""); in this way, too many bytes are very busy.

We introduced a Jquery plug-in http://www.malsup.com/jquery/form/#api which is a slightly famous plug-in for ease of use. You can search for its usage.

What we need to do is:

1. Use of jquery. form. js

2. Implementation of lightbox

3. How to verify

Code:

 
 

  
  
$. Fn. submitForm = function (args)
  
  
{
  
  
Var url, id, callback, before;
  
  
Id = this. attr ("id ");
  
  
If (typeof (args) = "string ")
  
  
{
  
  
Url = args;
  
  
Before = undefined;
  
  
Callback = undefined;
  
  
}
  
  
Else
  
  
{
  
  
Args = args | new Object ();
  
  
Url = args. url | this. attr ("action ");
  
  
If (typeof (args) = "function ")
  
  
{
  
  
Callback = args;
  
  
}
  
  
Else
  
  
{
  
  
Before = args. before;
  
  
Callback = args. callback;
  
  
}
  
  
}
  
  
// Input verification
  
  
This. inputValidate ();
  
  
// If the form does not have a url, It is a pseudo-commit.
  
  
If (url = undefined | url = "")
  
  
{
  
  
$ ("#" + Id). submit (function (){
  
  
If ($ ("#" + id). submitValidate () = false)
  
  
Return false;
  
  
// Call back if the verification is successful.
  
  
Callback ();
  
  
});
  
  
}
  
  
Else
  
  
{
  
  
This. ajaxForm ({
  
  
Url: url,
  
  
BeforeSubmit: function (a, f, o)
  
  
{
  
  
// Submit for verification
  
  
If ($ ("#" + id). submitValidate () = false)
  
  
Return false;
  
  
If (before! = Undefined & before () = false ){
  
  
Return false;
  
  
}
  
  
O. dataType = "json ";
  
  
},
  
  
Success: function (data ){
  
  
If (data = "" | data = null)
  
  
{
  
  
Return false;
  
  
}
  
  
$ ("# MyMsg"). showMsg (data, callback );
  
  
Return false;
  
  
}
  
  
});
  
  
}
  
  
Return this;
  
  
};
 
 

The above method is very simple, that is, the use of the form plug-in, there are several methods we need to implement. (InputValidate, submitValiedate, ajaxMsg)
Since ajax is used for submission, we need to give the client a feedback and then present it with Lightbox.