動態更新控件ASP.Net和引導

-1

我不能爲我的生活找出如何使用ASP.Net更新引導控件。動態更新控件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中選擇一個值combobox沒有更新我的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。

來源

2016-06-28 Ben

這是什麼問題？ –

現在你正在追加Ajax結果到'$（'＃courseSelect'）;'元素而不是'termSelect' –

@Reddy修復'courseSelect'到'termSelect'。 @StephenMuecke更新了問題以更好地反映問題。 – Ben

您在點擊調用這個函數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 
    }); 
});

來源

2016-06-28 03:32:28

我已經更新了我的答案以反映您的建議。我的代碼仍然不起作用。 – Ben

@fluffybonkers您更新的代碼看起來不夠公平。我唯一能想到的是你沒有刪除select標籤中的'onClick'。刪除它並檢查。同時查看瀏覽器控制檯窗口以查看是否有任何錯誤。 –

我在瀏覽器中收到兩個錯誤：http：// localhost：51520/api/teacher/global/currentterms/DEC％2010。請求的資源上沒有「Access-Control-Allow-Origin」標題。原因'http：// localhost：54866'因此不被允許訪問。索引：41 Uncaught ReferenceError：$ select未定義 – Ben

你的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

來源

2016-06-28 02:35:11 Mark

動態更新控件ASP.Net和引導

回答

相關問題