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

2024-05-19 • 问答

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

问题在于它仅返回“检索失败的公司名称”。并没有任何反应。我认为问题出在我的控制器上。请帮助我解决此问题。谢谢。

我转载了您的错误。我发布的内容有效。请完全按照发布的说明使用它，您将可以解决问题，提交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>

在您的DropDown onchange函数上，创建一个View方法，并将所选的DropDown ID发送给它，然后在View中返回，以便它将基于所选的DropDown ID显示您的数据。

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

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

大家都在问