ASP.NET MVC render partial from the POST method

Question

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.

Community · Accepted Answer · 2017-05-23 10:27:42Z

3

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.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Jul 21, 2010 at 20:40

Todd

5,5181 gold badge33 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tx3 Over a year ago

I checked the link you posted. I made a little test and added a submit button instead of having only a DropDownList with submit added using jQuery. For some reason submit button behaves differently than DropDownList when submit is done. I have to investigate little bit more. I'll let you know when I solve it (finally)

Tx3 Over a year ago

I had other mistakes too like you pointed in the example. Div must be outside of the Ajax.BeginForm. Big thanks to Todd!

Nikola Markezic · Accepted Answer · 2010-07-20 11:09:38Z

1

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

answered Jul 20, 2010 at 11:09

Nikola Markezic

3291 silver badge5 bronze badges

3 Comments

Tx3 Over a year ago

Thank you for your answer. I didn't get working yet. This is what I added: <% using (Ajax.BeginForm("Translations", new { Model.Id }, new AjaxOptions { UpdateTargetId = "translationContent", InsertionMode = InsertionMode.Replace })) { %> <div style="width: 100%; height: 100%;" id="translationContent"> ... blaa blaa content blaa .. </div> <% } %> On the controller side I have: return PartialView("Translations", model);

Tx3 Over a year ago

It's still changing the whole content of the page

Nikola Markezic Over a year ago

my update target id is a div wrapping the whole form and i got it like this <div id="content"> <% Html.RenderPartial("PartialView",model); </div> then when i do post, return is a partial view, so you need to replace the old rendered partial view with the new one :D

Collectives™ on Stack Overflow

ASP.NET MVC render partial from the POST method

Problem

Solution

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Solution

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related