好看的小说,性爱有声小说在线收听

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

MVC3快速搭建Web應用(二)

上一篇文章發(fā)布后MVC3快速搭建Web應用(一)，自己又仔細讀了數(shù)遍，感覺一是文筆太差，二是描述邏輯比較混亂，客觀原因是涉及到東西其實蠻多的，那三個步驟不可能在一篇短短的文章中就可以描述清楚。此篇筆者將盡量更加詳盡一些。另外需要說明一點的是，本文默認讀者：

熟悉ASP.NET MVC；Razor語法；熟悉javascript；實體框架。

Web應用不像winform應用，要想讓用戶得到更流暢更舒適的體驗，方法之一就是模擬winform的窗口操作，使用戶在瀏覽器中也能像桌面一樣舒服。在界面框架方面我們有大家最熟悉的jquery ui，有Ext等等，經(jīng)過一系列的篩選，我們最終決定使用easyui，文檔教程例子都比較全面的一個js ui框架。首先我們來看看用到的js文件

 
 
 
 
  
  
  
   jquery主文件 
  
  
  
   easy ui主文件 
  
  
  
   校驗組件  
  
  
  
   表單組件 
  
  
  
   easyui的中文化 
  
  
  
   校驗組件的中文化

我們把它添加到mvc的Shared/_Layout.cshtml中。這樣我們的項目所有Layout=null的視圖都擁有了easyui支持。

在MVC3中，當你右鍵添加一個控制器時，向導會讓你選擇：

其中模版我們選擇使用實體框架并生成相關actions與views，Model選擇你實體框架中對應的表名（類名），DataContext選擇上下文類

Views引擎選擇Razor，高級選項里的兩個勾都去掉，因為我們不需要引用內(nèi)置的腳本庫，也不需要選擇layout（不選擇layout,MVC默認該view使用Shared/_Layout.cshtml，也就是剛才我們添加js文件link的那個文件)。

確認上一篇中你下載的t4模版放進了它應該存在的地方（最好備份一下原始的），當你點擊Add時，vs會自動在Controllers下面添加相應的控制器，在views文件夾下添加Create、Edit、Delete、Details、Index五個文件。下面我們一一查看他們的內(nèi)容：

#p#

控制器中，action已經(jīng)自動幫你添加完畢

 
 
 
 
  
  
  
  　　　　private BsmisEntities db = new BsmisEntities(); 
  
  
  
          // 
  
  
  
          // GET: /User/ 
  
  
  
  
  
  
  
          public ViewResult Index() 
  
  
  
          { 
  
  
  
              return View(); 
  
  
  
          } 
  
  
  
  
  
  
  
          // 
  
  
  
          // GET: /User/Create 
  
  
  
          public ActionResult Create() 
  
  
  
          { 
  
  
  
              return View(); 
  
  
  
          }  
  
  
  
  
  
  
  
          // 
  
  
  
          // POST: /User/Create 
  
  
  
          [HttpPost] 
  
  
  
          public ActionResult Create(T_User t_user) 
  
  
  
          { 
  
  
  
              JsonResult result = new JsonResult(); 
  
  
  
              result.Data = true; 
  
  
  
              try
  
  
  
              { 
  
  
  
  
  
  
  
                  if (t_user.Enable == null) 
  
  
  
                      t_user.Enable = 0; 
  
  
  
  
  
  
  
                  db.T_User.AddObject(t_user); 
  
  
  
  
  
  
  
                  db.SaveChanges(); 
  
  
  
              } 
  
  
  
              catch (Exception ee) 
  
  
  
              { 
  
  
  
                  result.Data = ee.Message; 
  
  
  
              } 
  
  
  
              return result; 
  
  
  
          } 
  
  
  
  
  
  
  
          // 
  
  
  
          // GET: /User/Edit/5 
  
  
  
          [OutputCache(Location = OutputCacheLocation.None)] 
  
  
  
          public ActionResult Edit(int id) 
  
  
  
          { 
  
  
  
              T_User t_user = db.T_User.Single(t => t.UserID == id); 
  
  
  
              ViewBag.DepartmentID = new SelectList(db.T_DepartmentInfo, "DepartmentID", "Code", t_user.DepartmentID); 
  
  
  
              return View(t_user); 
  
  
  
          } 
  
  
  
  
  
  
  
          // 
  
  
  
          // POST: /User/Edit/5 
  
  
  
  
  
  
  
          [HttpPost] 
  
  
  
          [OutputCache(Location = OutputCacheLocation.None)] 
  
  
  
          public ActionResult Edit(T_User t_user) 
  
  
  
          { 
  
  
  
              JsonResult result = new JsonResult(); 
  
  
  
              result.Data = true; 
  
  
  
              try
  
  
  
              { 
  
  
  
                  db.T_User.Attach(t_user); 
  
  
  
                  db.ObjectStateManager.ChangeObjectState(t_user, EntityState.Modified); 
  
  
  
                  db.SaveChanges(); 
  
  
  
              } 
  
  
  
              catch (Exception ee) 
  
  
  
              { 
  
  
  
                  result.Data = ee.Message; 
  
  
  
              } 
  
  
  
              return result; 
  
  
  
  
  
  
  
          } 
  
  
  
  
  
  
  
          // 
  
  
  
          // POST: /User/Delete/5 
  
  
  
          [HttpPost, ActionName("Delete")] 
  
  
  
          public ActionResult DeleteConfirmed(int id) 
  
  
  
          {  
  
  
  
  　　　　　　　JsonResult json=new JsonResult(); 
  
  
  
  　　　　　　　　json.Data=true; 
  
  
  
  　　　　　　　　try
  
  
  
  　　　　　　　　{            　　T_User t_user = db.T_User.Single(t => t.UserID ==id); 
  
  
  
              　　db.T_User.DeleteObject(t_user); 
  
  
  
              　　db.SaveChanges(); 
  
  
  
  　　　　　　　　} 
  
  
  
  　　　　　　　　catch(Exception ee) 
  
  
  
  　　　　　　　　{ 
  
  
  
  　　　　　　　　　　json.Data=ee.Message; 
  
  
  
  　　　　　　　　} 
  
  
  
  　　　　　　　　return json;        } 
  
  
  
  
  
  
  
  
  
  
  
          ///  
  
  
  
          /// 數(shù)據(jù)顯示、分頁信息 
  
  
  
          ///  
  
  
  
          ///  
  
  
  
          ///  
  
  
  
          ///  
  
  
  
          public JsonResult List(int page, int rows) 
  
  
  
          { 
  
  
  
              var q = from u in db.T_User 
  
  
  
                      join d in db.T_DepartmentInfo on u.DepartmentID equals d.DepartmentID 
  
  
  
                      orderby u.UserID 
  
  
  
                      select new
  
  
  
                          { 
  
  
  
                              UserID = u.UserID, 
  
  
  
                              UserName = u.UserName, 
  
  
  
                              Address = u.Address, 
  
  
  
                              Birth = u.Birth, 
  
  
  
                              DepartmentID = u.DepartmentID, 
  
  
  
                              DepartmentName = d.Name, 
  
  
  
                              Enable = u.Enable, 
  
  
  
                              Gendar = u.Gendar, 
  
  
  
                              IDCardNumber = u.IDCardNumber, 
  
  
  
                              LastAccessIP = u.LastAccessIP, 
  
  
  
                              LastAccessTime = u.LastAccessTime, 
  
  
  
                              LogonTimes = u.LogonTimes, 
  
  
  
                              Password = u.Password, 
  
  
  
                              PostCode = u.PostCode, 
  
  
  
                              RealName = u.RealName, 
  
  
  
                              Tel = u.Tel, 
  
  
  
                              Province = u.Province, 
  
  
  
                              City = u.City, 
  
  
  
                              Area = u.Area 
  
  
  
                          }; 
  
  
  
  
  
  
  
  
  
  
  
              var result = q.Skip((page - 1) * rows).Take(rows).ToList(); 
  
  
  
              Dictionary json = new Dictionary(); 
  
  
  
              json.Add("total", q.ToList().Count); 
  
  
  
              json.Add("rows", result); 
  
  
  
  
  
  
  
              return Json(json, JsonRequestBehavior.AllowGet); 
  
  
  
          }

這些action分別對應create、delete、edit、index視圖（detail我們一般情況下不需要它，所以我的模版里沒有寫對應的生成代碼）你可以比較一下它與原生的模版生成的代碼之間的區(qū)別。后期我們還會在控制器里添加一些譬如檢查名稱是否重名之類的action

 
 
 
 
  
  
  
  [OutputCache(Location = OutputCacheLocation.None)] 
  
  
  
          public JsonResult CheckRealNameExist(string RealName, int UserID) 
  
  
  
          { 
  
  
  
              JsonResult result = new JsonResult(); 
  
  
  
              result.JsonRequestBehavior = JsonRequestBehavior.AllowGet; 
  
  
  
  
  
  
  
              result.Data = false; 
  
  
  
              try
  
  
  
              { 
  
  
  
                  if (UserID == 0) 
  
  
  
                  { 
  
  
  
                      if (db.T_User.Any(p => p.RealName == RealName)) 
  
  
  
                      { 
  
  
  
                          return result; 
  
  
  
                      } 
  
  
  
  
  
  
  
                  } 
  
  
  
                  else
  
  
  
                  { 
  
  
  
                      if (db.T_User.Any(p => ((p.UserID != UserID) && (p.RealName == RealName)))) 
  
  
  
                      { 
  
  
  
                          return result; 
  
  
  
                      } 
  
  
  
                  } 
  
  
  
              } 
  
  
  
              catch (Exception) 
  
  
  
              { 
  
  
  
                  return result; 
  
  
  
              } 
  
  
  
  
  
  
  
              result.Data = true; 
  
  
  
              return result; 
  
  
  
  
  
  
  
          }

返回值一般都是jsonresult。這樣的話，當你在瀏覽器中訪問http://localhost:1233/User/CheckRealNameExist?RealName=張三&UserID=0時你會獲得一個true或false值。是不是跟webservice有點異曲同工？

同樣，在Views文件夾中生成了Create、Edit、Details、Delete、Index五個文件，其中Details與Delete我們不需要，因為我們想使用更友好的異步刪除（用戶單擊delete后，頁面不刷新，成功后瀏覽器下方滑出提示，3秒后關閉，失敗滑出失敗信息，不自動關閉 /利用easyui中的messager組件）。以下是Index中的js：

#p#

 
 
 
 
  
  
  
  //刪除 
  
  
  
          function del() { 
  
  
  
              var id = getselectedRow(); 
  
  
  
              if (id != undefined) { 
  
  
  
                  $.messager.confirm('確認', '確定刪除?', function (r) { 
  
  
  
                      if (r) { 
  
  
  
                          var url = 'User/Delete/' + id; 
  
  
  
                          $.post(url, function () { 
  
  
  
  
  
  
  
                          }).success(function () { 
  
  
  
                              $.messager.show({ 
  
  
  
                                  title: '提示', 
  
  
  
                                  msg: '刪除成功', 
  
  
  
                                  timeout: 3000, 
  
  
  
                                  showType: 'slide'
  
  
  
                              }); 
  
  
  
                              $('#dg').datagrid('reload'); 
  
  
  
                          }) 
  
  
  
                              .error(function () { 
  
  
  
                                  $.messager.alert('錯誤', '刪除發(fā)生錯誤'); 
  
  
  
                              }); 
  
  
  
  
  
  
  
                      } 
  
  
  
                  }); 
  
  
  
              } 
  
  
  
          }

我們把Details與Delete刪除后只剩下Index、Create、Edit三個文件，這三個文件之間的關系是，Index中包含添加、編輯按鈕，點擊后使用js將對應的actionresult加載到div中，以實現(xiàn)彈窗新建，編輯的效果。

 
 
 
 
  
  
  
  //新建 
  
  
  
          function c_dlg() { 
  
  
  
              var url = 'User/Create'; 
  
  
  
              $('#c_dlg').show(); 
  
  
  
              $('#c_dlg').load(url, function () { 
  
  
  
                  $(this).dialog({ 
  
  
  
                      title: '添加', 
  
  
  
                      buttons: [{ 
  
  
  
                          text: '提交', 
  
  
  
                          iconCls: 'icon-ok', 
  
  
  
                          handler: function () { 
  
  
  
                              $('#c_form').submit(); 
  
  
  
                          } 
  
  
  
                      }, { 
  
  
  
                          text: '取消', 
  
  
  
                          handler: function () { 
  
  
  
                              $('#c_dlg').dialog('close'); 
  
  
  
                          } 
  
  
  
                      }] 
  
  
  
                  }); 
  
  
  
              }); 
  
  
  
          } 
  
  
  
  
  
  
  
          //編輯框 
  
  
  
          function e_dlg() { 
  
  
  
              var id = getselectedRow(); 
  
  
  
              if (id != undefined) { 
  
  
  
                  var url = 'User/Edit/' + id; 
  
  
  
                  $('#e_dlg').show(); 
  
  
  
                  $('#e_dlg').load(url, function () { 
  
  
  
                      $(this).dialog({ 
  
  
  
                          title: '編輯', 
  
  
  
                          buttons: [{ 
  
  
  
                              text: '提交', 
  
  
  
                              iconCls: 'icon-ok', 
  
  
  
                              handler: function () { 
  
  
  
                                  $('#e_form').submit(); 
  
  
  
                              } 
  
  
  
                          }, { 
  
  
  
                              text: '取消', 
  
  
  
                              handler: function () { 
  
  
  
                                  $('#e_dlg').dialog('close'); 
  
  
  
                              } 
  
  
  
                          }] 
  
  
  
                      }); 
  
  
  
                  }); 
  
  
  
              } 
  
  
  
          }

這里面的c_dlg與e_dlg是index頁面的兩個Div節(jié)點：

以上的代碼完成將控制器中的action返回的頁面內(nèi)容動態(tài)加載到div中，并以彈窗的特效顯示在當前（Index）頁面中。效果如圖：

我們來看看Create\Edit視圖的內(nèi)容，首先是js

#p#

 
 
 
 
  
  
  
   
  
  
  
      $(function () { 
  
  
  
          $('#c_Department').combotree({ 
  
  
  
              url: '@Url.Action("GetComboTreeJson","Department")'
  
  
  
          }); 
  
  
  
          $('#c_City').combobox(); 
  
  
  
          $('#c_Area').combobox(); 
  
  
  
           
  
  
  
          $('#c_Province').combobox({ url:'CityDic/List/ID/0', 
  
  
  
              onSelect: function (record) { 
  
  
  
                  $('#c_City').combobox('reload', 'CityDic/List/ID/' + record.ID).combobox('clear'); 
  
  
  
                  $('#c_Area').combobox('clear'); 
  
  
  
              } 
  
  
  
          }); 
  
  
  
  
  
  
  
          $('#c_City').combobox({ 
  
  
  
              onSelect: function (record) { 
  
  
  
                  $('#c_Area').combobox('reload', 'CityDic/List/ID/' + record.ID).combobox('clear'); 
  
  
  
              } 
  
  
  
          }); 
  
  
  
           
  
  
  
          $('#c_Birth').datebox().datebox('setValue', '@now'); 
  
  
  
           
  
  
  
          $("#c_form").validate({ 
  
  
  
              rules: { 
  
  
  
                  UserName: { 
  
  
  
                      required: true, 
  
  
  
                      remote: 
  
  
  
                          { 
  
  
  
                              url: 'User/CheckNameExist', 
  
  
  
                              type: "get", 
  
  
  
                              dataType: "json", 
  
  
  
                              data: { 
  
  
  
                                  Name: function () { return $('#c_UserName').val(); }, 
  
  
  
                                  UserID: function () { return 0; } 
  
  
  
                              } 
  
  
  
                          } 
  
  
  
                  }, 
  
  
  
                  RealName: { 
  
  
  
                      required:true, 
  
  
  
                      remote: { 
  
  
  
                          url: 'User/CheckRealNameExist', 
  
  
  
                          type: "get", 
  
  
  
                          dataType: "json", 
  
  
  
                          data: { 
  
  
  
                              RealName: function () { return $('#c_RealName').val(); }, 
  
  
  
                              UserID: function () { return 0; } 
  
  
  
                          } 
  
  
  
                      } 
  
  
  
                  } 
  
  
  
              }, 
  
  
  
              messages: { 
  
  
  
                  UserName: { 
  
  
  
                      remote: '名稱重復'
  
  
  
                  },  
  
  
  
                  RealName: { remote: '名稱重復' } 
  
  
  
              }, 
  
  
  
              submitHandler: function (form) { 
  
  
  
                  ajaxAdd(); 
  
  
  
              } 
  
  
  
          }); 
  
  
  
      });

這部分js將本頁面的控件初始化為對應的下拉框或日期選取框等等，Html為

 
 
 
 
  
  
  
  @using (Html.BeginForm("Create", "User", FormMethod.Post, new { id = "c_form" })) 
  
  
  
  { 
  
  
  
   
  
  
  
          
  
  
  
              
  
  
  
                  
  
  
  
                      @Html.LabelFor(model => model.UserName, "用戶名:") 
  
  
  
                  
  
  
  
                  
  
  
  
                       
  
  
  
                     
  
  
  
                          *
  
  
  
                  
  
  
  
              
  
  
  
              
  
  
  
                  
  
  
  
                      @Html.LabelFor(model => model.DepartmentID, "組織機構:") 
  
  
  
                  
  
  
  
                  
  
  
  
                      
  
  
  
                          *
  
  
  
                  
  
  
  
              
  
  
  
              
  
  
  
                  
  
  
  
                      @Html.LabelFor(model => model.Password, "密碼:") 
  
  
  
                  
  
  
  
                  
  
  
  
                      @Html.PasswordFor(model => model.Password, new { @class = "{required:true,minlength:5}" })
  
  
  
                          *
  
  
  
                  
  
  
  
              
  
  
  
              
  
  
  
                  
  
  
  
                      
                                                當前標題：MVC3快速搭建Web應用(二)                                                

                                                網(wǎng)頁網(wǎng)址：http://m.fisionsoft.com.cn/article/dpogeio.html

新聞中心

其他資訊