接触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. HDU 5920 Ugly Problem

    说起这道题, 真是一把辛酸泪. 题意 将一个正整数 \(n(\le 10^{1000})\) 分解成不超过50个回文数的和. 做法 构造. 队友UHC提出的一种构造方法, 写起来比较方便一些, 而且比 ...

  2. 数据结构作业——sights(最短路/最近公共祖先)

    sights Description 美丽的小风姑娘打算去旅游散心,她走进了一座山,发现这座山有 n 个景点,由于山路难修,所以施工队只修了最少条的路,来保证 n 个景点联通,娇弱的小风姑娘不想走那么 ...

  3. K米APP----案例分析

    K米APP----案例分析 第一部分 调研,评测 第一次上手体验 软件的美工做得不错,功能排版很清楚,用户很容易上手,不至于用户不知道怎么用这个APP点歌 软件最主要的功能是KTV的点歌功能,这个功能 ...

  4. HTML5学习总结-01 开发环境和历史

    1 搭建HTML5开发环境 1 安装一款支持HTML5的浏览器 FireFox, Chrome 2 开发工具 SublineText, Eclipse, HBuilder, WebStorm 注:使用 ...

  5. POJ 1330 Nearest Common Ancestors (最近公共祖先LCA + 详解博客)

    LCA问题的tarjan解法模板 LCA问题 详细 1.二叉搜索树上找两个节点LCA public int query(Node t, Node u, Node v) { int left = u.v ...

  6. codeforce B Island Puzzle

    B. Island Puzzle time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  7. 菜鸟之linux问题之图形界面和dos界面的登录问题

    1.安装完linux系统后,图形化界面的用户名和密码是之前安装的时候设置的. 如果想切换到linux的dos窗口快捷键是:ctrl+alt+F2 由dos窗口切换到linux图形界面快捷键是:ctrl ...

  8. jQuery Ajax(异步请求)

    jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...

  9. phpcms响应式布局导航条

  10. easyUI中tree的简单使用

    一.在JS中的代码 $('#tt').tree({ url: baseCtx + 'lib/easyui-1.4/demo/tree/tree_data1.json',//tree数据的来源,json ...