主要目标:
能够点击日历插件中的一天,然后弹出一个bootrap模式,其中包含当天列出的事件。
发生了什么:
我正在使用javascript插件fullcalender。这个插件有一个我正在使用的dayClick
事件。点击后,我有ajax代码将值传递给帖子,如下所示:
<div id="calendar"></div>
@Html.Partial("Modal",null)
...
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
height: 170,
selectable: true,
editable: true,
defaultView: 'basicWeek',
dayClick: function (date, jsEvent, view) {
$.ajax(
{
url: '@Url.Action("Index","Home")',
type: "POST",
data: JSON.stringify({ date: date }),
dataType: "json",
contentType: "application/json; charset=utf-8",
cache: false
})
$("#myModal").modal();
}
});
});
</script>
从这里进入控制器然后将相关数据强制到局部视图。通过调试,我相信这是正确的。
[HttpPost]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public ActionResult Index(string date)
{
if (date != null)
{
string[] dateSplit = date.Split(new char[] { 'T' });
DateTime objDate = Convert.ToDateTime(dateSplit[0]);
var content = db.Calendars.Where(x => x.startDate == objDate).ToList();
return PartialView("~/Views/Home/Modal.cshtml", content);
}
else
return PartialView("~/Views/Home/Modal.cshtml", null);
}
问题:
似乎没有数据传递到局部视图,只是原始的空值。想通过索引的帖子传递数据会填充局部视图。
或者它可能是javascript调用$(&#34; #myModal&#34;)。modal();在数据填充之前被调用?我已经做了一些测试,在部分视图中的所有编码周围抛出if(Model!= null),并且else语句将显示带有元素的
标记。它始终显示
标签。
以下是我的观点:
@model IEnumerable<webby.Models.Calendar>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding:20.5% 15%;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Events on @ViewBag.Date</h4>
</div>
<div class="modal-body">
<table>
@if(Model != null)
{
@foreach(var item in Model)
{
<tr>
<td>
@Html.DisplayFor(model => item.events)
</td>
</tr>
<tr>
<td>
@Html.DisplayFor(model => item.type)
</td>
</tr>
<tr>
<td>
@Html.DisplayFor(model => item.content)
</td>
</tr>
}
}
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
你对模态的调用
$("#myModal").modal();
需要在.tccess函数内部而不是在dayClick函数中完成。你需要传递你的ajax调用的结果数据。