跳到主要內容

MVC 下拉選單

onchange 顯示員工資訊
//取得人員資訊

function GetUser() {
    var strUserId = $("#txtNewUser").val();
    if (null == strUserId || "" == strUserId) {
        //$("#RoleUserList").html("");
    } else {
        var urlGetEmployee = $("#urlGetEmployee").val();
        var data = {};
        data.usrId = strUserId;
        $.ajax({
            url: urlGetEmployee,
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            cache: false,
            success: function (response) {
                //$("#lblUserNme").html(response.USR_ID + " " + response.USR_NME + " " + response.DEPT_ID + " " + response.DEPT_NME);            
                var usrIdName = response.USR_ID + " " + response.USR_NME
                $("#RoleUserList").append("<option> " + usrIdName + " </option>");
            }
        });
    }
}

<input type="text" maxlength="5" id="txtNewUser" value=" " onchange="GetUser();"   />
<input type="button" id="btnAddNewRoleUser" class="cnnFormButton" value="加入" onclick="GetUser();" />
@Html.Hidden("urlGetEmployee", Url.RouteUrl("CommUtil_employee"))
-------------------

RouteConfig.cs
routes.MapRoute(
    name: "CommUtil_employee",
    url: "employee/{usrId}",
    defaults: new { controller = "CommUtil", action = "FindUser", usrId = UrlParameter.Optional }
);

CommUtilController.cs
public JsonResult FindUser(string usrId)
{
    return Json(new Employee("55389", "張三", "1", 470, "系統科"));
}
=====================================================================
公司列表下拉選單1

<select id="selCompanyType" act='@Url.Action("GetCompanyList", "CommUtil", new { compId = "3", systemId = "6" })'>
$(function () {  
    //var urlGetCompList = $("#urlGetCompList").val();
    var urlGetCompList = $("#selCompanyType").attr('act');
    //alert(urlGetCompList);
    $.ajax({
        url: urlGetCompList ,
        dataType: 'json',
        type: 'GET',
        contentType: 'application/json',
        success: function (returnData) {          
            cb = "<option value=''> 請選擇 </option>";
            $.each(returnData, function (i, item) {
                cb += '<option value="' + item.COMP_ID + '">' + item.COMP_NME + '</option>';
            });
            $("#selCompanyType").append(cb);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        }
    });
})


=====================================================================
公司列表下拉選單2

@Html.DropDownList("selCOMP", new SelectList(Enumerable.Empty<SelectListItem>()))
@Html.Hidden("urlGetCompList", Url.RouteUrl("CommUtil_Company"))

$(function () {
//取得並設定公司別選項
var urlGetCompList = $("#urlGetCompList").val();
$.ajax({
    url: urlGetCompList,
    type: "POST",
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    cache: false,
    success: function (response) {
        var ddl = $('#selCOMP');
        ddl.empty();
        for (var i in response) {
            ddl.append(
                $('<option/>', {
                    value: response[i].COMP_ID
                }).html(response[i].COMP_NME)
            );
        }
    }
});


RouteConfig.cs
routes.MapRoute(
    name: "CommUtil_Company",
    url: "company/list",
    defaults: new { controller = "CommUtil", action = "GetCompanyList"}
);

=====================================================================
<script src="@Url.Content("~/Scripts/AdmRoleUser/Edit.js")"></script>

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" />

@Html.Hidden("urlGetEmployee", Url.RouteUrl("CommUtil_employee"))

<tr onclick="document.location = '@Url.Action("Index", "AdmUser")';">