时间戳

首页 > 解决方案 > 使用 jQuery 和 AJAX 使用 ASP.NET MVC 5 从数据库中的许多文本框中的下拉选择值

jquery - 使用 jQuery 和 AJAX 使用 ASP.NET MVC 5 从数据库中的许多文本框中的下拉选择值

问题描述

我在初始加载时从下拉列表中看到许多 texbox 时遇到问题，它只加载一个文本框，但另一个没有工作，由数据库更改填充的下拉列表我使用 ajax 和 jQuery 和 ASP.NET MVC 5。

好吧，这是代码下拉列表

 @Html.DropDownListFor(model => model.Rang, ViewBag.listRangs as SelectList, "إختر الرتبة", htmlAttributes : new { @class = "form-control", @id = "drop", onchange = "getValue()" })

和文本框

 <div class="form-group">
        @Html.LabelFor(model => model.Cours, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Cours, new { htmlAttributes = new { @class = "form-control", id = "cour" } })
            @Html.ValidationMessageFor(model => model.Cours, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tds, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tds, new { htmlAttributes = new { @class = "form-control", id = "td" } })
            @Html.ValidationMessageFor(model => model.Tds, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Tps, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Tps, new { htmlAttributes = new { @class = "form-control", id = "tp" } })
            @Html.ValidationMessageFor(model => model.Tps, "", new { @class = "text-danger" })
        </div>
    </div>

和函数onchange

 <script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "/Coordonnees/GetData",
            data: "{}",
            success: function (data) {
                var s = '<option value="-1">إختر الرتبة</>';
                for (var i = 0; i < data.length; i++) {
                    s += '<option value="' + data[i].Cour + '">' + data[i].Nom + '</option>';
                    s += '<option value="' + data[i].td + '">' + data[i].Nom + '</option>';
                    s += '<option value="' + data[i].tp + '">' + data[i].Nom + '</option>';
                }
                $("#drop").html(s);
            }
        });
    });
    function getValue() {
        var cVal = $("#drop").val();
        $("#cour").val(cVal);
    }
    function getValue() {
        var dVal = $("#drop").val();
        $("#td").val(dVal);
    }
    function getValue() {
        var pVal = $("#drop").val();
        $("#tp").val(pVal);
    }

控制器动作方法：

public ActionResult GetData()
{
    var data = from als in db.Ranglists select new { als.Nom, als.Cour, als.td, als.tp };
    return Json(data.ToList(), JsonRequestBehavior.AllowGet);
}

标签： jqueryasp.net-mvc

解决方案

您定义了 3 个同名getValue()函数...，因此将通过提升onchange调用最后一个函数。

将它们集成为一个：

function getValue() {
    var cVal = $("#drop").val();
    $("#cour").val(cVal);
    $("#td").val(cVal);
    $("#tp").val(cVal);
}

推荐阅读