ASP.NET MVC 从 POST 方法渲染部分内容

发布于 2024-09-10 14:12:25 字数 1297 浏览 5 评论 0原文

问题

我有 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 执行它的单击事件。

原文

Problem

I have Telerik TabControl and each tab content is a partial view. Everything works smoothly when request is GET:

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

Now the problem is that on some tabs I have a Form that has controls that trigger submit event.

[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 ...);
}

My question is: how to render partial from the POST method? Because now with that source code tab content will be loaded to the WHOLE page, not inside tab.

Solution

I had to put DIV outside of the Ajax.Form and also I had incorrect submit on my DropDownList. What I did was that I created hidden submit button with Id and then I used jQuery to execute it's click event.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┼── 2024-09-17 14:12:25

有关其他参考，请参阅 SO 上的此问题：

MVC - 使用 Ajax 进行渲染部分视图

这显示了 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>
                    <%});

希望有所帮助。

For additional reference, please refer to this question on SO:

MVC - Using Ajax to render partial view

This shows a complete implementation of the Ajax.BeginForm with surrounding DIV and inner form controls. You should be able to place this entire setup (DIV + Form + HTML Form Elements) in the Telerik Tab, like this:

<% 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>
                    <%});

Hope that helps.

回复收藏 0 原文

肤浅与狂妄 2024-09-17 14:12:25

我做了我的槽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);

在post Action中

它工作得很好，在post上，action返回部分视图，然后ajax表单用InsertionMode.Replace替换UpdateTargetId中指定的div的内容

I did my trough ajax form:

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

and then i have

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

in post Action

And it works just fine, on post, action returns partial view and then ajax form replaces the content of the div specified in the UpdateTargetId with InsertionMode.Replace

回复收藏 0 原文

~没有更多了~