MVC操作/渲染操作、ajax帖子和部分视图的怪异行为

本文关键字：操作 视图 ajax MVC | 更新日期: 2023-09-27 18:25:49

因此，理想的设计是在这个MVC应用程序中有一个带有几个不同"小部件"的页面。每个"小部件"都应该能够将信息提交回自己，并且只重新加载自己。在web表单中很简单，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>

消息控制器中的索引操作结果：

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

为了简洁起见，将跳过整个监视器索引视图，只给出消息索引视图的简短版本

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

加载主页后，一切看起来都很好。将显示用于限制结果的字段以及消息。我可以在字段中输入一些内容，单击"筛选"，然后返回主页面，但是。。。字段已丢失其样式类，消息未经过滤。

奇怪，但更奇怪的是，如果我再次在字段中输入信息并单击"筛选"，这一次我不会进入主页，而是只显示消息索引的部分视图，并且消息没有被筛选。

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

MVC操作/渲染操作、ajax帖子和部分视图的怪异行为

您可能应该在小部件中使用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来注册事件，因为它将处理在事件注册脚本运行后创建的匹配元素的事件。

相关文章：