使用帖子数据填充部分视图

时间:2014-08-01 20:12:38

标签: c# javascript asp.net ajax

主要目标:

能够点击日历插件中的一天,然后弹出一个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">&times;</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>

1 个答案:

答案 0 :(得分:0)

你对模态的调用

$("#myModal").modal(); 

需要在.tccess函数内部而不是在dayClick函数中完成。你需要传递你的ajax调用的结果数据。