MVC ajax 从内部更新部分结果答案

【问题标题】：MVC ajax update partial result from insideMVC ajax 从内部更新部分结果
【发布时间】：2014-09-07 06:12:10
【问题描述】：

我有一个视图Index，其中有一个内部引用的部分视图GetAlertData：

索引.cshtml

<table>
    <thead>
        <tr>
            <th>Date</th>
            <td>Message</td>
            <td>Type</td>
            <td>Actions</td>
        </tr>
    </thead>
    <tbody id="tableBody">
        @Html.Action("GetAlertData", new { selectedAlertType = Model.SelectedAlertType })
    </tbody>
</table>

GetAlertData.cshtml

foreach (var alert in Model.UserAlerts)
{
    <tr>
        <td>
            @alert.Date.ToString("d")
        </td>
        <td>
            @alert.Message
        </td>
        <td>
            @alert.AlertTypeName
        </td>
        <td>
            @Ajax.ActionLink("Dismiss", "Dismiss", new { userAlertID = alert.UserAlertID }, new AjaxOptions() { HttpMethod = "Post" })
        </td>
    </tr>
}

控制器代码

    public PartialViewResult GetAlertData(string selectedAlertType = "All")
    {
        //create viewModel
        return PartialView(viewModel);
    }

    [HttpPost]
    public ActionResult Dismiss(int userAlertID)
    {
        alertModel.DismissAlert(userAlertID);
        return RedirectToAction("Index"); //does nothing, because ajax (?)
    }

问题是这样的：我希望“父”视图在单击“关闭”后刷新“GetAlertData”Html.Action 中的数据。解除警报后，如何让“父”视图重新运行GetAlertData？返回 RedirectToAction 什么都不做，因为它是一个 ajax 调用。

我知道我可以在父视图中设置一个 javascript 方法，然后在 Dismiss ajax 调用中的 OnSuccess 中调用它，但这似乎有点乱，我想知道 MVC 框架或辅助方法中是否有任何东西会帮助我做到这一点。

【问题讨论】：

另外两个人回答了您的问题。您能否至少承认他们并就他们是否回答您的问题提供反馈。谢谢。
@PeterSmith 其中一个就是我。所以我一直在等待，直到我可以将自己的答案标记为答案（明天）。
好的，明白（我最近有很多被忽略的答案——导致偏执狂）。

标签： c# javascript ajax asp.net-mvc asp.net-mvc-5

【解决方案1】：

只有两种方法可以使用来自服务器的内容更新页面内容：1) 重新加载整个页面或 2) AJAX。

如果您只想更新页面的一部分而不导致重新加载，那么您必须使用 AJAX 请求一些操作以返回您想要的信息，然后使用 JS 替换 DOM 中的页面部分。由于这实质上是重新加载部分内容，因此您需要一个返回该部分内容的操作。此外，由于您已经在使用子操作，因此也可以使用相同的操作。只需确保删除[ChildActionOnly]（如果存在），以便将操作公开给路由框架。

【讨论】：

【解决方案2】：

如果您将 ActionLink 移动到 jQuery/Javascript 单击事件，则可以从那里调用 Dismiss，返回成功/错误标志。如果 Dismiss 成功，则使用另一个 Ajax 调用调用 GetAlertData 方法，并使用返回的 HTML 替换表体。您可能需要进行一些其他更改。

【讨论】：

【解决方案3】：

我解决了这个问题。我将重定向操作从“Index”更改为“GetAlertData”，并将UpdateTargetId 选项设置为与父视图中的相同。单击关闭按钮后，它将部分视图的内容替换为新结果。

这个答案对我来说唯一令人讨厌的是我必须在父视图中引用元素的 id ("tableBody")。我试图将整个子视图包装在一个 div 中并替换它，但这导致了重复和不良格式。这可能部分是因为 <table><div><tr> 不是完全有效的 HTML。

新的子视图代码：

@{
    var ajaxOpts = new AjaxOptions()
    {
        UpdateTargetId = "tableBody",
        HttpMethod = "Post",
    };
    if (Model.UserAlerts != null)
    {
        foreach (var alert in Model.UserAlerts)
        {
            <tr>
                <td>
                    @alert.Date.ToString("d")
                </td>
                <td>
                    @alert.Message
                </td>
                <td>
                    @alert.AlertTypeName
                </td>
                <td>
                    @Ajax.ActionLink("Dismiss", "Dismiss", new { userAlertID = alert.UserAlertID }, ajaxOpts)
                </td>
            </tr>
        }
    }
}

【讨论】：