Asp.net MVC +JQueryValidation + AjaxForm

最新推荐文章于 2021-08-06 09:20:39 发布

心在忍耐

最新推荐文章于 2021-08-06 09:20:39 发布

阅读量1.6k

点赞数

分类专栏： MVC AJAX ASP.NET JQuery

本文链接：https://blog.csdn.net/jason_ldh/article/details/10022149

版权

ASP.NET 同时被 3 个专栏收录

70 篇文章 0 订阅

订阅专栏

MVC

49 篇文章 1 订阅

订阅专栏

JQuery

33 篇文章 0 订阅

订阅专栏

本文详细介绍了使用ASP.NET MVC2框架和jQuery实现了一个验证系统的全过程，包括控制器、模型类的设计，数据库操作，以及视图页面的交互实现。重点展示了如何通过模型验证确保数据的有效性和一致性，并通过jQuery进行客户端验证以提升用户体验。

摘要由CSDN通过智能技术生成

环境：vs2010 , asp.net mvc2

效果图：

主要的代码：

HomeController.cs

using System.Linq;
using System.Threading;
using System.Web.Mvc;
using JqueryValidate.Models;

namespace JqueryValidate.Controllers
{
    [HandleError]
    public class HomeController : BaseController
    {
        public ActionResult Index()
        {
            var model = Database.List;
            return View("Index",model);
        }

        public ActionResult About()
        {
            return View();
        }

        public ActionResult Edit(int? id)
        {
            Thread.Sleep(1000);
            var model = Database.List.FirstOrDefault(z => z.Id == id) ??new MyModel {Id = 0};
            return PartialView("Edit", model);
        }

        [HttpPost]
        public ActionResult Edit(MyModel modelel)
        {
            if (!ModelState.IsValid)
                return JsonError(GetError(ModelState), true);
            if (modelel.Id != 0)
            {
                var find = Database.List.FirstOrDefault(z => z.Id == modelel.Id);
                if (find != null)
                {
                    find.Name = modelel.Name;
                    find.Address = modelel.Address;
                    find.Age = modelel.Age;
                    return Success("更新成功|",true);
                }
            }
            modelel.Id = Database.List.Count + 1;
            Database.List.Add(modelel);
            return Success("创建成功|",true);
        }
    }
}

MyModel.cs

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace JqueryValidate.Models
{
    public class MyModel
    {
        [HiddenInput(DisplayValue = false)]
        public int Id{ get; set;}

        [DisplayName("姓名")]
        [Required]
        public string Name{ get; set;}

        [DisplayName("地址")]
        [Required]
        [StringLength(5,ErrorMessage = "不能大于个字符")]
        public string Address{ get; set;}

        [DisplayName("年ê龄?")]
        [Required]
        [Range(1,100,ErrorMessage = "必须填写1-100以内的整数")]
        public int Age { get; set;}
    }
}

Database.cs

using System.Collections.Generic;

namespace JqueryValidate.Models
{
    public static class Database
    {
        static Database()
        {
            List = new List<MyModel>();
        }

        public static List<MyModel> List { get; set;}
    }
}

Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<List<JqueryValidate.Models.MyModel>>" %>
<%@ Import Namespace="JqueryValidate.Models" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%=Html.ActionLink("新?建¨", "Edit", new {}, new {@class = "d", width = 400, height = 300})%>
    <table>
        <thead>
        <tr>
            <th>Id</th>
            <th width="200">姓?名?</th>
            <th width="200">地?址·</th>
            <th>年ê龄?</th>
            <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
        <%foreach (MyModel item in ViewData.Model)
            {%>
            <tr>
                <td><%=item.Id%></td>
                <td><%=item.Name%></td>
                <td><%=item.Address%></td>
                <td><%=item.Age%></td>
                <td><%=Html.ActionLink("编à辑-", "Edit", new {id = item.Id},new {@class = "d", width = 400, height = 300})%></td>
            </tr>
        <%}%>
        </tbody>
    </table>
</asp:Content>

Edit.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<JqueryValidate.Models.MyModel>" %>
<script src="/Scripts/jquery.form.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.pack.js" type="text/javascript"></script>
<%Html.EnableClientValidation();%>
<%using (Html.BeginForm("Edit", "Home", new {}, FormMethod.Post, new {})){%>
        <%=Html.EditorForModel()%>
        <input type="submit" value="确·认?" />
<%}%>
<script src="/Scripts/MicrosoftMvcJQueryValidation.js" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    $("input:text").css({
        border: "solid 1px #ccc",
        padding: "4px"
    });
    $("#form0 input:submit").button();
    function validate(formData, jqForm, options){
        return $("#form0").valid();
    }
    $(function(){
        var ajaxProjectImageListOptions = {
            beforeSubmit: validate ,            
            success: function(html){
                var result;
                try {
                    result = eval('(' + html + ')');
                } 
                catch (ex) {
                    result = html;
                }
                if (result.Error != undefined) {
                    alert(result.Text);
                }
                else {
                    $("#dialogPanel").dialog({
                        autoOpen: false,
                        modal: true,
                        buttons: {
                            关?闭?: function(){
                                $("#dialogPanel").empty();
                                $(this).dialog('close');
                            }
                        }
                    });
                    $("#dialogPanel").html(html);
                    $("#dialogPanel").dialog('open');
                }
            }
        };
        $("#form0").ajaxForm(ajaxProjectImageListOptions);
    });
    //]]>
</script>