用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触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的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”的更多相关文章
- 自定义SWT控件四之其它下拉框
4.其它下拉框 4.1 添加联动二级多选择框(有添加按钮和删除按钮) package com.view.control.select; import java.util.ArrayList; impo ...
- 转:自定义ASP.NET MVC Html辅助方法
在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么 ...
- 【MVC】自定义ASP.NET MVC Html辅助方法
在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么 ...
- [转载]自定义ASP.NET MVC Html辅助方法 TagBuilder
在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么 ...
- 自定义ASP.NET MVC Html辅助方法
在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其重要性也就不言自明.有时候,我们不想重复地写一些HTML代码,或者MS没有提供我们想要的那个HTML标签的Html辅助方法,那么 ...
- 【草稿】自定义ASP.NET MVC Html辅助方法
https://www.cnblogs.com/myshell/archive/2010/05/09/1731269.html 在ASP.NET MVC中,Html辅助方法给我们程序员带来很多方便,其 ...
- [MVC]Ajax辅助方法
在开始使用Ajax辅助方法前,必须在页面中载入jQuery以及jquery.unobtrusive-ajax.js文件才能正常执行. 为了让网站载入适当的JS函数库,必须先让Layout页面载入适当的 ...
- MVC HTML辅助方法
HTML辅助方法(HTML Helper)用来辅助产生HTML,在开发View的时候会面对许多HTML标签,处理这些HTML标签非常繁琐,为了降低View的复杂度,可以使用HTML辅助方法帮助你产生一 ...
- Android简易实战教程--第二十二话《自定义组合控件模拟qq登录下拉框和其中的一些”小技巧”》
转载此文章请注明出处:点击打开链接 http://blog.csdn.net/qq_32059827/article/details/52313516 首先,很荣幸此专栏能被CSDN推荐到主页.荣 ...
随机推荐
- HDU 1811 Rank of Tetris(拓扑排序+并查集)
题目链接: 传送门 Rank of Tetris Time Limit: 1000MS Memory Limit: 32768 K Description 自从Lele开发了Rating系统, ...
- django写的留言板
代码见 https://github.com/linux-wang/show-me-the-code/tree/master/dj_test 实际上是 https://github.com/linux ...
- css3之2D转换
css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...
- 日志分析 第五章 安装logstash
logstash是java应用,依赖JDK,首先需要安装JDK,在安装jdk过程中,logstash-2.3.4使用JDK-1.7版本有bug,使用JDK-1.8版本正常,因此我们安装JDK-1.8版 ...
- 10月14日上午PHP环境搭建
第一步:安装wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b文件,安装过程中可能会遇到问题,把遇到的问题代码复制粘贴到360人工服务,查找方案 ...
- 《深入理解bootstrap》读书笔记:第4章 CSS组件(上)
bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...
- Install Mono and MonoDevelop on Fedora
http://www.mono-project.com/docs/getting-started/install/linux/ http://www.monodevelop.com/download/ ...
- linq按条件sum
var result = fruit.GroupBy(i => i.date) .Select(i => new { date = i.Key, no_of_apple = i.Where ...
- localdb
<connectionStrings> - <add name="default" connectionString="Data Source=.; I ...
- DIOCP 运作核心探密
来自网友天地弦的DIOCP早已经广为人知了,有很多的同学都用上了它,甚至各种变异.修改版本也出了不少.我最近也在学习DIOCP,打算将它用于自己的服务端,今天让我们来一起探密它(DIOCP)的运作核心 ...