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

Today, I will talk to you about how to add columns to the website in the production of MVC4. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Order

I. users

II. User groups

III. Columns

3.1 add columns

First add a [CategoryController] controller

Then I think my view, the first display should be the column type, here should be a drop-down box, users can choose "General column", "single-page column", "external links". Then you should first add an attribute to [CategoryController] to return a list of column types.

# region Attribute public List TypeSelectList {get {List _ items = new List (); _ items.Add (new SelectListItem {Text = CategoryType. General column. ToString (), Value = ((int) CategoryType. General column). ToString ()}); _ items.Add (new SelectListItem {Text = CategoryType. Single page column. ToString (), Value = ((int) CategoryType. Single page column). ToString ()); _ items.Add (new SelectListItem {Text = CategoryType. External link .ToString (), Value = ((int) CategoryType. External link) .ToString ()}); return _ items;} # endregion

Second, users should be able to choose the content model. What is the content model?

Is the content model the name of the model to which content can be added under this column? This model name corresponds to the model class in Models. In order to better express the concept of adding module "Module" to the system. The module is used to refer to the blocks used to achieve the corresponding functions in the system, like the news module, the article module, the message module, the picture module, the product module, the service module and so on. Each module corresponds to the corresponding model and controller to achieve the desired function. Users of preset modules in the system should be able to set on or off.

First, you should add a content model class.

Using System.ComponentModel.DataAnnotations;namespace Ninesky.Models {/ content module / public class Module {[Key] public int ModuleId {get; set;} / module name / [Required (ErrorMessage= "×")] [Display (Name= "module name")] public string Name {module Module model / [Required (ErrorMessage = "×")] [Display (Name = "module model")] public string Model {get; set;} / enable module / [Required (ErrorMessage = "×")] [Display (Name = "enable module")] public bool Enable {get; set } / description / / [Required (ErrorMessage = "×")] [Display (Name = "description")] public string Description {get; set;}}

Now that there is a module class, there should be a data processing class ModuleRepository of the module class. This function is left behind for the time being. First, the simplest implementation of the List (bool enable) function allows it to display a list of modules.

Using Ninesky.Models;using System.Collections.Generic;using System.Linq;namespace Ninesky.Repository {public class ModuleRepository {public IQueryable List (bool enable) {List _ module = new List (); _ module.Add (new Module {Name = "news module", Model = "News", Enable = true, Description = "news module"); _ module.Add (new Module {Name = "article module", Model = "Article", Enable = true, Description = "article module"}) Return _ module.AsQueryable ();}}

It's easy. The function of the module will be written later, first displaying two fixed modules in order to add a column.

Then we will add [ManageAdd] action to the controller later.

[AdminAuthorize] public ActionResult ManageAdd () {ModuleRepository _ moduleRsy = new ModuleRepository (); var _ modules = _ moduleRsy.List (true); List _ slimodule = new List (_ modules.Count ()); foreach (Module _ module in _ modules) {_ slimodule.Add (new SelectListItem {Text = _ module.Name, Value = _ module.Model);} ViewData.Add ("Model", _ slimodule); ViewData.Add ("Type", TypeSelectList); return View ();}

Then add add data processing function

[AdminAuthorize] [HttpPost] public ActionResult ManageAdd (Category category) {categoryRsy = new CategoryRepository (); if (categoryRsy.Add (category)) {Notice _ n = new Notice {Title = "column added successfully", Details = "you have successfully added [" + category.Name + "] column!" , DwellTime = 5, NavigationName = "column list", NavigationUrl = Url.Action ("ManageList", "Cayegory")}; return RedirectToAction ("ManageNotice", "Prompt", _ n) } else {Error _ e = new Error {Title = "failed to add column", Details = "failed to save to database while adding column", Cause = "system error", Solution = Server.UrlEncode ("return to add column page, enter correct information and contact webmaster again")}; return RedirectToAction ("ManageError", "Prompt", _ e);}}

Now it's time to do the view part.

Right-click on [ManageAdd] action to add a view

@ model Ninesky.Models.Category@ {ViewBag.Title = "ManageAdd"; Layout = "~ / Views/Layout/_Manage.cshtml";} list on the left

Add column @ using (Html.BeginForm ()) {@ Html.ValidationSummary (true) @ Html.LabelFor (model = > model.Type) @ Html.DropDownList ("Type") @ Html.ValidationMessageFor (model = > model.Type) @ Html.DisplayDescriptionFor (model = > model.Type) @ Html.LabelFor (model = > model.Name) @ Html.EditorFor (model = > model.Name) Html.ValidationMessageFor (model = > model.Name) @ Html.DisplayDescriptionFor (model = > model.Name) @ Html.LabelFor (model = > model.ParentId) @ Html.EditorFor (model = > model.ParentId) @ Html.ValidationMessageFor (model = > model.ParentId) @ Html.DisplayDescriptionFor (model = > model.ParentId) @ Html.LabelFor (model = > model.Model) @ Html.DropDownList ("Model") Html.ValidationMessageFor (model = > model.Model) @ Html.DisplayDescriptionFor (model = > model.Model) @ Html.LabelFor (model = > model.CategoryView) @ Html.EditorFor (model = > model.CategoryView) @ Html.ValidationMessageFor (model = > model.CategoryView) @ Html.DisplayDescriptionFor (model = > model.CategoryView) @ Html.LabelFor (model = > model.ContentView) @ Html.EditorFor (model = > model. ContentView @ Html.ValidationMessageFor (model = > model.ContentView) @ Html.DisplayDescriptionFor (model = > model.ContentView) @ Html.LabelFor (model = > model.Navigation) @ Html.EditorFor (model = > model.Navigation) @ Html.ValidationMessageFor (model = > model.Navigation) @ Html.DisplayDescriptionFor (model = > model.Navigation) @ Html.LabelFor (model = > model.Order) @ Html.EditorFor (model = > Model.Order) @ Html.ValidationMessageFor (model = > model.Order) @ Html.DisplayDescriptionFor (model = > model.Order)} @ section Scripts {@ Scripts.Render ("~ / bundles/jqueryval")}

Add id attributes to some to enable users to display different items when displaying different column types.

Add scripts at the bottom of ManageAdd.cshtml

Details (); $("# Type") .change (function () {Details ();}); function Details () {var v = $("# Type") .val (); if (v = "0") {$("# li_model") .show (); $("# li_categoryview") .show (); $("# li_contentview") .show (); $("# li_nav"). Hide () } else if (v = = "1") {$("# li_model"). Hide (); $("# li_categoryview"). Show (); $("# li_contentview"). Hide (); $("# li_nav"). Hide ();} else if (v = "2") {$("# li_model"). Hide (); $("# li_categoryview"). Hide (); $("# li_contentview"). Hide () ("# li_nav") .show ();}}

Look at it from the browser. There are still some problems in the parent column. It is conceived that there should be a drop-down box, and users can choose the existing column type as the general column as the parent column. You need a drop-down tree list, which is supposed to look like this, a combo box of a drop-down list and a property list box.

There is no control of this type in html. Jquery UI in mcv4 is a good library, which contains certain controls and can be extended by itself, but it lacks some things like data table (datagirdview), tree control (tree), tree combination control (combotree), etc., and the style of jqueryui is not easy to change, so I decided to discard jqueryui instead of easyui (it is more comprehensive and easier to control the style than jqueryui). Right-click on the reference and select manage NuGet package

In the installed packages-> all, select Jquery Ui and click Uninstall.

Go to http://www.jeasyui.com/ and select the latest version, create a new EasyUi folder in the / Scripts folder of the project, and copy the following folder in easyui to that folder.

Open App_Start\ BundleConfig.cs, delete jqueryui related items, and add

Bundles.Add (new ScriptBundle ("~ / bundles/EasyUi"). Include ("~ / Scripts/EasyUi/easyloader.js"); bundles.Add (new StyleBundle ("~ / EasyUi/icon"). Include ("~ / Scripts/EasyUi/themes/icon.css"))

Two items to make the document look as follows:

Using System.Web;using System.Web.Optimization;namespace Ninesky {public class BundleConfig {/ / for more information about Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles (BundleCollection bundles) {bundles.Add ("~ / bundles/jquery"). Include ("~ / Scripts/jquery- {version} .js"); bundles.Add (new ScriptBundle ("~ / bundles/EasyUi"). Include ("~ / Scripts/EasyUi/easyloader.js")) Bundles.Add (new ScriptBundle ("~ / bundles/jqueryval"). Include ("~ / Scripts/jquery.unobtrusive*", "~ / Scripts/jquery.validate*"); / / use the development version of Modernizr for development and information. Then, when you are ready for production, use the build tool on http://modernizr.com to select only the required tests. Bundles.Add (new ScriptBundle ("~ / bundles/modernizr"). Include ("~ / Scripts/modernizr-*"); bundles.Add (new StyleBundle ("~ / Skins/css"). Include ("~ / Skins/Default/Style.css"); bundles.Add (new StyleBundle ("~ / Skins/usercss"). Include ("~ / Skins/Default/User.css")) Bundles.Add (new StyleBundle ("~ / Skins/ManageCss"). Include ("~ / Skins/Default/Manage/Style.css"); bundles.Add (new StyleBundle ("~ / EasyUi/icon"). Include ("~ / Scripts/EasyUi/themes/icon.css");}

Easyui's combotree will be used here.

Access to the official document, the data format is

Tree Data Format

Every node can contains following properties:

Id: node id, which is important to load remote data

Text: node text to show

State: node state, 'open' or' closed', default is' open'. When set to 'closed', the node have children nodes and will load them from remote site

Checked: Indicate whether the node is checked selected.

Attributes: custom attributes can be added to a node

Children: an array nodes defines some children nodes

Then in the Models folder, the new Ui folder, which is used to control the data-related model, add the Tree class

Using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace Ninesky.Models.Ui {/ tree control data / public class Tree {/ Id / public int id {get; set;} / text / public string text {get; set;} / Node status: 'open' or' closed', default 'open'. / public string state {get; set;} / icon / public string iconCls {get; set;} / child node / public List children {get; set;}

Open the ~ / Scripts/EasyUi/themes/icon.css file

Add code at the bottom

.icon-general {background: url ('icons/ns_general.png') no-repeat! important;}

Be sure to add! important to adjust the priority of css. Easyui will add the icon-general class to the end of the list item, and the 'icons/ns_general.png' icon will not be displayed without this sentence.

Select a 16-16 chart and name it ns_general.png, and copy it to the following folder

Here you want to call the tree structure of the general column recursively: open CategoryRepository.cs. Add two functions at the bottom

/ column list / Model name / public IQueryable List (string model) {return dbContext.Categorys.Where (c = > c.Model = = model) .OrderBy (c = > c.Order) } / public List TreeGeneral () {var _ root = Children (0,0) .Select (c = > new Tree {id = c.CategoryId, text = c.Name, iconCls = "icon-general"}). ToList (); if (_ root! = null) {for (int I = 0; I)

< _root.Count(); i++) { _root[i] = RecursionTreeGeneral(_root[i]); } } return _root; } /// /// 普通栏目树形类表递归函数 /// /// /// private Tree RecursionTreeGeneral(Tree tree) { var _children = Children(tree.id, 0).Select(c =>

New Tree {id = c.CategoryId, text = c.Name, iconCls= "icon-general"}) .ToList (); if (_ children! = null) {for (int I = 0; I)

< _children.Count(); i++) { _children[i] = RecursionTreeGeneral(_children[i]); } tree.children = _children; } return tree; } 打开CategoryController，添加一个 [JsonTreeParent()] 返回可以做父栏目的栏目树列表。 #region json [AdminAuthorize] public JsonResult JsonTreeParent() { categoryRsy =new CategoryRepository(); var _children = categoryRsy.TreeGeneral(); if (_children == null) _children = new List(); _children.Insert(0, new Tree { id = 0, text = "无",iconCls="icon-general" }); return Json(_children); } #endregion 打开ManageAdd.cshtml,将@Html.EditorFor(model =>

Model.ParentId) is changed to.

Scripts and css references to reduce prices for easyui in @ section Scripts

@ section Scripts {@ Styles.Render ("~ / EasyUi/icon") @ Scripts.Render ("~ / bundles/EasyUi") @ Scripts.Render ("~ / bundles/jqueryval")}

OK, open a browser to test it.

You can add columns normally.

Today, I found a problem that no matter what the parent column announces, the submitted ParentId is 0, and the above "Open ManageAdd.cshtml and change @ Html.EditorFor (model = > model.ParentId) to." If there is a problem here, it should be changed to @ Html.TextBox ("ParentId", 0new {@ class = "easyui-combotree", data_options= "url:'" + Url.Action ("JsonTreeParent", "Category") + "'"}).

After the revision is normal, but after using easyui combotree, the parent column client verification is invalid, what is the reason, how to solve, know friends do not hesitate to advise!

After reading the above content, do you have any further understanding of how to add columns to the website in the production of MVC4? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.