C# 用post数据填充局部视图

主要目标：

@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>

可以点击日历插件中的某一天，然后弹出一个bootsrap模式，其中列出了当天的事件

发生了什么事：

@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>

我正在使用一个javascript插件FullCalendar。这个插件有一个我正在使用的

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>

问题：

@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>

看起来数据并没有被传递到部分视图中，只是原始的空值。认为通过索引的post传递数据将填充局部视图

或者可能是javascript调用$（“#myModal”）.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>

@model IEnumerable
&时代；关
@ViewBag.Date上的事件
@如果（型号！=null）
{ 
@foreach（模型中的var项目）
{ 
@DisplayFor（model=>item.events）
@DisplayFor（model=>item.type）
@DisplayFor（model=>item.content）
}
}
关
保存更改

您对modal的呼叫

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

---

需要在.success函数中完成，而不是在dayClick函数中。您需要将ajax调用的结果数据传递给它

一,。您正在进行ajax调用，但没有使用返回的结果—它将如何显示在您的页面上？2.如果

date

为空-您应该检测为什么？什么途径导致这一行动？3. <代码>$（“#myModal”）.modal（）应该在ajax请求的成功回调内部调用。我相信Ilya是正确的。换句话说，ajax调用调用的是一个控制器操作，它呈现部分视图，返回部分视图，但是没有JS来捕获返回的结果。我认为您需要一个成功回调选项，该选项接收返回的数据并用返回的部分视图填充页面上的容器，然后调用模态。您还需要决定如何设置响应的格式。通过使用局部视图，您将返回一个html响应。但是您的ResponseFormat和ajax请求正在指定JSON。如果要处理json，请删除部分视图，并在javascript成功处理程序中构建html。否则，请调整请求并删除ResponseFormat属性。