ASP.Net MVC DropDownList SelectedIndexChanged 一些ASP.Net MVC的很有用的Javascript I – 在ASP.Net MVC上的一個和ASP.Net DropDownList 的 SelectedIndexChanged 功能

很多時候我們的Web Application 都會有一對對的DropDownList
[讓使用者便可以選擇產品編號 或 產品名稱]
當更變了其中一個DropDownList的值後..
另一個DropDownList 的值都應該要相對地自動更變..
ASP.Net Application上我們可以透過使用PostBack Code Behind
來實現這個效果
.aspx

 <h2>
        Welcome to Share ChiWai ASP.NET!
    </h2>
    Food Category:
    <asp:DropDownList ID="ddl_FoodCategoriesID" runat="server" AutoPostBack="true"
        onselectedindexchanged="ddl_FoodCategoriesID_SelectedIndexChanged" />
    <asp:DropDownList ID="ddl_FoodCategoriesName" runat="server"
        AutoPostBack="true"
        onselectedindexchanged="ddl_FoodCategoriesName_SelectedIndexChanged"/>

我們要設定 ASP.NetDropDownList control上的AutoPostBack屬性定寫為true
和定義了SelectedIndexChanged功能

Code Behind
C#

   protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ShareChiWai_Model Share_tbl = new ShareChiWai_Model();
                DataTable tbl = Share_tbl.Get_Food_Categories();
                ddl_FoodCategoriesID.DataSource = Share_tbl.Get_Food_Categories();
                ddl_FoodCategoriesID.DataTextField = "FoodCategory_ID";
                ddl_FoodCategoriesID.DataValueField = "FoodCategory_ID";
                ddl_FoodCategoriesID.DataBind();

                ddl_FoodCategoriesName.DataSource = Share_tbl.Get_Food_Categories();
                ddl_FoodCategoriesName.DataTextField = "FoodCategory_Name";
                ddl_FoodCategoriesName.DataValueField = "FoodCategory_ID";
                ddl_FoodCategoriesName.DataBind();
            }
        }

        protected void ddl_FoodCategoriesID_SelectedIndexChanged(object sender, EventArgs e)
        {
            ddl_FoodCategoriesName.SelectedValue = ddl_FoodCategoriesID.SelectedValue;
        }

        protected void ddl_FoodCategoriesName_SelectedIndexChanged(object sender, EventArgs e)
        {
            ddl_FoodCategoriesID.SelectedValue = ddl_FoodCategoriesName.SelectedValue;
        }

在另一個DropDownListSelected Value 設定為和這個DropDownListSelectedValue
一樣便可

ASP.Net DropDownList SelectedIndexChanged Sample
ASP.Net MVC上..由於沒有ViewState 和 每一個動作都不像ASP.Net一樣可以使用到PostBack的關係..
所以在ASP.Net MVC上 我們會需要用到Javascript來實現這個效果..
由於當建立ASP.Net MVC 3 Project時
預設的Project Template已經把JQuery加進了Project上..和已然在_Layout.cshtml上引用了Jquery的參考..
所以我可以使用JQuery 來寫一些Javascript 來實現這個樣果

.cshtml

@{
    ViewBag.Title = "FoodCategories";
}
@model List<ShareChiWaiWebTutorial.Models.FoodCategory>
@{
//定義DropDownList內容
    var ddl_FoodCategoriesID = new SelectList(Model, "FoodCategory_ID", "FoodCategory_ID");
    var ddl_FoodCategoriesName = new SelectList(Model, "FoodCategory_ID", "FoodCategory_Name");
 }

<h2>Welcome To Share ChiWai ASP.Net MVC</h2>
Food Categories:
@Html.DropDownList("ddl_FoodCategoriesID", ddl_FoodCategoriesID)
@Html.DropDownList("ddl_FoodCategoriesName", ddl_FoodCategoriesName)
 <script type="text/javascript">
//當文件Ready的時候
$(document).ready(function () {

DDL_SelectedIndexChanged('#ddl_FoodCategoriesID', '#ddl_FoodCategoriesName');
DDL_SelectedIndexChanged('#ddl_FoodCategoriesName', '#ddl_FoodCategoriesID');
});
function DDL_SelectedIndexChanged(DDL1, DDL2) {
//當DDL有改變時
$(DDL1).change(function () {
//DDL2的值會設定為DDL的值
$(DDL2).val(this.value);
});
}

</script>;</pre>

ASP.Net MVC DropDownList SelectedIndexChanged sample
這一次雖然ASP.Net 的程式碼比較簡短和方便…
但是ASP.Net MVC 給使用者的感覺更流暢

Hope you find it useful

Leave a Reply