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.

Answer 1

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.