2017-02-11 12 views
0

ドロップダウンボックスで異なる時間(選択によって異なる)を表示するページを作成しようとしています。html.dropdownlistが選択された値を取得

私は、ドロップダウンリストでページを作成しましたが、私はそれから選択された値を取得する熱い知っている、とテキストボックス

で正しい時刻を表示しません。これは私のモデルである:

namespace WebApplication2.Models { 
public class Countries 
{ 
    public List<Country> CountriesList = new List<Country>(); 
    public int SelectionID { get; set; } 
    public Countries() 
    { 
     Country CooseCountry = new Country { Name = "Choose country", ID = 1}; 
     Country Israel = new Country { Name = "Israel - Tel-Aviv", ID = 2}; 
     Country USA = new Country { Name = "USA - New -York", ID = 3}; 
     Country Germany = new Country { Name = "Germany - Berlin", ID = 4}; 
     CountriesList.Add(CooseCountry); 
     CountriesList.Add(Israel); 
     CountriesList.Add(USA); 
     CountriesList.Add(Germany); 
    } 

} } 

コントローラー:

public class TlvTimeController : Controller 
{ 
    public ActionResult Index() 
    { 
     ModelDateTime MyTime = new ModelDateTime(); 
     Countries CountriesList = new Countries(); 
     return View(CountriesList);       
    } 

} 

ビュー:

@model WebApplication2.Models.Countries 
@{ 
    ViewBag.Title = "Index"; 
} 

<h2> 
    @Html.DropDownListFor(m => m.SelectionID, 
       new SelectList(Model.CountriesList, 
            "ID", "Name")) 

    @Html.Label("The time") 
</h2> 
<td> <input type="button" value="Show the time" id="ShowTime" /></td> 

The page in the browser

+0

あなたが同じページに滞在したい場合は、ボタンの '.click()'イベントを処理し、ajaxを使用して、値に基づいて時間を返すコントローラメソッドに選択した値を渡す必要があります(そして 'var selectedCountry = $( '#SelectionID').val ); '選択したオプションの値を返します) –

+0

あなたはnボタンをクリックするとドロップダウンリストに選択した値が表示されますか?私は正しい? –

+0

はいデビッド、あなたの右 – MrB

答えて

0

あなたは以下のjQueryを経由してそれを使用することができ、そののコードあなたに役に立つかもしれないです:

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://www.techtricky.com/wp-content/jquery/jquery.jclock.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(
     function() { 
      $("#zones").change(function(){ 
      if ($('#time-cont .time').length>0){ $('#time-cont .time').remove();} 
     var offset = $(this).val();  
      if (offset == '') return;  

     $('#time-cont').append('<div class="time"></div>'); 

      var options = { 
      format:'<span class=\"dt\">%A, %d %B %I:%M:%S %P</span>', 
      timeNotation: '12h', 
      am_pm: true, 
      fontFamily: 'Verdana, Times New Roman', 
      fontSize: '20px', 
      foreground: 'black', 
      background: 'yellow', 
      utc:true, 
      utc_offset: offset 
      } 

      $('#time-cont .time').jclock(options); 
     }); 
    }); 
    </script> 

    </head> 
    <body> 
    <select id="zones"> 
    <option value="">--Select--</option> 
    <option value="10">Australia</option> // Australia UTC offset value is 10 
    <option value="8">China</option> 
    <option value="5.5">India</option> 
    <option value="12">Newzealand</option> 
    <option value="0">UK</option> 
    <option value="-5">US EST</option> 

    </select> 
    <div id="time-cont"></div> 
    </body> 
</html> 
+0

ありがとう、しかし私はasp.net – MrB

+0

とそれをサーバー側にしたいと思う場合は、少なくとも私の答えをupvoteすることができます。 –

+0

また、すべての国を含むローカルマシンからすべてのタイムゾーン情報を取得し、ドロップダウンリストにバインドすることもできます。これをお望みですか?あなたが望むなら、私はあなたを助けることができます。 –

関連する問題