真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

MVC4制作中網(wǎng)站如何開發(fā)添加欄目-創(chuàng)新互聯(lián)

今天就跟大家聊聊有關MVC4制作中網(wǎng)站如何添加欄目,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據(jù)這篇文章可以有所收獲。

寶山網(wǎng)站建設公司創(chuàng)新互聯(lián)公司,寶山網(wǎng)站設計制作,有大型網(wǎng)站制作公司豐富經驗。已為寶山上千家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿網(wǎng)站制作要多少錢,請找那個售后服務好的寶山做網(wǎng)站的公司定做!



一、用戶
二、用戶組
三、欄目

3.1添加欄目
首先添加【CategoryController】控制器,


那么我想我的視圖里,首先顯示的應該是欄目類型,這里應該是一個下拉框,用戶可以選擇“一般欄目”,“單頁欄目”,“外部鏈接”。那么首先應該在【CategoryController】添加一個屬性,用來返回欄目類型列表。

#region Attribute
 public List TypeSelectList
 {
  get
  {
  List _items = new List();
  _items.Add(new SelectListItem { Text = CategoryType.一般欄目.ToString(), Value = ((int)CategoryType.一般欄目).ToString() });
  _items.Add(new SelectListItem { Text = CategoryType.單頁欄目.ToString(), Value = ((int)CategoryType.單頁欄目).ToString() });
  _items.Add(new SelectListItem { Text = CategoryType.外部鏈接.ToString(), Value = ((int)CategoryType.外部鏈接).ToString() });
  return _items;
  }
 }
 #endregion

其次,用戶應該可以選擇內容模型,內容模型是什么?


內容模型就是這個欄目下可以添加內容的模型名稱?這個模型名稱對應的就是Models中間的模型類。為了更好的表述在系統(tǒng)中添加模塊“Module ”的概念。模塊用來指系統(tǒng)中用來實現(xiàn)相應功能的塊,想新聞模塊,文章模塊,留言模塊,圖片模塊,產品模塊,服務模塊等等,每個模塊對應相應的模型和控制器,用來實現(xiàn)設想中的功能。系統(tǒng)中預置的模塊用戶應該可以設置啟用還是關閉。


第一應該添加內容模型類

using System.ComponentModel.DataAnnotations;

namespace Ninesky.Models
{
 /// 
 /// 內容模塊
 /// 
 public class Module
 {
 [Key]
 public int ModuleId { get; set; }
 /// 
 /// 模塊名稱
 /// 
 [Required(ErrorMessage="×")]
 [Display(Name="模塊名稱")]
 public string Name { get; set; }
 /// 
 /// 模塊模型
 /// 
 [Required(ErrorMessage = "×")]
 [Display(Name = "模塊模型")]
 public string Model { get; set; }
 /// 
 /// 啟用模塊
 /// 
 [Required(ErrorMessage = "×")]
 [Display(Name = "啟用模塊")]
 public bool Enable { get; set; }
 /// 
 /// 說明
 /// 
 [Required(ErrorMessage = "×")]
 [Display(Name = "說明")]
 public string Description { get; set; }

 }
}

既然有模塊類,就應該有模塊類的數(shù)據(jù)處理類ModuleRepository,這塊功能暫時留在后面來寫,先最簡單的實現(xiàn)List(bool enable)函數(shù)讓其能顯示模塊列表。

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 = "新聞模塊", Model = "News", Enable = true, Description = "新聞模塊" });
  _module.Add(new Module { Name = "文章模塊", Model = "Article", Enable = true, Description = "文章模塊" });
  return _module.AsQueryable();
 }
 }
}

簡單吧。模塊功能以后再寫吧,先為了添加欄目顯示兩個固定的模塊,
 那么后續(xù)我們要在控制器中添加[ManageAdd]action

[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();
 }

然后添加添加數(shù)據(jù)處理函數(shù)


[AdminAuthorize]
 [HttpPost]
 public ActionResult ManageAdd(Category category)
 {
  categoryRsy = new CategoryRepository();
  if (categoryRsy.Add(category))
  {
  Notice _n = new Notice { Title = "添加欄目成功", Details = "您已經成功添加[" + category.Name + "]欄目!", DwellTime = 5, NavigationName = "欄目列表", NavigationUrl = Url.Action("ManageList", "Cayegory") };
  return RedirectToAction("ManageNotice", "Prompt", _n);
  }
  else
  {
  Error _e = new Error { Title = "添加欄目失敗", Details = "在添加欄目時,未能保存到數(shù)據(jù)庫", Cause = "系統(tǒng)錯誤", Solution = Server.UrlEncode("
  • 返回添加欄目頁面,輸入正確的信息后重新操作
  • 聯(lián)系網(wǎng)站管理員
  • ") };   return RedirectToAction("ManageError", "Prompt", _e);   }  }

    現(xiàn)在開始做視圖部分了。
    在[ManageAdd]action上點右鍵添加視圖,

    @model Ninesky.Models.Category
    
    @{
     ViewBag.Title = "ManageAdd";
     Layout = "~/Views/Layout/_Manage.cshtml";
    }
    
    
     
     左側列表
          添加欄目    @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") }

    這里給一些

  • 添加id屬性,實現(xiàn)用戶在顯示不同的欄目類型的時候顯示不同的項目。
     在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();
     }
     }
    

    從瀏覽器中看一下。父欄目這里還有些問題,設想中這里應該是一個下拉框,用戶可以選擇已存在欄目類型為一般欄目的欄目做父欄目。這里需要下拉樹形列表,設想中應該是這個樣子,是一個下拉列表和屬性列表框的組合框。


    MVC4制作中網(wǎng)站如何開發(fā)添加欄目

    html中沒有這種類型的控件,mcv4 中帶的jquery UI是一個比較好的庫,本身包含一定的控件,并且可以自己擴展,但是他缺少一些像,數(shù)據(jù)表(datagirdview),樹形控件(tree),樹形組合控件(combotree)等,且jqueryui的式樣也不太好變換,決定丟棄jqueryui,而是用easyui(相對jqueryui功能更全面,更容易控制式樣),在“引用”上點右鍵選擇管理NuGet程序包

    MVC4制作中網(wǎng)站如何開發(fā)添加欄目

    在已安裝的包->全部,選擇Jquery Ui點擊卸載。


    去http://www.jeasyui.com/選在新版本,在項目的/Scripts文件夾中新建EasyUi文件夾,將easyui中的一下文件夾復制到該文件夾。

     MVC4制作中網(wǎng)站如何開發(fā)添加欄目

    打開App_Start\BundleConfig.cs,刪除jqueryui相關項,添加


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

    兩項,使該文檔看起來如下:

    using System.Web;
    using System.Web.Optimization;
    
    namespace Ninesky
    {
     public class BundleConfig
     {
     // 有關 Bundling 的詳細信息,請訪問 http://go.microsoft.com/fwlink/?LinkId=254725
     public static void RegisterBundles(BundleCollection bundles)
     {
      bundles.Add(new ScriptBundle("~/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*"));
    
      // 使用 Modernizr 的開發(fā)版本進行開發(fā)和了解信息。然后,當你做好
      // 生產準備時,請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
      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的combotree。
     查閱了官方文檔,數(shù)據(jù)格式為
    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


    那么在Models文件夾里新家Ui文件夾,該文件夾用來控件數(shù)據(jù)相關的模型,添加Tree類

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace Ninesky.Models.Ui
    {
     /// 
     /// 樹形控件數(shù)據(jù)
     /// 
     public class Tree
     {
     /// 
     /// Id
     /// 
     public int id { get; set; }
     /// 
     /// 文本
     /// 
     public string text { get; set; }
     /// 
     /// 節(jié)點狀態(tài):'open'或'closed',默認'open'。
     /// 
     public string state { get; set; }
     /// 
     /// 圖標
     /// 
     public string iconCls { get; set; }
     /// 
     /// 子節(jié)點
     /// 
     public List children { get; set; }
     }
    }

    打開~/Scripts/EasyUi/themes/icon.css文件


    在底部添加代碼


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

    切記一定記得加!important來調整css的優(yōu)先級。easyui會將icon-general這個類添加在列表項的最后,如果不加這句'icons/ns_general.png'圖標將不會顯示。


    選擇一個16*16的圖表命名為ns_general.png,并復制到一下文件夾

    MVC4制作中網(wǎng)站如何開發(fā)添加欄目

    這里要用遞歸的方式調取一般欄目的樹形結構:打開CategoryRepository.cs。在底部添加兩個函數(shù)

    /// 
     /// 欄目列表
     /// 
     /// 模型名稱
     /// 
     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;
     }
     /// 
     /// 普通欄目樹形類表遞歸函數(shù)
     /// 
     /// 
     /// 
     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)改為 .


    在@section Scripts中減價easyui的腳本和css引用


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

    OK,打開瀏覽器測試一下

    MVC4制作中網(wǎng)站如何開發(fā)添加欄目

    可以正常添加欄目。


    今天發(fā)現(xiàn)一個問題無論父欄目宣布選什么,提交的ParentId為0,上面“打開ManageAdd.cshtml,將@Html.EditorFor(model => model.ParentId)改為 .” 這里有問題,應改為:@Html.TextBox("ParentId",0,new {@class ="easyui-combotree",data_options="url:'"+Url.Action("JsonTreeParent", "Category")+"'" })。


    修改后正常了,但是使用easyui combotree后,父欄目客戶端驗證無效了,這個是什么原因,如何解決,知道的朋友不吝賜教!


    看完上述內容,你們對MVC4制作中網(wǎng)站如何添加欄目有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。


    文章題目:MVC4制作中網(wǎng)站如何開發(fā)添加欄目-創(chuàng)新互聯(lián)
    分享URL:http://weahome.cn/article/dsiecd.html

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部

  • <abbr id="aogyw"><center id="aogyw"></center></abbr>
    <strike id="aogyw"><center id="aogyw"></center></strike>