动态更新控件.Net和Bootstrap

本文关键字：Bootstrap Net 控件 更新 动态 | 更新日期: 2023-09-27 17:52:39

我这辈子都想不出如何用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并从返回的JSON动态填充termSelect控件。

从我的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中选择一个值时调用。

动态更新控件.Net和Bootstrap

在点击选择标签时调用此函数getTerms()。这是错误的……必须使用on change事件。即使点击也会起作用，但它会被触发，即使你点击文本框也会调用API，这是不必要的请求。另外停止使用内联事件绑定，它已被弃用，很快将停止工作，在未来，你必须绑定事件使用Jquery更改你的代码如下。

删除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 
   });
});

你的javascript'函数是getTerms(course)，而你调用它的点击方法为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
相关文章：