通过获取实体的值，在 mvc 中使用 javascript 根据选定的下拉值填充文本框

Question

我有这个视图和 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);
}

问题是它只是 returns 'companyname retrieving fail.' 而没有任何反应。我认为问题出在我的控制器上。请帮我解决这个问题。谢谢。

Answer 1

我重现了你的错误。我发布的作品。请完全按照发布的方式使用它，提交 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>

Answer 2

在您的 DropDown onchange 函数上创建一个 View 方法并将选定的 DropDown ID 发送给它并在 View 中 Return 以便它根据选定的 DropDown ID 显示您的数据。

通过获取实体的值，在 mvc 中使用 javascript 根据选定的下拉值填充文本框

Fill the textbox based on selected dropdown value using javascript in mvc by getting the value of the entity

javascript

model-view-controller

entity-framework-6