MVC三层级联方式

三层级联方式,比如常见的乘法口诀表,这里使用ListBox,因为需要同时多选。

[Get]

[Post]后,保存当时选择的效果,同时为防止页面显示的效果和浏览器中的参数不一致,所以Post后同时回到HttpGet。

分析:

采用三个ListBox,分别为L1,L2,L3

操作1:L1选择后,需要在L2中显示对应的可选结果,并且L1可多选,在L2 中显示的结果中需要去重复。

比如:

(1)L1选中6,那么在L2中需要显示6,7,8,9

(2)L1选中6,7,那么在L2中需要显示6,7,8,9和7,8,9,考虑到去重复,那么在 L2中应该显示6,7,8,9。

操作2:在L1选择后,可以从L2中显示的选项中进行选择,同样L2中可以同时选择多项。 在L2选择之后,L3中显示相应的内容,这里的L3显示的内容有L1和L2同时决 定而不是仅仅有L2决定。

比如:

(1)L1选中6,7,那么L2中显示的内容能够有6,7,8,9,这里选择7,8,9三项,在 L3显示的内容应该是由(6,7),(6,8),(6,9) | (7,7),(7,8),(7,9) 取得,这里的结果是42,48,54,49,56,63(这里也需要考虑去重复,当然这 里没有重复)。同样在L3中也可以多选。

点击Go,submit按钮,提交数据,要显示提交的内容。

实现:

HomeController  和 Index Action 以及Index.cshtml

(1)模拟一个数据表,该表中存储的乘法表中所有内容

public class DbRecord
        {
            public int Id { get; set; }
            public string ValueFirst { get; set; }
            public string ValueSecord { get; set; }
            public string ValueThird { get; set; }
        }
        public List<DbRecord> DbRecords;

        public HomeController()
        {
            this.DbRecords = new List<DbRecord>();
            int index = 1;
            for (int i = 1; i <= 9; i++)
            {
                for (int j = i; j <= 9; j++)
                {
                    DbRecord dbItem = new DbRecord();
                    dbItem.Id = index;
                    dbItem.ValueFirst = i.ToString();
                    dbItem.ValueSecord = j.ToString();
                    dbItem.ValueThird = (i * j).ToString();
                    index++;
                    this.DbRecords.Add(dbItem);
                }
            }

        }

  

(2)初始化ListBox(L1,L2,L3)  ListBoxGetInit()

      public class Item

        {

            public int Id { get; set; }

            public string Value { get; set; }

        }

        public ActionResult ListBoxGetInit()

        {

            List<Item> list = new List<Item>();

            var L1 = (from temp 

                      in this.DbRecords 

                      select temp.ValueFirst).Distinct().ToList();

            for (int i = 0; i < L1.Count(); i++)

                list.Add(new Item { Id = i, Value = L1[i] });

            List<Item> list1 = new List<Item>();

            ViewBag.L1 = new MultiSelectList(list, "Value", "Value");

            ViewBag.L2 = new MultiSelectList(list1, "Value", "Value");

            ViewBag.L3 = new MultiSelectList(list1, "Value", "Value");

            return null;

        }

  

(3)处理Post的数据,并且保存Post的内容,显示在ListBox中。

PostInit()用在具体的Action [HttpPost]中调用,将表单中提交的内容拼成字符串,发送给对应的Action[HttpGet]中.

       public ActionResult PostInit(FormCollection values,string actionName)

        {

            string joinString = null;

            for (int i = 0; i < values.Count; i++)

            {

                joinString += values.Keys[i] + "=" + values[i] + "&";

            }

            return RedirectToAction(actionName, new { post = joinString });

        }

  

ListBoxPostInit在具体的Action[HttpGet]中调用,将之前PostInit()传递过来的参数进行处理,显示上次提交的值,并且L1显示所有可选的值,可以再次重新选择。

public ActionResult ListBoxPostInit(string post)

        {

            List<Item> list = new List<Item>();

            var L1 = (from temp 

                          in this.DbRecords 

                          select temp.ValueFirst

                      ).Distinct().ToList();

            for (int i = 0; i < L1.Count(); i++)

                list.Add(new Item { Id = i, Value = L1[i] });

            List<PostName> input = ParseParam(post);

            foreach (var item in input)

            {

                switch (item.Name)

                {

                    case "L1": ViewBag.L1 = 

                        new MultiSelectList(

                            list

                            , "Value"

                            , "Value"

                            ,item.Value.Split(‘,‘)

                            );break;

                    case "L2": ViewBag.L2 = 

                        new MultiSelectList(

                            ParseItem(item.Value)

                            , "Value"

                            , "Value"); break;

                    case "L3": ViewBag.L3 = 

                        new MultiSelectList(

                            ParseItem(item.Value)

                            , "Value"

                            , "Value"); break;

                    default: break;

                }

            }

  

ParseItem 已经拼成字符串的参数中的Value值,还原成List<Item>

 public static List<Item> ParseItem(string param)

        {

            List<Item> list = new List<Item>();

            List<string> stringTemp = param.Split(‘,‘).ToList();

            for (int i = 0; i < stringTemp.Count(); i++)

            {

                list.Add(new Item { Id = i, Value = stringTemp[i] });

            }

            return list;

        }

        public class PostName

        {

            public string Name { get; set; }

            public string Value { get; set; }

        }

  

ParseParam将已经拼成字符串的参数转换成Name和Value一一对应。

        public static List<PostName> ParseParam(string param)

        {

            List<PostName> results = new List<PostName>();

            string input = System.Web.HttpUtility.UrlDecode(param);

            if (input == null)

                return results;

            string[] inputSplit = input.Split(‘&‘);

            for (int i = 0; i < inputSplit.Length; i++)

            {

                string[] arr = inputSplit[i].Split(‘=‘);

                if (arr.Length == 2)

                {

                    PostName pn = new PostName

                    {

                        Name = arr[0],

                        Value = arr[1]

                    };

                    results.Add(pn);

                }

            }

            return results;

        }

  

(3)Json  GetList(string id) 和 GetListCombine(string id1, string id2)

   public JsonResult GetList(string id)

        {

            string[] stringSplit1 = null;

            if (id != null)

            {

                stringSplit1 = id.Split(‘,‘);

            }

            List<string> listString = new List<string>();

            List<Item> list = new List<Item>();

            listString = (from temp 

                              in this.DbRecords 

                              where (stringSplit1.Contains(temp.ValueFirst)) 

                              select temp.ValueSecord

                              ).Distinct().ToList();

            for (int i = 0; i < listString.Count(); i++)

            {

                list.Add(new Item { Id = i, Value = listString[i] });

            }

            var d = list;

            return Json(d, JsonRequestBehavior.AllowGet);

        }

         public JsonResult GetListCombine(string id1, string id2)

        {

            string[] stringSplit1 = null;

            string[] stringSplit2 = null;

            if (id1 != null)

            {

                stringSplit1 = id1.Split(‘,‘);

            }

            if (id2 != null)

            {

                stringSplit2 = id2.Split(‘,‘);

            }

            List<string> listString = new List<string>();

            List<Item> list = new List<Item>();

            listString = (from temp 

                              in this.DbRecords 

                              where (stringSplit1.Contains(temp.ValueFirst)

                                        &&stringSplit2.Contains(temp.ValueSecord) ) 

                              select temp.ValueThird

                              ).Distinct().ToList();

            for (int i = 0; i < listString.Count(); i++)

            {

                list.Add(new Item { Id = i, Value = listString[i] });

            }

            var d = list;

            return Json(d, JsonRequestBehavior.AllowGet);

        }

  

前台ListBox定义和JQ

@using (Html.BeginForm())

{

    <table>

        <tr>

            <td>

                @Html.ListBox("L1", null, new { @class = "edit" ,onchange = "GetList(this)", @style = "height:200px;width:200px" })

            </td>

            <td>*</td>

            <td>

                @Html.ListBox("L2", null, new { @class = "edit", onchange = "GetListCombine(this)", @style = "height:200px;width:200px" })

            </td>

            <td>=</td>

            <td>

                @Html.ListBox("L3", null, new { @class = "edit", @style = "height:200px;width:200px" })

            </td>

        </tr>

    </table>

    <input type="submit" value="Go" />

}

<script type="text/javascript">

    function GetList(id) {

        $("#L2").empty(); //清空

        $.ajax({

            url: ‘/Home/GetList/‘ + $("#L1").val(),

            type: "get",

            datatype: "json",

            success: function (data) {

                if (data.length == 0) {

                    $("<option></option>")

                    .val("0")

                    .text("请选择...")

                    .appendTo($("#L2"));

                }

                $.each(data, function (i, item) {

                    $("<option></option>")

                    .val(item["Value"])

                    .text(item["Value"])

                    .appendTo($("#L2"));

                });

            }

        });

    }

</script>

<script type="text/javascript">

    function GetListCombine(id1,id2) {

        $("#L3").empty(); //清空

        $.ajax({

            url: ‘/Home/GetListCombine/?‘ +‘id1=‘+ $("#L1").val()+‘&id2=‘+$("#L2").val(),

            type: "get",

            datatype: "json",

            success: function (data) {

                if (data.length == 0) {

                    $("<option></option>")

                    .val("0")

                    .text("请选择...")

                    .appendTo($("#L3"));

                }

                $.each(data, function (i, item) {

                    $("<option></option>")

                    .val(item["Value"])

                    .text(item["Value"])

                    .appendTo($("#L3"));

                });

            }

        });

    }

</script>

  

Acition的代码

       public ActionResult Index(string post)

        {

            if (post == null)

            {

                ListBoxGetInit();

            }

            else

            {

                ListBoxPostInit(post);

            }

            return View();

        }

        [HttpPost]

        public ActionResult Index(FormCollection values)

        {

            return PostInit(values, "Index");

        }

  

时间: 11-16

MVC三层级联方式的相关文章

★★JSP+Struts+Mysql构建的MVC三层框架对一张数据表的CURD

项目实现流程 大体流程:搭建环境 à 开发后台 à 开发前台 建立工程(struts2CURD),拷贝jar包,建立struts.xml文件,搭建环境 建立数据库和数据源配置:dbcpconfig.properties 建立db.sql:里面全是数据库操作的一些语句 建立操作数据库的工具:*.util:DBCPUtil.java,用于加载数据源.getDataSource(); *.Domain:User.java 继承ActionSupport,实现Serializable接口. ????写好

基于SSM的POI导入导出Excel实战尾篇-其余功能实战(mvc三层开发模式体验)

业务需求:前几篇基本已经介绍完毕项目的核心功能,即POI导入导出Excel,为了整个项目的完整性,并让诸位童鞋体验体验企业级javaweb应用mvc三层模式的开发流程,本文将介绍一下项目的其余功能,包括搜索,新增,修改,删除 需求分析:作为程序员,在项目中经常接触的就是CRUD了,本篇博文将整合jquery-easyui框架(版本采用1.5.5.4)异步实现上述几个功能,给项目画上一个完整的句号!当然啦,在刚开始开发时,对于自己开发好的后端接口完全可以用Postman进行模拟(我就是这样做的),

Angular JS从入门基础 mvc三层架构 常用指令

Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 1.常用指令 AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML.下面我们看一下AngularJS中的常用指令. (1).基本概念 指令:AngularJS中,通过扩展HTML的属性提供功能.所以,ng-

STM32F103ZET6 用定时器级联方式输出特定数目的PWM

STM32F103ZET6 用定时器级联方式输出特定数目的PWM STM32F103ZET6里共有8个定时器,其中高级定时器有TIM1-TIM5.TIM8,共6个. 这里需要使用定时器的级联功能,ST的RM0008 REV12的P388和P399页上有说明对于特定的定时器,怎么去选择级联功能,参见表86. 我这里输出PWM的定时器是TIM2,空闲的定时器是TIM3.以TIM2为主定时器,TIM3为从定时器对TIM2的输出脉冲数进行计数. 查表可知,TIM3为从定时器选择TIM2为触发源,需要配置

asp.net mvc各种传值方式大全

MVC 各种传值方式 ViewData传值. HomeController.cs Co de: public ActionResult Index(){       ViewData["Title" ] = "Home Page" ;      ViewData["Message" ] = "Welcome to ASP.NET MVC!" ;      return View();} Views/Home/Index.asp

ioc初步理解(二) 简单实用autofac搭建mvc三层+automapper=》ioc(codeFirst)

之前在园子闲逛的时候,发现许多关于automapper的文章,以及用aotufac+automapper合在一起用.当然发现大多数文章是将automapper的特点说出或将automapper几处关键代码放出.当然有过基础的人看这种文章没有什么问题,但是对于完全没有基础的小白来看完全是灾难级别的(我就是),经常按着博文一点一点的写,突然发现少了一部分导致代码无法运行.在搜索各种文章之后,终于用自己的理解写出了一个简单的运用automapper的demo,日后待我对automapper理解加深会进

在ASP.NET MVC中实现一种不同于平常的三级联动、级联方式, 可用于城市、车型选择等多层级联场景

三级或多级联动的场景经常会碰到,比如省.市.区,比如品牌.车系.车型,比如类别的多级联动......我们首先想到的是用三个select来展示,这是最通常的做法.但在另外一些场景中,比如确定搜索条件的时候,对于三级联动来说,可能选择1个,2个,或3个条件,我想,以下的方式可能更适合: 以上,可以只选择品牌,或同时选择品牌.车系,或同时选择品牌.车系.车型,最后把选择的内容展示到input上,并以逗号隔开. 可以实现的功能包括: ○ 点击最上面的input弹出div,此时只显示品牌区域○ 点击最左边

asp.net mvc 三层架构之dal层查询方法

分享分享分享!!! 首先,MVC和三层架构,是不一样的. 三层架构中,DAL(数据访问层).BLL(业务逻辑层).WEB层各司其职,意在职责分离. .net的三层结构中,并没有action这个概念. asp.net mvc 是微软新发布的一种网站开发架构.为了解决传统asp.net开发中不能分离Model,View和Controller而设计的. 普通的网站为了解决可移植,可维护,可扩展等问题,会把网站设计成三个独立的模块,Model负责数据库部分,View负责网页的界面,而Controller

MVC入门(一)——什么是MVC及其处理方式

一,什么是MVC 首先先来看张图: 首先,宏观上说,使用MVC还是为了分层,就像以前三层架构一样,只不过三层架构更多关注于将业务和数据分开,而MVC则更关注与界面的展现部分,因为在Web开发中,界面是比较容易变动的,所以,按照设计模式的原则,容易变动的部分就应该抽出来,在整体架构设计中,这一点一直是被遵循的.在整体上,我们将整体上容易变动的部分抽成一层,让各层之间各自变化来达到解耦的目的. 然后,我们看MVC是如何分离界面和数据的: 在MVC中,Model负责程序的业务代码和对数据操作的代码,而