vs2013+MVC3.0+EasyUI的ComboBox聯動使用(二)

標籤：easyui   combobox   

vs2013+MVC3.0+EasyUI的ComboBox聯動使用(二)

簡介：在vs2013(.net4.0)中使用MVC3.0對於EasyUI中ComboBox的聯動使用，

            載入ComboBox資料，並且實現聯動效果，

            本文將採用EasyUI中的Date控制項與ComboBox實現聯動效果，

-----------------------------------------------------------------------------------------------------------------------------------------------------

下面主要展現3個實用模組的代碼：

Controller(控制)：

    /// <summary>    /// 根據使用者選擇的日期擷取發貨單號    /// </summary>    /// <param name="strDate">日期</param>    /// <returns></returns>    /// <remarks>建立人員(日期):★彭振★(141016 11:24)</remarks>    public JsonResult GetSendBillCodeByDate(string strDate)    {       ISale_outerListService ser = Sale_outerListService.Instance;      string json = string.Empty;      try      {        //擷取可用快遞公司資訊        DataSet ds = ser.GetSendBillCodeByDate(strDate, UserHelper.UserInfo.StorageIds[0]);        System.Data.DataTable dt = ds.Tables[0];        if (ds != null && ds.Tables.Count > 0)        {          dt = ds.Tables[0];        }        else        {          return Json(json);        }        if (dt != null && dt.Rows.Count > 0)        {          List<dynamic> list = new List<dynamic>();          foreach (System.Data.DataRow dr in dt.Rows)          {            list.Add(new            {              ID = dr["SendBill_Code"].GetString(),              Name = dr["SendBill_Code"].GetString()            });          }          //2 查出資料 轉 json          json = list.ToJsonSerialize();        }        else        {          return Json(json);        }      }      catch (Exception ex)      {        json = string.Empty;      }      //3 輸出      return Json(json);    }

-----------------------------------------------------------------------------------------------------------------------------------------------------

Pub(頁面)：

    <td style=" width:50px;" class="tbl-label">日期</td>    <td style=" width:150px;" class="tbl-value">      <input id="dtSendBillDate" type="text" class="inp-normal" />    </td>    <td class="tbl-label">發貨單號</td>    <td class="tbl-value">      <input type="text" id="SendBill_Code" name="SendBill_Code" class="inp-normal" />    </td>

-----------------------------------------------------------------------------------------------------------------------------------------------------

Biz(JS)：

<script language="javascript">  $(function () {    //產生easyui的datetimebox    $('#dtSendBillDate').datebox({      required: true,      onSelect: function (date) {        var year = date.getFullYear().toString();        var month = (date.getMonth() + 1).toString().length == 1 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();        var day = (date.getDate().toString()).length == 1 ? "0" + date.getDate().toString() : date.getDate().toString();        var selectdate = year + month + day;         lodupHelper.getSendBillCodeList(selectdate);      }    });  //lodup 協助類  var lodupHelper = {    getSendBillCodeListUrl: "/Pack/GetSendBillCodeByDate",    //擷取發貨單號組    getSendBillCodeList: function (selectdate) {      lodupHelper.ajaxasync(lodupHelper.getSendBillCodeListUrl, { strDate: selectdate }, function (data) {        datasetCode = eval("(" + data + ")");        comboboxCode = {          valueField: 'ID',          textField: 'Name',          data: datasetCode,          required: true,          editable: false        };        $('#SendBill_Code').combobox(comboboxCode);      });    }   };  });</script>



vs2013+MVC3.0+EasyUI的ComboBox聯動使用(二)