Заполните текстовое поле на основе выбранного значения раскрывающегося списка, используя JavaScript в mvc, получив значение объекта - PullRequest
Новая
       9

Заполните текстовое поле на основе выбранного значения раскрывающегося списка, используя JavaScript в mvc, получив значение объекта

0 голосов
/ 06 ноября 2019

У меня есть это представление и код javascript. 

<div class="form-group row col-md-12 field-space">
    @Html.LabelRequiredWithStyleFor(model => model.EmployeeDto.Company)
    @Html.DropDownListFor(model => model.EmployeeDto.CompanyPk, new SelectList(Model.Companies, "CompanyPk", "CompanyCode"), "", new { @id = "dropComCode", @placeholder = "-Select Company code-", @class = "form-control form-control-sm col-sm-3" })
    @Html.EditorFor(model => model.EmployeeDto.Company.CompanyName, new { htmlAttributes = new { @class = "form-control form-control-sm col-sm-3", @id = "txtCompanyName" } })
</div>

<script type="text/javascript">
       $(document).ready(function () {
        // this is Company Dropdown Selectedchange event 
        $("#dropComCode").change(function () {
            $("#txtCompanyName").empty();
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetCompany")', //  Calling json method
                dataType: 'json',
                data: { id: $("#dropComCode").val() },
                // Get Selected Company ID. 

                success: function (companynames) {
                    $.each(companynames, function (i, companyname) {
                        $("#txtCompanyName").append('<option value="' + companyname.CompanyPk + '">' +
                             companyname.CompanyName + '</option>');
                    });
                },
                error: function (ex) {
                    alert(' companyname retrieving fail.' + ex);
                }
            });
            return false;
        })
    });
</script>

Тогда у меня есть это действие контроллера. 

//[HttpGet]
public JsonResult GetCompany(int companyPk) {
    var result = _work.Companies.GetAll(c => c.CompanyPk == companyPk);

    return Json(result, JsonRequestBehavior.AllowGet);
}

Проблема заключается в том, что он возвращает только ошибку имени компании при получении. 'и ничего не происходитЯ думаю, что проблема с моим контроллером. Пожалуйста, помогите мне исправить это. Спасибо.

Ответы [ 2 ]

0 голосов
/ 09 ноября 2019

В функции обмена DropDown создайте метод просмотра и отправьте ему выбранный идентификатор DropDown и верните его в просмотр, чтобы он отображал ваши данные на основе выбранного идентификатора DropDown.

0 голосов
/ 09 ноября 2019

Я воспроизвел вашу ошибку. То, что я публикую, работает. Пожалуйста, используйте его точно так, как написано, и вы справитесь с проблемой, отправив AJAX.

Контроллер 

    [HttpGet]
    public JsonResult GetCompany(int companyPk)
    {
        //var result = _work.Companies.GetAll(c => c.CompanyPk == companyPk);
        //PUT BREAKPOINT HERE
        var result = "put breakpoint here";
        return Json(result, JsonRequestBehavior.AllowGet);
    }

    public ActionResult Index21()
    {
        return View();
    }

Просмотр 

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index21</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
        // this is Company Dropdown Selectedchange event
        //$("#dropComCode").change(function () {
           $("#theButton").click(function () {
                $.ajax({
                    type: 'GET',
                    url: '@Url.Action("GetCompany")', //  Calling json method
                    //contentType to server
                    contentType: "application/json; charset=utf-8",
                    //datatype back from the server
                    //dataType: 'json',
                    data: { companyPk: $("#dropComCode").val() },
                    //Get Selected Company ID.
                    success: function (companynames) {
                        $.each(companynames, function (i, companyname) {
                            $("#txtCompanyName").append('<option value="' + companyname.CompanyPk + '">' +
                                companyname.CompanyName + '</option>');
                        });
                    },
                    error: function (ex) {
                        alert(' companyname retrieving fail.' + ex);
                    }
               });
            //return false;
        })
    });
    </script>
</head>
<body>
    <div class="form-group row col-md-12 field-space">
        @*@Html.LabelRequiredWithStyleFor(model => model.EmployeeDto.Company)
            @Html.DropDownListFor(model => model.EmployeeDto.CompanyPk, new SelectList(Model.Companies, "CompanyPk", "CompanyCode"), "", new { @id = "dropComCode", @placeholder = "-Select Company code-", @class = "form-control form-control-sm col-sm-3" })
            @Html.EditorFor(model => model.EmployeeDto.Company.CompanyName, new { htmlAttributes = new { @class = "form-control form-control-sm col-sm-3", @id = "txtCompanyName" } })*@
        @*w3schools*@
        <select id="dropComCode">
            <option value="1">Volvo</option>
            <option value="2">Saab</option>
            <option value="3">Mercedes</option>
            <option value="4">Audi</option>
        </select>
        <input type="button" value="Go" id="theButton" />
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...