Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to submit the form of the MVC+jQuery development BBPX S system. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Jquery is an excellent Java crackpot framework. MVC is a design pattern that forcibly separates the input, processing, and output of the application. Today we will talk about how to use JQuery+MVC to handle form submission.

The desired effect:

1. Form validation before submission

2. Form validation

3. Feedback after submission

Ok, let's talk about how it works first.

In the foreground, action specifies the processing page that accepts the form. Method, here we just say post. If you submit the form with ajax, naturally xxx.aspx is the url of the request. The callback after the ajax request is the result of the submission of the response form (error, success), and the feedback we submit is represented by a lightbox. Don't go so far as to use alert (""); it's embarrassing.

We introduce a plug-in for Jquery, http://www.malsup.com/jquery/form/#api, which is a slightly well-known plug-in that is easy to use. You can search for its usage.

So what we need to do is:

1. The use of jquery.form.js

2. The realization 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 }} / / enter validation this.inputValidate () / / form without url is a pseudo-submission of if (url = = undefined | | url = = "") {$("#" + id) .submit (function () {if ($("#" + id). SubmitValidate () = = false) return false; / / execute callback callback () if the verification is successful });} else {this.ajaxForm ({url: url, beforeSubmit: function (a, f, o) {/ / submit 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, which is the use of the form plug-in, and there are several methods that we need to implement. (inputValidate,submitValiedate,ajaxMsg)

Since it is an ajax submission, we need to give the client a feedback and then present it in Lightbox.

One: we define a JsonMessage class

Public class JsonMessage {public int result {get; set;} / / 0 error 1 correct 2 prompt 3 warn public string title {get; set;} / / Lightbox window title public string content {get; set;} / / message details public string redirect {get; set;} / / where does it jump automatically after popping up? Public object callBackData {get; set;} / / data required by the client, such as a new id or the whole model}

MVC returns Json (jsonmsg1), and the client's callback can get the json format of this object.

(note: if the form submission is attached, the JsonResult format is not recognized. I haven't studied exactly what's going on, but in this case you can only response a json string, and it's convenient to use System.Web.Script.Serialization.JavaScriptSerializer to serialize objects.)

Second: we write an ajaxMsg to achieve lightbox, this is my own Lightbox, relatively crude, if you do not like, you can also use some well-known plug-ins.

Code:

(function ($) {$. Fn.showMsg = function (model, callback, fail) {var me = this; if (me.length = = 0) {$("body") .append (""); $(me.selector) .showMsg (model, callback); return;} if (model = = undefined) return; model.content = model.result = = 1 & & model.content = = undefined? "the operation was successful!" : model.content; me.html (model.content); me.removeClass (). AddClass ("message_" + model.result) .show (100); if (model.result1 = = 1 & & fail! = undefined) {fail (model);} if (model.result = = 1 & & callback! = undefined) {callback (model);} setTimeout (function () {if (me.css ("display")! = "none") {me.hide }, 3000); return me;}}) (jQuery)

The style of Ajax messages can be done with CSS, including the location of div can be realized by writing js code in css.

I don't know if anyone can understand my callback here. I'll talk about the situation of his use. In practice, I also have an ajaxWin to implement the pop-up window. After the form in the pop-up window is submitted, we usually need to close the pop-up window, and then update some data (such as refresh the list). At this point, you need the callback action after submit. In addition, I still use the redirect attribute at present. Ha ha, my previous system requires a lot of jump processing, these jumps are also no refresh, there is an array to record the access address. Backward and forward can be achieved.

Three: well, Lightbox has been implemented, and it can also show out various types of information.

There is still form validation left. In fact, form validation has a lot to do. I can't do this one by one. So far, only some simple verification has been done. More complex error prompts will be achieved in the future. In fact, this is all manual work, the above did not ask me to do it lazily.

Verify that I am giving some custom attributes to control, and then determine whether its value is legal.

Code:

/ / enter validation $.fn.inputValidate = function () {$("input,select,textarea", this) .each (function () {var me = $(this); var isnull = me.attr ("isnull") | | "1"; var dvalue = me.attr ("dvalue"); me.focus (function () {if (this.value = ") $(this). InputRemove ();})) Me.keyup (function () {if (this.value = ") $(this). InputRemove ();}); / ① non-null check if (isnull = =" 0 ") {me.blur (function () {if ($(this). Val () =" | | $(this). Val () = = dvalue) $(this) .inputError ("this must be filled in!") ; else $(this). InputRight ();} / ② regular registration onchange event var regexValue = me.attr ("regex"); if (regexValue! = undefined) {var thisValue = me.val (); me.blur (function () {var re = new RegExp (regexValue, "ig"); if (this.value! = "&! re.test (this.value)) {me.inputError (" incorrect format! ") ; return result = false;} else me.inputRight ();} / ③ minimum length var minLength = me.attr ("minlength") | | 0; if (minLength! = undefined) minLength = parseInt (minLength); me.blur (function () {if (me.val ()! = null) if (me.val (). Length < minLength) {me.inputError ("length cannot be less than" + minLength);}}) / / ④ other});}; / / submit verification $.fn.submitValidate = function () {var result = true; $("input:visible,select:visible,textarea:visible", this) .each (function () {var me = $(this); var thisValue = "" If (me.attr ("type") = = "radio" | | me.attr ("type") = = "checkbox") {thisValue = $("input [name='" + this.name + "']: checked") .val ();} else thisValue = me.val () / / determine whether it is illegal / / whether ① is required and cannot be empty or default value if (me.attr ("isnull") = = "0") {if (thisValue = "" | | (thisValue! = "& thisValue = = me.attr (" dvalue ")) {me.inputError (" this item must be filled in! ") ; return result = false;} else me.inputRight ();} / ② whether the format attribute is regex regular if (thisValue! = "") {var reValue = $(this) .attr ("regex"); if (reValue! = undefined) {re = new RegExp (reValue, "ig"); if (! re.test (thisValue)) {me.inputError ("incorrect format!") ; return result = false;} else me.inputRight ();}); return result;}; $.fn.inputError = function (msg) {this.inputRemove (); / / this.focus (); $("span", this.parent ()). Hide (); this.parent (). AddClass ("focus"). Append ("+ (msg | |') +") } $.fn.inputRight = function (msg) {this.inputRemove (); / / this.focus (); $("span", this.parent ()). Hide (); this.parent (). AddClass ("focus"). Append ("+ (msg | |') +");} $. Fn.inputRemove = function () {this.removeClass ("focus"); $(".right, .error", this.parent ()). Remove () ("span", this.parent ()) .show ();}

In every method, we should consider the performance and efficiency of power generation. It is not easy to have both. Through the analysis of the author of this article, I hope it will be helpful to you.

The above is the editor for you to share the development of MVC+jQuery Banner S system how to submit the form, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.