I recently used the jquery UI to work, and to be honest I didn't have to use this jquery UI framework to write a bad place to get a lot of pointers. First of all, we use this dialog this pop-up layer method thing, first define a, of course you can also directly use the properties of this dialog method to achieve, I do for this dialog method to do a change and delete. Controller method:////// Public Dictionary information collection //////// Public ActionResult Vocabulary (int id=1) {var List = Comm_dicttypebll.getmodel (). OrderByDescending (A = a.kid). ToList (). Topagedlist (ID, 10); if (Request.isajaxrequest ())//partialpage1 refers to the partial view return Partialview ("_partialpage1", List); Return View (List);} Detail View PartialPage1 HTML code @using webdiyer.webcontrols.mvc@model pagedlist
| number |
category code |
category name |
category abbreviation |
phonetic code |
Wubi Code |
Enable Identity |
Notes |
Edit |
@foreach (var item in Model) {
| |
@Html. Di Splayfor (ModelItem = Item. TypeCode) |
@Html. displayfor (ModelItem = Item. TypeName) |
@Html. displayfor (ModelItem = Item. Typeshortname) |
@Html. displayfor (ModelItem = Item. Pycode) |
@Html. displayfor (ModelItem = Item. Wbcode) |
@Html. displayfor (ModelItem = Item. ifuse) |
@Html. displayfor (ModelItem = Item. Remark) |
edit |
}
@Ajax. Pager (Model, new pageroptions {pageindexparametername = "id", Showpageindexbox = true, Pageindexboxtype = PageIndex Boxtype.dropdownlist, Showgobutton = false}, new Mvcajaxoptions {Updatetargetid = "articles"}) main Page vocabulary view @Html. Partial ("_partialpage1", Model) @section scripts{@{html.registermvcpagerscriptresource ();}}
| Category Code |
|
Enable Flag |
IsWhether |
| Category name |
|
Category abbreviation |
|
| Pinyin code |
|
Wubi yards |
|
| Note |
|
|
Category code:
Category name:
Category abbreviation:
Pinyin code:
Wubi Code:
Enable labeling: IsWhether
Notes <textarea cols="3" rows="5" id="SRemark" name="SRemark"></textarea>Note Mvcpager This third-party plugin will be added to the template page @RenderBody () @Scripts. Render ("~/bundles/jquery") @RenderSection ("Scripts", required:false) otherwise it will be an error, let's look at the jquery UI dialog pop-up layer to add data $ ("#NewAdd"). Click (function () {$ ("#dialog-message"). Dialog ({width:600, heigth:600, Dialogclass:true, Modal:true, but Tons: {"Save": function (e) {if ($ ("#TypeCode"). val () = = "") {Alert ("category code cannot be empty"); E.preventdefault (); $ ("#TypeCode"). focus (); } else if ($ ("#TypeName"). val () = = "") {alert ("the category name cannot be null"); E.preventdefault (); $ ("#TypeName"). focus (); } else if ($ ("#TypeShortName"). val () = = "") {alert ("the category abbreviation cannot be empty"); E.preventdefault (); $ ("#TypeShortName"). focus (); } else if ($ ("#PYCode"). val () = = "") {alert ("name phonetic code cannot be empty"); E.preventdefault (); $ ("#PYCode"). focus (); } else if ($ ("#WBCode"). val () = = "") {alert ("name Wubi code cannot be empty"); E.preventdefault (); $ ("#WBCode"). focus (); } else if ($ ("#txttar"). val () = = "") {alert ("Comment cannot be empty"); E.preventdefault (); $ ("#txttar"). focus (); } else {var TypeCode = $ ("#TypeCode"). Val (); var TypeName = $ ("#TypeName"). Val (); var typeshortname = $ ("#TypeShortName "). Val (); var Pycode = $ ("#PYCode"). Val (); var Wbcode = $ ("#WBCode"). Val (); var Txttar = $ ("#txttar"). Val (); var ifuse = $ ("#IfUse"). Val (); $.post ("/memorial/addlist", {typecode:typecode, typename:typename, Typeshortname:typeshortname, Pycode:pycode, Wbcode:wbcode, Txttar:txttar, Ifuse:ifuse,}, function (data) {if (data = = "OK") {$ ("#TypeCode"). attr ("Value", ""); $ ("#TypeName"). attr ("Value", ""); $ ("#TypeShortName"). attr ("Value", ""); $ ("#PYCode"). attr ("Value", ""); $ ("#WBCode"). attr ("Value", ""); $ ("#txttar"). attr ("Value", ""); Alert ("Add success"); Location.replace (location); } else if (data = = "NO") {alert ("Add failed"); return false;}}); }}, "Close": function () {$ (this). dialog ("Close"),}},}); Delete data $ ("#Rome"). Click (function () {if ("Input[name=chec") . Is (': checked ') = = True) {if (Confirm ("Confirm delete? ")) {var str =" "; $ ("input[name=chec]:checkbox:checked"). each (function () {str + = $ (this). Val () + ":";}); $.post ("/memorial/romecolist", {kid:str}, function (data) {if (data = = "OK") {alert ("Delete succeeded! "); Window.location.reload (TRUE); } else {alert ("delete failed");}}); }} else {alert ("Please select one or more data sources"); return;}}); The backstage of this place accepts the method string kid= request["Kid"]; Kid= Kid. Substring (0, kid.) LENGTH-1); string[] id = kid. Split (': '); Modify the data $ (function () {$ (". Butt"). Click (function () {var Comm_dicttype = $ (this); $ ("#Skid"). attr ("value", comm_ Dicttype.attr ("Kid")); $ ("#STypeCode"). attr ("Value", Comm_dicttype.attr ("TypeCode")); $ ("#STypeName"). attr ("Value", Comm_dicttype.attr ("TypeName")); $ ("#STypeShortName"). attr ("Value", Comm_dicttype.attr ("Typeshortname")); $ ("#SPYCode"). attr ("Value", Comm_dicttype.attr ("Pycode")); $ ("#SWBCode"). attr ("Value", Comm_dicttype.attr ("Wbcode")); $ ("#SIfUse"). attr ("Value", Comm_dicttype.attr ("ifuse")); $ ("#SRemark"). attr ("Value", Comm_dicttype.attr ("Remark")); $ ("#window"). Dialog ({title: "Modify Information", width:500, height:420, Modal:true, buttons: {"Modified": function () {var kid = $ ("#Sk ID "). val (); var TypeCode = $ ("#STypeCode"). Val (); var TypeName= $ ("#STypeName"). Val (); var typeshortname = $ ("#STypeShortName"). Val (); var Pycode = $ ("#SPYCode"). Val (); var Wbcode = $ ("#SWBCode"). Val (); var ifuse = $ ("#SIfUse"). Val (); var Remark = $ ("#SRemark"). Val (); $.post ("/memorial/newupdate", {kid:kid, Typecode:typecode, Typename:typename, Typeshortname:typeshortname, pycode:p Ycode, Wbcode:wbcode,ifuse:ifuse, Remark:remark}, function (data) {if (data = = "OK") {Alert ("modified successfully"); Location.replace (location); } else {alert ("modification Failed");}}); }, "Undo": Function () {$ (this). dialog ("Close");},},}); }); The above code is the use of dialog
Personal Learning jquery UI Dialog +mvcpager experience
