接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰。后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽。这样设计界面来,想我种以前没学过JS,Jquery搞起来据比较吃力了。因此自己一边学一边就积累一些自定义的控件,边用边学,用到哪学到哪!

  首先自定义的是可编辑的下拉框,自己在网上找了一些参考了一些别人用一个文本框和下拉框组合起来实现可编辑的下拉框。最终在不断的尝试下终于成功了,不过也遇到了很多的问题。具体的思路就是文本框+下拉框+写下拉框的onchange事件。本人也是初学者,有说的不对的或不妥的地方欢迎大家指正。共同努力共同进步!

废话不多说了,上前台代码():

<div style="position:relative">
        <span style="margin-left:132px;width:18px;overflow:hidden">
        <select id="s1" style="width:207px;margin-left:-132px;height:23px" onchange="selectChanged()" name="select1">
        <option value="请选择颜色" selected="selected">--请选择颜色--</option>
        @foreach (var color in ViewBag.DropListColor)
        {
            <option value="@color">@color</option>
        }
        </select>
        </span>
        <input type="text" name="color" id="color" style="width:183px;position:absolute;left:0px"/>
        </div>

注意代码的几个地方selectChanged()是一个事先写好的JS代码,当onchange被触发时取下拉框的值到文本框中。

@foreach (var color in ViewBag.DropListColor)
        {
            <option value="@color">@color</option>
        }

这个循环式绑定Controlor发过来的后台数据,注意文本框的name和id属性的值要和你模型属性字段一样,这样的好处是提交的数据会自动绑定到一个模型对象。不用你一一去去,省事多了。还有就是这样可以验证数据的有效性,也就是模型的有效性,可以过滤大多数无效数据。

辅助方法代码(主要参考了该博主的博文http://blog.csdn.net/jiajinhao/article/details/7908027):

string temp = "";
            foreach(string value in colloction)
            {
                temp+="<option value='"+value+"'>"+value+"</option>";
            }
            string str=String.Format("<span style='margin-left:132px;width:18px;overflow:hidden'>"
                                    +"<select id='s1' style='width:207px;margin-left:-132px;height:23px' onchange='selectChanged()' name='select1'>"
                                    +"<option value='{0}' selected='selected'>{1}</option>"
                                    +temp
                                    +"</select></span>"
                                    + "<input type='text' name='{2}' id='{2}'style='width:183px;position:absolute;left:0px'/>", optValue, text, attribute);
            return new MvcHtmlString(str);

需要注意的是一开始把下面这段代码,也放到了str字符串中。毫无疑问运行时抛出异常“不正确的字符串”,左该右改都不行。最后想出了上面的方法解决了问题。

foreach(string value in colloction)
            {
                temp+="<option value='"+value+"'>"+value+"</option>";
            }

当然可能有其他更好的方法,欢迎跟帖,大家一起学习一下。

文本框日历控件代码:

public static MvcHtmlString TextBoxCalender(string IdAndName)
        {
             string str = String.Format(@"<input type='text' id='{0}' name='{0}' style='width:207' onfocus='Calender()' />", IdAndName);
            return new MvcHtmlString(str);
        }

代码比较简单但是需要下载一个js或jQuery的日历控件,直接在文本框的onfocus事件调用就行了。目前就用到的组合控件就这两个,遇到了就解决问题。用到其他组合控件是在学了,书到用时方很少啊!本人也是初学者,有说的不对的或不妥的地方欢迎大家指正。共同努力共同进步!

用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”的更多相关文章

  1. 自定义SWT控件四之其它下拉框

    4.其它下拉框 4.1 添加联动二级多选择框(有添加按钮和删除按钮) package com.view.control.select; import java.util.ArrayList; impo ...

  2. 转:自定义ASP.NET MVC Html辅助方法

    在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么 ...

  3. 【MVC】自定义ASP.NET MVC Html辅助方法

    在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么 ...

  4. [转载]自定义ASP.NET MVC Html辅助方法 TagBuilder

    在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么 ...

  5. 自定义ASP.NET MVC Html辅助方法

    在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么 ...

  6. 【草稿】自定义ASP.NET MVC Html辅助方法

    https://www.cnblogs.com/myshell/archive/2010/05/09/1731269.html 在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其 ...

  7. [MVC]Ajax辅助方法

    在开始使用Ajax辅助方法前,必须在页面中载入jQuery以及jquery.unobtrusive-ajax.js文件才能正常执行. 为了让网站载入适当的JS函数库,必须先让Layout页面载入适当的 ...

  8. MVC HTML辅助方法

    HTML辅助方法(HTML Helper)用来辅助产生HTML,在开发View的时候会面对许多HTML标签,处理这些HTML标签非常繁琐,为了降低View的复杂度,可以使用HTML辅助方法帮助你产生一 ...

  9. Android简易实战教程--第二十二话《自定义组合控件模拟qq登录下拉框和其中的一些”小技巧”》

    转载此文章请注明出处:点击打开链接   http://blog.csdn.net/qq_32059827/article/details/52313516 首先,很荣幸此专栏能被CSDN推荐到主页.荣 ...

随机推荐

  1. CF 84D Doctor(二分)

    题目链接: 传送门 Doctor time limit per test:1 second     memory limit per test:256 megabytes Description Th ...

  2. 【Beta】第三次任务发布

    后端(补做) #86 了解社区新建文章.添加评论(回复)的机制.整理成API文档,包括如何请求新建文章.新建评论(回复).如何获取文章内容和评论内容. 验收条件:文档PM要能看懂. 前端(补做) #8 ...

  3. 看了汤姆大叔的“你真懂JavaScript吗?”的一些感慨

    看了汤姆大叔的“你真懂JavaScript吗?”,里面有5道题目,我都一一作了,然后在chrome的控制台里面运行了一遍,虽然只错了一道,但还是细细读了下答案,在此总结一下,看看是否对大家对这些Jav ...

  4. mybatis报错Mapped Statements collection does not contain value for com.inter.IOper

    首页 > 精品文库 > mybatis报错Mapped Statements collection does not contain value for com.inter.IOper m ...

  5. [转]图片中的字符分割提取(基于opencv)

    http://blog.csdn.net/anqing715/article/details/16883863 源图片 像这些图片的字符就比较好操作,每个字符都独立,不连在一起,所以轮廓检测最好了.所 ...

  6. java编程思想-java中的并发(一)

    一.基本的线程机制 并发编程使我们可以将程序划分为多个分离的.独立运行的任务.通过使用多线程机制,这些独立任务中的每一个都将由执行线程来驱动. 线程模型为编程带来了便利,它简化了在单一程序中同时jia ...

  7. nginx查看安装了哪些模块

    查看安装了哪些模块命令: [root@RG-PowerCache-X xcache]# nginx/sbin/nginx -Vnginx version: nginx/1.2.3built by gc ...

  8. IO多路复用及ThreadingTCPServer源码阅读

    IO多路复用 socket模块是阻塞的,通过socket建立的服务端可以接收多个请求,但只能同时处理一个请求,其他请求都被阻塞.可以通过IO多路复用解决这个问题,socketserver内部使用的就是 ...

  9. 20145212 《Java程序设计》第6周学习总结

    20145212 <Java程序设计>第6周学习总结 学习内容总结 第十章 1.Java将输入/输出抽象化为串流.读取数据对象成为输入流,能向其写入的对象叫输出流. 我从网上找到了一个可以 ...

  10. Java可变参数传递中可以接收多个对象