Mvc+jquery Development B/s System (ii) Form binding

The more complex form of logic is more cumbersome to bind, and it's all about writing code yourself. And the simple we can write a generic for processing. No repetition of XXX is required. Text = "xxx".

MVC has its own automatic mapping function, where we use jquery to traverse controls for binding.

Anyone who has developed a system with an ASP knows that the previous value for the form is Request.Form ("ControlName"), with name rather than ID.

So our form cannot be created without the element's name value. In order to be able to write a common method, we agreed that all elements of the name is "cName" format, "C" + "field name", ID casually.

Because the dictionary of JS is case-sensitive, our names are also case-sensitive, including the list bindings in the previous section.

Code

$.fn.bindForm = function(model) {
　　　 if (model == undefined || model == null) {
　　　　　　　 return;
　　　 }
　　　 var formId = this.attr("id");
　　　 $("input,textarea,select", "#" + formId).each(function() {
　　　　　　　 var cname = $(this).attr ("name");
　　　　　　　 var cid = $(this).attr("id");

　　　　　　　 if (cname == "")
　　　　　　　　　　　 return;
　　 　　　　　 if (cid == "") {
　　　　　　　　　　　 cid = $(this)[0].tagName + "[name='" + cname + "']";
　　　　　　　　　　　 $(this).attr("id", cname);
　　　　　　　 } else
　　　　　　　　　　 　 cid = "#" + cid;
　　　　　　　 $(cid).bindControl(model[cname.replace ("c", "")], formId);
　　　 });
　　　 return this;

Code

$.fn.bindcontrol = function (value, formid) {
if (value = = undefined)
return this;
Value = Value.tostring ();
Formid = Formid | | "";
if (Formid!= "")
Formid = "#" + Formid + "";

Switch (this.attr ("type")) {
Case "Select-one"://dropdownlist
This[0].selectedindex = 0;
$ ("option[value= '" + Value + "']", this). attr ("selected");
var isselected = false;
This.children (). each (function () {
if (This.value = = value) {
This.selected = true;
IsSelected = true;
Return
}
});
if (!isselected)
This[0].selectedindex = 0;
Break
Case "Select-multiple"://listbox
This.children (). each (function () {
var arr = value.split (', ');
for (var i = 0; i < arr.length; i++) {
if (This.value = = Arr[i]) {
This.selected = true;
}
}
});
Break
Case "checkbox"://checkboxlist
Radio
if (Value.indexof (', ') = = 1) {
$ (formid + "input[name= '" + this.attr ("name") + "']"). each (function () {
if (This.value = = value) {
$ (this). attr ("Checked", true);
Return
}
});
}
Multiple selection
else if (this.attr ("type") = = ' checkbox ') {
var arr = value.split (', ');
for (var i = 0; i < arr.length; i++) {
$ (formid + "input[name= '" + this.attr ("name") + "']"). each (function () {
if (this.value = = arr [i]) {
This.checked = true;
}
});
}
}
Break
Case "Radio"://radiobuttonlist
$ (formid + "input[name= '" + this.attr ("name") + "']"). each (function () {
if (This.value = = value) {
This.checked = true;
Return
}
});
Break
Default://normal
This.val (value);
Break
}

return this;
}

It's easier to bind a form.

$ ("#form1"). Bindform (<%=json (ViewData ["model"])%>); In a simple word, the value is automatically bound.

It is also easy to bind a control $ ("#controlId"). Bindcontrol (value);

In fact, in actual development, we will often encounter cascading DropDownList, so that when we bind to the specific control to perform binding, and trigger his event. This is called two-way binding and is not yet automated.