用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的辅助方法自定义了两个控件：“可编辑的下拉框控件”和“文本框日历控件”

最新文章

热门文章