动态更新控件 ASP.Net 和 Bootstrap答案

【问题标题】：Dynamically Updating Controls ASP.Net and Bootstrap动态更新控件 ASP.Net 和 Bootstrap
【发布时间】：2016-10-30 03:53:25
【问题描述】：

我终其一生都无法弄清楚如何使用 ASP.Net 更新引导控件。

我有以下代码：

@{
    Layout = null;
}
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title Mark Hub</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    <script>
        var url = "http://localhost:51520/api/teacher/"

        function getTerms(course) {}
        //get a reference to the select element
        $select = $('#termSelect');
        //request the JSON data and parse into the select element
        $.ajax({
            url: url + "global/currentterms/" + course ,
            dataType:'JSON',
            success:function(data){
                //clear the current content of the select
                $select.html('');
                //iterate over the data and append a select option
                $.each(data.person, function(key, val){
                    $select.append('<option id="' + val.id + '">' + val.name + '</option>');
                })
            },
            error:function(){
                //if there is an error append a 'none available' option
                $select.html('<option id="-1">none available</option>');
            }
        });
    </script>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Mark Hub", "Index", "Teacher", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Teacher", "Index", "Teacher")</li>
                    <li>@Html.ActionLink("Admin", "Index", "Admin")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="section">
        <div class="container">
            <div class="row">
                <div class="col-md-1 text-left">
                    <select class="form-control" id="courseSelect" onclick="getTerms()">
                        <option>DEC 10</option>
                    </select>
                </div>
                <div class="col-md-1 text-left">
                    <select class="form-control" id="termSelect">
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <hr />
                    <footer>
                        <p>&copy; @DateTime.Now.Year</p>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我正在尝试从courseSelect 控件中获取用户选择的值（为了方便起见，我目前只有一个），将其传递给我的Javascript 函数getTerms，调用Web api 并填充@987654324 @控制从返回的JSON动态。

从我的courseSelect 组合框中选择一个值不会更新我的termSelect 组合框。

我将如何修复我的代码？

使用更新代码进行编辑以反映答案中的更新

<script>
    var url = "http://localhost:51520/api/teacher/"

    $(function(){
        $('#courseSelect').on('change',function(){
            // This is equal to your getTerms function
            var course =  $('#courseSelect').val();
            //request the JSON data and parse into the select element
            $.ajax({
                url: url + "global/currentterms/" + course,
                dataType:'JSON',
                success:function(data){
                    //clear the current content of the select
                    $select.html('');
                    //iterate over the data and append a select option
                    $.each(data.termID, function(key, val){
                        $select.append('<option id="' + val.id + '">' + val.name + '</option>');
                    })
                },
                error:function(){
                    //if there is an error append a 'none available' option
                    $select.html('<option id="-1">none available</option>');
                }
            })
        })});
</script>

我的代码仍然无法运行，当我在 VS 中添加断点时，不会调用该函数来从选择框 courseSelect 中选择一个值。

【问题讨论】：

有什么问题？
现在您将 Ajax 结果附加到 $('#courseSelect'); 元素而不是 termSelect
@Reddy 将 courseSelect 固定为 termSelect。 @StephenMuecke 更新了问题以更好地反映问题。
你还没有定义问题。你打你的控制器方法吗？什么是控制器方法，它返回什么？如果您在浏览器控制台中遇到任何错误怎么办？
现在我看到您没有将下拉列表中的选定值传递给您的 API 调用

标签： javascript c# asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

你在点击选择标签时调用这个函数getTerms()..这是错误的..你必须使用on change事件。即使单击也可以工作，但即使您单击将执行 API 调用的文本框，它也会触发，这是不必要的请求。另外 停止使用内联事件绑定器它已被弃用，很快将停止工作以后，您必须在 Jquery 中使用 on 绑定事件将您的代码更改为以下。

删除 HTML 中的 onClick

<select class="form-control" id="courseSelect">
    <option>DEC 10</option>
</select>

然后在 Jquery 中使用这个

$(function(){
   $('#courseSelect').on('change',function(){
          // This is equal to your getTerms function
          var course =  $(this).val(); 
          // rest of your logic goes here 
   });
});

【讨论】：

我已更新我的答案以反映您的建议。我的代码仍然不起作用。
@fluffybonkers 你更新的代码看起来很公平。我唯一能想到的是您没有删除选择标签中的onClick。删除它并检查。还要查看浏览器控制台窗口，看看是否有任何错误。
我在浏览器中遇到两个错误：localhost:51520/api/teacher/global/currentterms/DEC%2010。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'localhost:54866' 不允许访问。 Index:41 Uncaught ReferenceError: $select is not defined

【解决方案2】：

您的 javascript 函数是 getTerms(course)，而您在 click 方法上将其调用为 getTerms()

所以你应该改变你的javascript如下：

function getTerms() {}
        //get a reference to the select element
        $select = $('#termSelect');
        $course= $('#courseSelect').val(); // this is how you get the value of course
        //your next code

【讨论】：