單選按鈕選中/取消選中，加載/隱藏局部視圖

每當單選按鈕被選中或未選中時，我想加載或隱藏部分視圖。我現在對我該怎麼做有點空白。我現在有有鑑於此單選按鈕選中/取消選中，加載/隱藏局部視圖

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@Scripts.Render("~/bundles/jqueryval") 
@using (Html.BeginForm("Index", "Response", FormMethod.Post)) 
{  
      <div class="form-group"> 
       <div class="input-group"> 
        @Html.EditorFor(m => m.Isattending, "RadioButtonQuestion") 
       </div> 

      </div> 

} 
<div id="provideDateTime"> 
    //load partial view here 
</div> 

<script> 
    $(document).ready(function() { 
     $('input:radio[name=Isattending_0]').change(function() { 

      if ($("#Isattending_0").is(':checked')) { 
       //show partial view. 
       //should call a method in controller that renders partial view 
       //don't know what to do 
      } 
      else { 
       //hide partial view 
      } 
     }) 

    }) 

    </script>

的editfor輔助生成與ID Isattending_0和Isattending_1，每當Isattending_0檢查該局部視圖兩個單選按鈕應該顯示，並且在取消選中的局部視圖應該被隱藏，並默認情況下它會被檢查。

這是在控制器方法應該從上面的腳本調用

[HttpGet] 
public ActionResult AttendeeAvailability(Guid appointmentId, Guid attendeeId) 
{ 
    var attendeeAvailability = new AttendeeAvailableDateTime 
    { 
     AppointmentId = appointmentId, 
     AttendeeId = attendeeAvailability 
    }; 
    return View(attendeeAvailability); 
}

PS：我想顯示/隱藏DIV provideDateTime內的文本（你好世界）一開始用下面的JavaScript代碼，但它沒有工作，文字的hello world總是出現，即使是單選框選中或取消選中

<script> 
    $(document).ready(function() { 
     $('input:radio[name=Isattending_0]').change(function() { 

      if ($("#Isattending_0").is(':checked')) { 
       $("#provideDateTime").show(); 
      } 
      else { 
       $("#provideDateTime").hide(); 
      } 
     }) 

    }) 

    </script>

呈現的HTML瀏覽器中的單選按鈕 enter image description here

來源

2014-02-13 Cybercop

是的，我甚至在瀏覽器中檢查了呈現的html中的id，會在瀏覽器中發佈生成的html的圖片，只是一分鐘。 – Cybercop

根據你的屏幕截圖，按鈕的名字是'Isattending'，但你的代碼'$（'input：radio [name = Isattending_0]'）正在尋找名字爲Isattending_0的按鈕......試着將它改爲只'Isattanding':) :) –

但我可以通過ID做到這一點？因爲兩者都有相同的名稱，但不同的ID，我想加載部分視圖的基礎上，單選按鈕與ID'Isattending_0' – Cybercop

<script> 
    $(document).ready(function() { 
$.get('/Controller/Action',function(data){ 
        $('#provideDateTime').html(data); 
       }); 
     $('#Isattending_0').change(function() { 

      if ($("#Isattending_0").is(':checked')) { 
       $.get('/Controller/Action',function(data){ 
        $('#provideDateTime').html(data); 
       }); 
      } 

     }) 
    $('#Isattending_1').change(function() { 

      if ($("#Isattending_1").is(':checked')) { 

        $('#provideDateTime').html(''); 

      } 

     }) 
    }) 

    </script>

來源

2014-02-13 12:36:12

基於對我的問題的評論，我意識到這兩個單選按鈕具有相同的名稱，但他們有不同的ID。所以'Isattending_0'是id不是名字，這是否仍然有效？ – Cybercop

我也必須提供參數給控制器方法 – Cybercop

實際上爲什麼你不能寫兩個事件？ –

只需在您的控制器中執行部分視圖的操作中執行jQuery Post調用即可。確保Action上的返回類型是ActionResult - 這將返回結果。

$.ajax(type: "POST", 
     url: "{route to your action}", 
     data: {data}, 
     success: function (response) // This response will actually be HTML of your partial View 
     { 
      $("whatever-div-you-want-your-partial-view-to-appear").html(response): 
     }

來源

2014-02-13 12:38:37 Gjohn

我認爲你的意思是ajax get調用，但無論如何，在單選按鈕更改調用控制器方法通過ajax獲取調用？ – Cybercop

@Biplov - ajax調用應該在你的if語句中，它檢查單選按鈕是否被選中。 – Gjohn

默認情況下，當第一次加載頁面時，單選按鈕被選中，那我怎樣才能使局部視圖出現？現在它只適用於更改事件 – Cybercop

單選按鈕選中/取消選中，加載/隱藏局部視圖

回答

相關問題