MVC 3 基本操作增加修改

在MVC中實現基本的增刪改和傳統的asp .net 程式有很大的不同，剛開始使用MVC還是有些不太適應，但是它的頁面簡潔也相當的不同，同時對伺服器的訪問效能上也有很大的提高。基於此，下面對我學習過程記錄如下：

首先，使用VS建立一個以Internet為模板的專案,如下所示：

在“_Layout.cshtml”檔案中引入相關指令碼檔案，此檔案的路徑如下：

修改成如下內容：

<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="Stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>   1:     2:     <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">   1: </script>   1: </script>   2:     <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">   1: </script></script>
</head>

在Models資料夾下，新建類檔案“Note.cs”，內容如下：

public class Note
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Body { get; set; }
    }

再建立類檔案“NoteManager.cs”,內容如下：

public class NoteManager
    {
        public Collection<Note> Notes
        {
            get
            {
                if (HttpRuntime.Cache["Notes"] == null)
                    loadInitialData(); return (Collection<Note>)HttpRuntime.Cache["Notes"];
            }
        }
        private void loadInitialData()
        {
            var notes = new Collection<Note>
                            {
                                new Note
                                    {
                                        Id = 1,
                                        Title = "Set DVR for Sunday",
                                        Body = "Don't forget to record Game of Thrones!"
                                    },
                                new Note
                                    {Id = 2, Title = "Read MVC article", Body = "Check out the new iwantmymvc.com post"},
                                new Note
                                    {
                                        Id = 3,
                                        Title = "Pick up kid",
                                        Body = "Daughter out of school at 1:30pm on Thursday. Don't forget!"
                                    },
                                new Note {Id = 4, Title = "Paint", Body = "Finish the 2nd coat in the bathroom"}
                            };
            HttpRuntime.Cache["Notes"] = notes;
        }        public Collection<Note> GetAll() { return Notes; }
        public Note GetById(int id)
        {
            return Notes.Where(i => i.Id == id).FirstOrDefault();
        }
        public int Save(Note item)
        {
            if (item.Id <= 0)
                return SaveAsNew(item); 
            var existingNote = Notes.Where(i => i.Id == item.Id).FirstOrDefault();
            if(existingNote == null)
            {
                return -1;
            }
  
            existingNote.Title = item.Title; 
            existingNote.Body = item.Body; 
            return existingNote.Id;
        }
        private int SaveAsNew(Note item)
        {
            item.Id = Notes.Count + 1; Notes.Add(item); return item.Id;
        }
    }

修改“HomeController”為如下內容：

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        [OutputCache(Duration = 0)]
        public ActionResult List()
        {
            var manager = new NoteManager();
            var model = manager.GetAll();
            return PartialView(model);
        }
        [OutputCache(Duration = 0)]
        public ActionResult Create()
        {
            var model = new Note();
            return PartialView("NoteForm", model);
        }
  
        [OutputCache(Duration = 0)]
        public ActionResult Edit(int id)
        {
            var manager = new NoteManager();
            var model = manager.GetById(id);
            return PartialView("NoteForm", model);
        }
        [HttpPost]
        public JsonResult Save(Note note)
        {
            var manager = new NoteManager();
            var noteId = manager.Save(note);
            return Json(new { Success = noteId > 0 });
        }
    }

對專案編譯一下，再新建一個“NoteForm”View，如下圖所示：

注意：上圖中選擇部分檢視和使用強型別的View

修改後的內容如下所示：

   1: @model MvcSample.Models.Note
   2:     <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>   1:     2:     <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript">   1: </script>   2:     3: @using (Html.BeginForm("Save", "Home", FormMethod.Post, new { id = "NoteForm" }))   4: {   5:       6:     7:     <div>   8:          @Html.ValidationSummary(true, "輸入的內容有錯，請糾正所有錯誤，再提交.")   9:             @Html.HiddenFor(m => m.Id)    10:             <div class="editor-label">  11:                 @Html.LabelFor(m => m.Title, "標題")  12:             </div>            13:             <div class="editor-field">  14:                 @Html.TextBoxFor(m => m.Title, new { data_val = "true", data_val_required = "標題不能為空。" })  15:                 @Html.ValidationMessageFor(m => m.Title)  16:             </div>  17:    18:             <div class="editor-label">  19:                 @Html.LabelFor(m => m.Body, "內容")  20:             </div>  21:             <div class="editor-field">  22:                 @Html.TextBoxFor(m => m.Body, new { data_val = "true", data_val_required = "內容不能為空。" })  23:                 @Html.ValidationMessageFor(m => m.Body)  24:             </div>   25:              26:     </div>  27: }  28:    29: <script type="text/javascript" language="javascript">  30:     $("#NoteForm").submit(function () {  31:         $("#NoteForm").validate();  32:         return false;  33:     });</script>

再新建“List.cshtml”檢視，也是部分檢視，如下圖所示：

修改後的內容如下：

@model IEnumerable<MvcSample.Models.Note>
       <ul class="NotesList">    
       @foreach (var note in Model)    
       {   
            <li>        @note.Title <br />        @note.Body <br />       
        <span class="EditLink" noteid="@note.Id">Edit</span>    
        </li>   
       }
       </ul>

在“Scripts”目錄下新建指令碼檔案“Common.js”，並加入如下內容：

function DialogObject(dialogId, formId, addUrl, editUrl, saveUrl, ajaxPostFunction, loadSuccessCallBack) {
    dialogId = "#" + dialogId;
    formId = "#" + formId;
    Success = 0;
    AlertError = 2;
    this.saveUrl = saveUrl;
    this.addUrl = addUrl;
    this.editUrl = editUrl;
    this.ajaxPostFunction = ajaxPostFunction;
    this.width = 440;
    this.height = 330;
  
  
    this.dialogLoad = function () {
        $(dialogId).dialog({
            autoOpen: false, //對話方塊的是否自動開啟
            width: this.width, //寬高
            height: this.height,
            modal: true, //模態對話方塊
            buttons: {//自定義對話方塊的按鈕資訊
                "儲存": this._saveFunction,
                "返回": this._closedialog()
            }
        });
    };
  
    this.loadEdit = function (id) {
  
        $(dialogId).html("")
            .dialog("option", "title", "編輯")
            .load(editUrl + "/" + id, this._openDialog());
  
    };
    this.loadAdd = function () {
        $(dialogId).html("")
            .dialog("option", "title", "新增")
            .load(addUrl, this._openDialog());
    };
    this._openDialog = function () {
        return new Function("$('" + dialogId + "').dialog('open');");
    };
  
    this._closedialog = function () {
        return new Function("$('" + dialogId + "').dialog('close');");
    };
  
    this.postFunction = function (formData, successCallback) {
        $.post(saveUrl,
                            formData,
                            function (data, textStatus) {
                                switch (textStatus) {
                                    case 
                                "timeout":
                                        break;
                                    case "error":
                                        break;
                                    case "notmodified":
                                        break;
                                    case "success":
                                        successCallback($(dialogId), $(formId), data);
                                        break;
                                    case "parsererror":
                                        break;
                                    default:
                                        break;
                                }
  
                            });
  
    };
                        defaultAjaxPostFunction = this.postFunction;
    
    this._saveFunction = function () {
        var b = $(formId);
        b.submit();
        if (b.validate().numberOfInvalids() > 0) {
            return;
        }
        if (ajaxPostFunction != null)
            ajaxPostFunction();
        else
            defaultAjaxPostFunction($(formId).serialize(), function (dlgObject, formObject, data) {
                if (data.Success == true) {
                    dlgObject.dialog("close");
                    if (loadSuccessCallBack != null) {
                        loadSuccessCallBack();
                    }
                }
//                else if (data.Success == AlertError) {
//                    alert(data.data);
//                }
//                else {
//                    formObject.html(data.data);
//                }
            });
    };
  
  
}

修改預設的Index.cshtml檔案內容如下所示：

@{
    ViewBag.Title = "Home Page";
}
<h2>
    Notes</h2>
<div id="NoteListBlock">
</div>
<span class="AddLink">Add New Note</span>
<div id="NoteDialog" title="" class="Hidden">
</div>
<script src="@Url.Content("~/Scripts/Common.js?verion=1")" type="text/javascript"></script>   1:     2: <script type="text/javascript">   3:     var noteDialog = new DialogObject("NoteDialog", "NoteForm", "/Home/Create", "/Home/Edit", "/Home/Save", null, LoadList);   4:     $(function() {   5:         noteDialog.dialogLoad();   6:         $(".EditLink").live("click", function () {   7:             var id = $(this).attr("noteid");   8:             noteDialog.loadEdit(id);   9:         });  10:         $(".AddLink").click(function () {  11:             noteDialog.loadAdd();  12:         });  13:    14:         LoadList();  15:     });  16:    17:     function LoadList() {  18:         LoadMvcPage("/Home/List");  19:     }  20:    21:     function AddRecord() {  22:         noteDialog.loadAdd();  23:         return false;  24:     }  25:    26:     function LoadMvcPage(url) {  27:         $("#NoteListBlock").load(url);  28:     }</script>

在Contents/site.css下加入如下內容：

.EditLink
{
    color: Blue;
    cursor: pointer;
}
.EditLink:hover
{
    text-decoration: underline;
}
.AddLink
{
    color: Blue;
    cursor: pointer;
}
.AddLink:hover
{
    text-decoration: underline;
}
#NoteForm label
{
    display: block;
    margin-bottom: 6px;
}
#NoteForm label > span
{
    font-weight: bold;
}
#NoteForm input[type=text]
{
    width: 350px;
}
#NoteForm textarea
{
    width: 350px;
    height: 80px;
}
  
.Hidden
{
    display: none;
}

現在來執行程式，效果如下：

新增：

編輯：

MVC 3 基本操作增加修改

相關文章