MVC实现DropdownList联动

以前用web formaspx页面的时候,DropdownList都是有selectindexchange事件的,但是这个事件在mvc里面没有了,所以只有通过jquery来实现,下面简单介绍下实现过程.
这个是后台代码.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.Mvc;
using MVCBlog.Codes;
namespace MVCBlog.Controllers
{
    public class HelloWorldController : Controller
    {
        private List<SelectListItem> getselectlist(int num)
        {
            DataTable dt = GetTable(num);
            return dt.ToSelectListItem();

        }
        private DataTable GetTable(int num)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("text", typeof(string));
            dt.Columns.Add("value", typeof(string));
            for (int i = 0; i < num; i++)
            {
                DataRow row = dt.NewRow();
                row["text"] = i;
                row["value"] = i * 10;
                dt.Rows.Add(row);
            }
            return dt;
        }
        public ActionResult DealDropdownList()
        {
            List<SelectListItem> items = GetTable(10).ToSelectListItem();
            return View(items);
        }
        [HttpGet]
        public ActionResult DealListChange(string num = "10")
        {
            var items = getselectlist(int.Parse(num));
            return Json(items, JsonRequestBehavior.AllowGet);
        }
        public ActionResult DealTable()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("text", typeof(string));
            dt.Columns.Add("value", typeof(string));
            for (int i = 0; i < 10; i++)
            {
                DataRow row = dt.NewRow();
                row["text"] = i;
                row["value"] = i * 10;
                dt.Rows.Add(row);
            }

            return View(dt);
        }
        // GET: HelloWorld
        public ActionResult Index()
        {
            return View();
        }
    }
}  

上面的dt.ToSelectListItem()是我写的一个扩展方法.下面顺带给出来吧

namespace MVCBlog.Codes
{
    public static class ExtendClass
    {
        //将datatable转换为selectlist来绑定dropdownlist
        public static List<SelectListItem> ToSelectListItem(this DataTable dt)
        {
            List<SelectListItem> items = new List<SelectListItem>();
            if (dt.Rows.Count == 0)
            {
                return items;
            }
            foreach (DataRow row in dt.Rows)
            {
                SelectListItem item = new SelectListItem();
                item.Text = row[0].ToString();
                item.Value = row[1].ToString();
                items.Add(item);
            }
            return items;

        }
    }
}  

前台的代码

@{
    ViewBag.Title = "DealDropdownList";
}


<h2>DealDropdownList</h2>


@{
    @Html.DropDownList("All", ((IEnumerable<SelectListItem>)Model))
}
<div>
    <select id="mytest" name="mytest">
</div>
<script src="~/post/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">

    $("#All").change(function () {
        var list1 = $("#All");
        var num = $("#All").val();
        alert(num);
        console.log(num);
        var posturl = '@Url.Action("DealListChange")';
        var fingure = $("#mytest");
        fingure.empty();
        $.getJSON(posturl + "?num=" + num, function (data) {
            $.each(data, function (i, item) {
                fingure.append($('<option/>', {
                    value: item.Value,
                    text: item.Text
                }));
            });
        });
    });
</script>  

好了,大概就是这样,实现了Dropdownlist的联动,那其他比如textbox也就差不多一样了.

发表评论

电子邮件地址不会被公开。 必填项已用*标注