MVC 3 基本操作增加修改-白红宇

MVC 3 基本操作增加修改

阅读量：6509 次

发布时间：2019-06-24

本文共 10829 字，大约阅读时间需要 36 分钟。

在MVC中实现基本的增删改和传统的asp .net 程序有很大的不同，刚开始使用MVC还是有些不太适应，但是它的页面简洁也相当的不同，同时对服务器的访问性能上也有很大的提高。基于此，下面对我学习过程记录如下：

首先，使用VS创建一个以Internet为模板的项目,如下所示：

在“_Layout.cshtml”文件中引入相关脚本文件，此文件的路径如下：

修改成如下内容：


    @ViewBag.Title
    
    
    
 
    


    

</
script
>


在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
        Notes
        {
            get
            {
                if (HttpRuntime.Cache["Notes"] == null)
                    loadInitialData(); return (Collection
       )HttpRuntime.Cache["Notes"];
            }
        }
        private void loadInitialData()
        {
            var notes = new Collection
                            {
                                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
        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

修改后的内容如下所示：

@model MvcSample.Models.Note
    
 
    

 
@using (Html.BeginForm("Save", "Home", FormMethod.Post, new { id = "NoteForm" }))
{

 
    
         @Html.ValidationSummary(true, "输入的内容有错，请纠正所有错误，再提交.")
            @Html.HiddenFor(m => m.Id)
            
                @Html.LabelFor(m => m.Title, "标题")
            
            
                @Html.TextBoxFor(m => m.Title, new { data_val = "true", data_val_required = "标题不能为空。" })
                @Html.ValidationMessageFor(m => m.Title)
            
 
            
                @Html.LabelFor(m => m.Body, "内容")
            
            
                @Html.TextBoxFor(m => m.Body, new { data_val = "true", data_val_required = "内容不能为空。" })
                @Html.ValidationMessageFor(m => m.Body)
            

    
}
 

    $("#NoteForm").submit(function () {
        $("#NoteForm").validate();
        return false;
    });
</
script
>

再新建“List.cshtml”视图，也是部分视图，如下图所示：

修改后的内容如下：

@model IEnumerable
       
       @foreach (var note in Model)
       {
                    @note.Title 
        @note.Body 
        Edit
        
       }
       

在“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";
}

    Notes


Add New Note



 

    var noteDialog = new DialogObject("NoteDialog", "NoteForm", "/Home/Create", "/Home/Edit", "/Home/Save", null, LoadList);
    $(function() {
        noteDialog.dialogLoad();
        $(".EditLink").live("click", function () {
            var id = $(this).attr("noteid");
            noteDialog.loadEdit(id);
        });
        $(".AddLink").click(function () {
            noteDialog.loadAdd();
        });
 
        LoadList();
    });
 
    function LoadList() {
        LoadMvcPage("/Home/List");
    }
 
    function AddRecord() {
        noteDialog.loadAdd();
        return false;
    }
 
    function LoadMvcPage(url) {
        $("#NoteListBlock").load(url);
    }
</
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;
}

现在来运行程序，效果如下：

新增：

编辑：

下一篇，将进行分页查询的实现

备注：如果弹出对话框显示不正常，请检查Content下的样式文件是否存在。

参考文档：

转载于:https://www.cnblogs.com/LifelongLearning/archive/2011/07/23/2114612.html

你可能感兴趣的文章