ASP.NET MVC 从 POST 方法呈现部分内容答案

【问题标题】：ASP.NET MVC render partial from the POST methodASP.NET MVC 从 POST 方法呈现部分内容
【发布时间】：2010-07-22 16:01:07
【问题描述】：

问题

我有 Telerik TabControl，每个选项卡内容都是部分视图。当请求为 GET 时，一切正常：

//
// GET: /ProductVersion/Translations        
public ActionResult Translations(Guid id)
{
    VersionEditTabViewModel model = CreateTranslationsViewModel(id);
    return PartialView("Translations", model);
}

现在的问题是，在某些选项卡上，我有一个表单，其中包含触发提交事件的控件。

[HttpPost]
public ActionResult Translations(Guid id)
{
    FormCollection formCollection = new FormCollection(Request.Form);
    string message = string.Empty;
    int languageId = int.Parse(formCollection["TranslationsLanguageList"]);
    string action = formCollection["TranslationAction"];
    if(action == Constants.translation_save)
    {
        _translationModel.SaveTranslations(formCollection);
        message = "Translation information saved";
    }
    else if (action == Constants.translation_language_changed)
    {
/*
    PROBLEM: causes whole page to render, not partial
*/
        return PartialView("Translations", model);
    }
    return RedirectToAction( ... updates the complete page not only partial ...);
}

我的问题是：如何从 POST 方法渲染部分内容？因为现在使用该源代码选项卡内容将加载到整个页面，而不是选项卡内。

解决方案

我不得不将 DIV 放在 Ajax.Form 之外，而且我在 DropDownList 上的提交也不正确。我所做的是我用 Id 创建了隐藏的提交按钮，然后我使用 jQuery 来执行它的点击事件。

【问题讨论】：

标签： asp.net-mvc partial-views

【解决方案1】：

更多参考，请参考这个问题：

MVC - Using Ajax to render partial view

这显示了 Ajax.BeginForm 的完整实现，其中包含 DIV 和内部表单控件。您应该能够将整个设置（DIV + 表单 + HTML 表单元素）放在 Telerik 选项卡中，如下所示：

<% Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                    .Text("Your Tab Text")
                    .Content(() =>
                    {%>
                        <div id="containerDiv" align="left">
                           <% using (Ajax.BeginForm("Example", "Controller/Action", new AjaxOptions { UpdateTargetId = "containerDiv" })){ %>
                           <%-- Render Partial here -->
                           <% } %>
                        </div>
                    <%});

希望对您有所帮助。

【讨论】：

我检查了您发布的链接。我做了一个小测试并添加了一个提交按钮，而不是只有一个 DropDownList 并使用 jQuery 添加了提交。由于某种原因，提交完成后，提交按钮的行为与 DropDownList 不同。我必须再调查一点。当我解决它时我会告诉你（最终）
我也有其他错误，就像您在示例中指出的那样。 Div 必须在 Ajax.BeginForm 之外。非常感谢托德！

【解决方案2】：

我做了我的槽 ajax 表单：

using (Ajax.BeginForm("*ActionName*", new { *parameter = ID* }, new AjaxOptions { UpdateTargetId = (*div i will update*), OnSuccess = "*JavaScript that executes on success*", OnComplete = "s*ame as on success*", InsertionMode = InsertionMode.Replace }))

然后我有

return PartialView("*PartialViewName*", model);

在行动后

它工作得很好，在发布时，操作返回部分视图，然后 ajax 表单将 UpdateTargetId 中指定的 div 的内容替换为 InsertionMode.Replace

【讨论】：

感谢您的回答。我还没有开始工作。这是我添加的：
... blaa blaa content blaa ..
在控制器端我有： return PartialView("Translations", model);
它仍在改变整个页面的内容
我的更新目标 id 是一个包含整个表单的 div，我得到它是这样的
然后当我发布时，返回的是一个局部视图，所以你需要用新的替换旧的渲染局部视图：D