0

因此，理想的设计是在这个 MVC 应用程序中拥有一个带有几个不同“小部件”的页面。每个“小部件”应该能够将信息提交回自己并仅重新加载自己。网络表单很简单，看起来不像 MVC

首先，我们有我们的主页控制器，没什么特别的

public ActionResult Index()
{
    return View();
}

接下来，我们有我们的主页视图。请注意，我已经尝试过 Action 和 RenderAction 并且行为没有变化

@Html.Action("Index", "Monitor", new { area = "Statistics" }); 

<div id="messages">
    @Html.Action("Index", "Messages", new { area = "Data"});
</div>

@section Script {
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $('#filter').click(function () {
        $.ajax({
            method: 'POST',
            url: '@Url.Action("Index", "Messages", new { area = "Data"})',
            success: function(data){
                $('#messages').html(data);
            }
        });
        return false;
    });
</script>

消息控制器中的索引 ActionResult：

public ActionResult Index()
{
    var model = GetMessages();
    return PartialView(model);
}

为简洁起见，将跳过整个 Monitor Index View，仅给出 Messages Index View 的简要版本

@using (Html.BeginForm("Index", "Messages", FormMethod.Post))
{
    //Some fields to limit results are here, with style classes
    <button type="submit" id="filter">Filter</button>
}

@foreach(var item in Model)
{
    //Display results 
}

加载主页后，一切看起来都很好。显示限制结果的字段以及消息。我可以在字段中输入一些内容，单击过滤器，然后返回主页但是！...这些字段丢失了它们的样式类，并且消息未过滤。

奇怪，但更奇怪的是，如果我再次在字段中输入信息并单击过滤器，这次我并没有被带到主页，而是只显示消息索引的部分视图，并且没有过滤消息。

我不能说过滤不起作用是否与此问题有关，但单击过滤器的不一致行为是困扰我的部分。有人想指出我在这里做错了什么吗？

4

1 回答 1

0

您可能应该使用Ajax.BeginForm而不是Html.BeginForm在您的小部件中。这将让小部件管理自己的帖子：

<div id="messages">
  @using (Ajax.BeginForm("Index", "Messages", new AjaxOptions { UpdateTargetId = "messages" }))
  {
    // fields content
  }
  // other widget content
</div>

您看到的“奇怪”行为正在发生，因为在页面加载时，您的#filter按钮的提交事件被使用 jQuery 劫持，但是在第一次替换小部件内容后，#filter提交事件不再被劫持，所以当您单击它时整个页面被提交。如果您不想使用，则Ajax.BeginForm需要使用$.on而不是$.click注册事件，因为它将处理在事件注册脚本运行后创建的匹配元素的事件。

于 2013-08-02T00:49:35.423 回答