ASP.NET MVC4+EF5+EasyUI+Unity2.x 주 입 된 백 엔 드 관리 시스템 의 프론트 페이지 프레임 워 크 구축 소스 공유

14530 단어 ASP.NETMVC4EF5EasyUIUnity2.x
처음에 우 리 는 일련의 해결 방안 을 가지 게 되 었 으 니,우 리 는 새로운 시스템 을 구축 하기 시작 할 것 이다.
사용자 의 체험 은 점점 중시 되 어야 합 니 다.이번 에는 좌우 바 입 니 다.왼쪽 은 시스템 메뉴 이 고 오른쪽 은 tabs 페이지 로 구 성 된 페이지 집합 입 니 다.모든 tab 는 단독으로 새로 고치 고 닫 을 수 있 습 니 다.왜냐하면 그들 은 iframe 이기 때 문 입 니 다.
일 을 잘 하려 면 반드시 그 그릇 을 먼저 이 롭 게 해 야 한다.다음 도구 가 필요 합 니 다.
Visual Studio 2012
MVC 4 for vs 2010 을 설치 하여 VS 2010 로 개발 할 수 있 지만 EF 5.0 을 사용 할 수 없 을 것 같 습 니 다.EF 4.4 버 전이 될 것 같 지만 큰 상관 이 없습니다.
MVC 4 는.NET Framework 4.5 에 마 운 트 됩 니 다.
좋아!
익숙 한 VS 를 열 고 빈 솔 루 션 을 만 듭 니 다.저 는 AppSolution 이라는 이름 을 지 었 습 니 다.라 이브 러 리 네 임 스페이스 는 App 과 시작 합 니 다.예 를 들 어 App.BLL,App.Web 등 이름 을 짓 고 멋 진 친 구 를 좋아 하 는 당신 이 사용 할 수 있 는 이름 으로 이름 을 지 을 것 입 니 다.
예 를 들 어 Joy.BLL,Jason.BLL,zhangsan.BLL,마음대로 하 세 요.그냥 BLL 해도 돼 요.
프로젝트 를 만 들 것 입 니 다.
1.MVC 4.0 의 App.admin 사이트 인터넷 옵션,Razor 보기 선택
　　
먼저 다운로드 Easyui 1.3.2:http://www.jeasyui.com/download/index.php
가장 높 은 버 전 은 1.3.4 입 니 다.저희 가 1.3.2 를 선택 한 것 은 1.3.2 이상 이 jquery 2.0 이기 때 문 입 니 다.
jquery 2.0 은 IE8 을 지원 하지 않 습 니 다.IE8 을 버 렸 다 면 더 높 은 버 전과 더 작은 js 라 이브 러 리 를 체험 할 수 있 습 니 다.(정부측 에서 그 가 이렇게 말 했다)
불필요 한 것 을 삭제 합 니 다.우리 가 원 하 는 것 이 있 기 때문에 보류 하고 easyui 를 해당 디 렉 터 리 에 복사 합 니 다.저 는 스 크 립 트 와 스타일 을 나 누 어 개방 하 는 것 을 좋아 합 니 다.
1.jquery.easyui.min.js 를 scripts 디 렉 터 리 에 넣 기
2.테마 themes 는 content 아래 에 놓 습 니 다.저 는 회색 과 파란색 주제 만 보류 합 니 다.다른 주 제 는 제 심미 에 한계 가 있 습 니 다.여러분 은 easyui 공식 에서 새로운 주 제 를 다운로드 할 수 있 습 니 다.
3.Images 폴 더 를 content 아래로 이동
4.Filters 파일 삭제
5.콘 텐 츠 디 렉 터 리 에 소 재 를 넣 고 저 는 이 프로젝트 에 사용 할 이미지 소 재 를 준 비 했 습 니 다.저희 가 추가 하기 에는 부족 합 니 다.
6.controllers 의 AccountController.cs,HomeController.cs 를 삭제 합 니 다.
7.View 보기 에 있 는 cshtml 를 삭제 합 니 다.
8.script 과 무관 하거나 압축 되 지 않 은 것 을 모두 지 웠 습 니 다.디 버 깅 이 필요 없다 고 생각 하기 때 문 입 니 다.나중에 문제 가 발생 하면 http Analyes 소프트웨어 등 다른 도구 로 디 버 깅 을 보조 합 니 다.
자,우리 건설 을 시작 합 시다.
아니면'빈'컨트롤 러 를 새로 만 들 고 index 보 기 를 추가 합 니까?
index 코드

<!DOCTYPE html>

<html>
<head>
 <title>Index</title>
 <meta name="viewport" content="width=device-width" />
 <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
 @Styles.Render("~/Content/css")
 @Styles.Render("~/Content/themes/blue/css")
 @Scripts.Render("~/bundles/home")
</head>
<body class="easyui-layout">
 <div id="OverTimeLogin" class="easyui-dialog" data-options="closed:true,modal:true">
 <iframe width="726px" scrolling="no" height="497px" frameborder="0" id="iOverTimeLogin"></iframe>
 </div>
 <div data-options="region:'north',border:false,split:true" style="height: 60px;">
 <div class="define-head">
  <div class="define-logo">
  <div id="LoginTopLine">System Manage</div>
  <div id="LoginBotoomLine">MVC4+EF5.0+EasyUI</div>
  </div>
  <div class="define-account">
   
  </div>
 </div>
 </div>
 <div data-options="region:'west',split:true,title:'    '" style="width: 200px; height:100%; padding-top: 2px; background-color:#fff; overflow:auto">
 <div id="RightTree" style=" background-color:#fff;">
  <div class="panel-loading">   ...</div>
 </div>
 </div>
 <div data-options="region:'south',border:false" style="height: 20px;">
 <div class="define-bottom">
  

 </div>
 </div>
 <div data-options="region:'center',border:false">
 <div id="mainTab" class="easyui-tabs" data-options="fit:true">
  <div title="    " data-options="closable:true" style="overflow: hidden; background:#fff">
  <iframe scrolling="auto" frameborder="0" src="" style="width: 100%; height: 100%;"></iframe>
  </div>
 </div>
 </div>
 <div id="tab_menu" class="easyui-menu" style="width: 150px;">
 <div id="tab_menu-tabrefresh" data-options="iconCls:'icon-reload'">
    </div>
 <div id="tab_menu-openFrame">
         </div>
 <div id="tab_menu-tabcloseall">
      </div>
 <div id="tab_menu-tabcloseother">
         </div>
 <div class="menu-sep">
 </div>
 <div id="tab_menu-tabcloseright">
      </div>
 <div id="tab_menu-tabcloseleft">
      </div>
 <div id="tab_menu-tabclose" data-options="iconCls:'icon-remove'">
    </div>
 <div id="menu" class="easyui-menu" style="width: 150px;">
 </div>
 </div>
</body>
</html>
여기 서 우 리 는[email protected]("~/Content/css")이 코드 들 을 보 았 습 니 다.이것 은 MVC 4 의 묶음 압축 기술 로 css 와 자바 script 을 페이지 에 압축 하여 출력 합 니 다.나 는 이미 다 했 으 니까 다 들 보기 만 하면 돼.구 글 의 원리 구성 도 가능 하 다.블 로그 원 의 많은 새우 들 도 답 을 내 놓 았 다.그 파일 은 AppStart 아래 BundleConfig.cs

$(function () {
  $('#tab_menu-tabrefresh').click(function () {
  /*        */
  var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
  $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src", url);
  });
  //         
  $('#tab_menu-openFrame').click(function () {
  var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
  window.open(url);
  });
  //    
  $('#tab_menu-tabclose').click(function () {
  var currtab_title = $('.tabs-selected .tabs-inner span').text();
  $('#mainTab').tabs('close', currtab_title);
  if ($(".tabs li").length == 0) {
   //open menu
   $(".layout-button-right").trigger("click");
  }
  });
  //    
  $('#tab_menu-tabcloseall').click(function () {
  $('.tabs-inner span').each(function (i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
   var t = $(n).text();
   $('#mainTab').tabs('close', t);
   }
  });
  //open menu
  $(".layout-button-right").trigger("click");
  });
  //        TAB
  $('#tab_menu-tabcloseother').click(function () {
  var currtab_title = $('.tabs-selected .tabs-inner span').text();
  $('.tabs-inner span').each(function (i, n) {
   if ($(this).parent().next().is('.tabs-close')) {
   var t = $(n).text();
   if (t != currtab_title)
    $('#mainTab').tabs('close', t);
   }
  });
  });
  //       TAB
  $('#tab_menu-tabcloseright').click(function () {
  var nextall = $('.tabs-selected').nextAll();
  if (nextall.length == 0) {
   $.messager.alert('  ', '     !', 'warning');
   return false;
  }
  nextall.each(function (i, n) {
   if ($('a.tabs-close', $(n)).length > 0) {
   var t = $('a:eq(0) span', $(n)).text();
   $('#mainTab').tabs('close', t);
   }
  });
  return false;
  });
  //       TAB
  $('#tab_menu-tabcloseleft').click(function () {

  var prevall = $('.tabs-selected').prevAll();
  if (prevall.length == 0) {
   $.messager.alert('  ', '     !', 'warning');
   return false;
  }
  prevall.each(function (i, n) {
   if ($('a.tabs-close', $(n)).length > 0) {
   var t = $('a:eq(0) span', $(n)).text();
   $('#mainTab').tabs('close', t);
   }
  });
  return false;
  });

 });
$(function () {
 /*        */
 $(".tabs li").live('contextmenu', function (e) {
 /*             */
 var subtitle = $(this).text();
 $('#mainTab').tabs('select', subtitle);
 //      
 $('#tab_menu').menu('show', {
  left: e.pageX,
  top: e.pageY
 });
 return false;
 });
});




function addTab(subtitle, url, icon) {
 if (!$("#mainTab").tabs('exists', subtitle)) {
 $("#mainTab").tabs('add', {
  title: subtitle,
  content: createFrame(url),
  closable: true,
  icon: icon
 });
 } else {
 $("#mainTab").tabs('select', subtitle);
 $("#tab_menu-tabrefresh").trigger("click");
 }
 $(".layout-button-left").trigger("click");
 //tabClose();
}
function createFrame(url) {
 var s = '<iframe frameborder="0" src="' + url + '" scrolling="auto" style="width:100%; height:99%"></iframe>';
 return s;
}


 $(function () {
 $(".ui-skin-nav .li-skinitem span").click(function () {
  var theme = $(this).attr("rel");
  $.messager.confirm('  ', '           ！', function (r) {
  if (r) {
   $.post("../../Home/SetThemes", { value: theme }, function (data) { window.location.reload(); }, "json");
  }
  });
 });
 });
index 의 스 크 립 트,이 홈 보기 의 스 크 립 트,그 는 tab 페이지 의 오른쪽 키 메뉴 를 통합 하여 시스템 에 통합 하 였 습 니 다.실행 하기 전에 Global.asax 에서 압축 을 사용 해 야 합 니 다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace App.Admin
{
 //   :      IIS6   IIS7        ，
 //     http://go.microsoft.com/?LinkId=9394801

 public class MvcApplication : System.Web.HttpApplication
 {
 protected void Application_Start()
 {
  AreaRegistration.RegisterAllAreas();

  WebApiConfig.Register(GlobalConfiguration.Configuration);
  FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  //    
  BundleTable.EnableOptimizations = true;
  BundleConfig.RegisterBundles(BundleTable.Bundles);
  AuthConfig.RegisterAuth();
 }
 }
}
BundleConfig.Register Bundles(BundleTable.Bundles)에서;전면 가입
//압축 사용
BundleTable.EnableOptimizations = true;
좋아,우리 효과 좀 보 자!

회색 테 마 를 사용 하려 면@Styles.Render("~/content/themes/blue/css")를 사용 하 십시오.
@Styles.Render("~/Content/themes/gray/css")로 수정 하면 됩 니 다.

사실 이 몇 가 지 는 할 말 이 없고,단지 시스템 을 위해 간단 한 틀 을 세 웠 을 뿐이다.easyui 로 몇 시간 안 걸 려 도 만 들 기 힘 들 지만 걱정 마 세 요.제 가 원 코드 를 준 비 했 습 니 다.
코드 다운로드다운로드 한 소스 코드 의 일부 학생 들 의 운행 에 문제 가 있 으 면 AppStart 의 BundleConfig.cs 가 변경 되 었 습 니 다.

using System.Web;
using System.Web.Optimization;

namespace App.Admin
{
 public class BundleConfig
 {
 //    Bundling      ，    http://go.microsoft.com/fwlink/?LinkId=254725
 public static void RegisterBundles(BundleCollection bundles)
 {

  bundles.Add(new ScriptBundle("~/bundles/common").Include(
   "~/Scripts/common.js"));

  bundles.Add(new ScriptBundle("~/bundles/home").Include(
   "~/Scripts/home.js"));
  bundles.Add(new ScriptBundle("~/bundles/account").Include(
   "~/Scripts/Account.js"));
  //easyui
  bundles.Add(new StyleBundle("~/Content/themes/blue/css").Include("~/Content/themes/blue/easyui.css"));
  bundles.Add(new StyleBundle("~/Content/themes/gray/css").Include("~/Content/themes/gray/easyui.css"));
  bundles.Add(new StyleBundle("~/Content/themes/metro/css").Include("~/Content/themes/metro/easyui.css"));


  bundles.Add(new ScriptBundle("~/bundles/jqueryfrom").Include(
   "~/Scripts/jquery.form.js"));

  bundles.Add(new ScriptBundle("~/bundles/easyuiplus").Include(
   "~/Scripts/jquery.easyui.plus.js"));

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
   "~/Scripts/jquery.validate.unobtrusive.plus.js"));

  //    Modernizr               。  ，    
  //      ，    http://modernizr.com                。
  bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
   "~/Scripts/modernizr-*"));

  bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));





 }
 }
}
코드:코드 는 전체 솔 루 션 을 업로드 하지 않 았 습 니 다.압축 을 풀 고 기 존의 라 이브 러 리 만 참조 하면 됩 니 다.안의 소재 에 대해 모 르 는 것 은 저 에 게 물 어 보 셔 도 됩 니 다.안에 앞으로 사용 할 모든 소 재 를 포함 하고 있 습 니 다.시스템 의 동 화 를 삭제 하지 말고 수정 할 수 있 습 니 다.
예 쁜 로그 인 페이지
작성 자:YmNets
출처:http://ymnets.cnblogs.com/
사례 분석 ASP 업로드 구멍 침입 실전 및 확장
Android UI 디자인 및 개발 구현 애플 리 케 이 션 은 한 번 만 안내 인터페이스 를 시작 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage