我想在选中或取消选中单选按钮时加载或隐藏部分视图。我现在该怎么办呢? 我目前在视野中有这个
@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帮助程序生成两个标识为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
中显示/隐藏文本(Hello world)以获得以下javascript代码的开头,但是它没有用,文本hello world总是出现,即使radiobutton被选中或未选中
<script>
$(document).ready(function () {
$('input:radio[name=Isattending_0]').change(function () {
if ($("#Isattending_0").is(':checked')) {
$("#provideDateTime").show();
}
else {
$("#provideDateTime").hide();
}
})
})
</script>
在浏览器中为单选按钮呈现Html
答案 0 :(得分:0)
<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>
答案 1 :(得分:0)
只需对控制器中为部分视图提供服务的操作执行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):
}