[Solved] Tab and Ajax

[Ed]

I have a MVC 3 TabStrip with with 5 tabs. Each tab has it's content loaded via "LoadContentFrom", which loads a partial view for the contents of each tab.

This is all working so far.

The 1st tab is called "MyProfile" and I have placed an input (button) control at the bottom of the 1st tab's partial, called "Save".

I already have a HttpGet MyProfile action method that loads the partial in the tab, I also have defined a HttpPost MyProfile method to handle the "Save" logic.

My question is, what do I return from that action method (HttpPost)? The HttpGet MyProfile action method returns the following:

Return PartialView("~/Areas/MyAccount/Views/Shared/Partials/MyAccount/_MyProfile.vbhtml", viewModel)
I can't have that same return in my HttpPost method, doing so will relust in only the partial being returned and not the page.

Any help will be greatly appreciated.

Basically, I am looking at leveraging all 5 tabs to update via ajax/client code and display a message. 

[Petur Subev]

Hi Edward,

Could you please tell us what approach you are using to submit the information presented in tab MyProfile , is it Ajax ?
Also could you share the View you return from the Get overload of the  MyProfile action method?

Regards,
Petur Subev
the Telerik team

[Ed]

Petur,

It is indeed ajax currently.

The TabStrip itself is a partial control, here is the markup for that partial:

@Imports Telerik.Web.Mvc.UI

<div id="MyAccount">
@Code
    Dim tabStrip = Html.Telerik().TabStrip().
        Name("Account").Effects(Function(ts) ts.Toggle.OpenDuration(200).CloseDuration(300))

    With tabStrip
        .Items(Function(tabItem) tabItem.Add().
                   Text("PROFILE").
                   LoadContentFrom("MyProfile", "MyAccount", New With {.area = "MyAccount"}).
                   Selected(True))
        .Items(Function(tabItem) tabItem.Add().
                   Text("PASSWORD").
                   LoadContentFrom("MyPassword", "MyAccount", New With {.area = "MyAccount"}))
        .Items(Function(tabItem) tabItem.Add().
                   Text("MY ORGANIZATION").
                   LoadContentFrom("MyOrganization", "MyAccount", New With {.area = "MyAccount"}))
        .Items(Function(tabItem) tabItem.Add().
                   Text("ADDRESS BOOK").
                   LoadContentFrom("MyAddressBook", "MyAccount", New With {.area = "MyAccount"}))
        .Items(Function(tabItem) tabItem.Add().
                   Text("SHIPPING PRESETS").
                   LoadContentFrom("MyShippingPresets", "MyAccount", New With {.area = "MyAccount"}))
        .Render()
    End With
End Code
</div>

Each one of the tabs in the above partial are loaded via "LoadContentFrom()" and each one is a partial view as well. Here is the markup for the "MyProfile" partial (which is the 1st tab all others follow the same setup):

@ModelType MyCompany.Web.Mvc.Areas.MyAccount.Models.MyAccountModel

@Using Ajax.BeginForm("UpdateProfile", "MyAccount", New With {.area = "MyAccount"}, Nothing)
    @<div id="MyProfileContainer" style="padding:15px;">
        <div id="column1" style="float:left;width:300px;">
            <div class="editor-label">
                @Html.LabelFor(Function(m) m.FirstName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(m) m.FirstName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(Function(m) m.LastName)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(m) m.LastName)
            </div>
            <div class="editor-label">
                @Html.LabelFor(Function(m) m.EmailAddress)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(m) m.EmailAddress)
            </div>
        </div>

        <div id="column2" style="float:left;width:300px;">
            <div class="editor-label">
                @Html.LabelFor(Function(m) m.TelephoneNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(m) m.TelephoneNumber)
            </div>
            <div class="editor-label">
                @Html.LabelFor(Function(m) m.TelephoneExtension)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(m) m.TelephoneExtension)
            </div>
            <div class="editor-label">
                @Html.LabelFor(Function(m) m.FaxNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(m) m.FaxNumber)
            </div>
            <div class="editor-label">
                @Html.LabelFor(Function(m) m.CellNumber)
            </div>
            <div class="editor-field">
                @Html.EditorFor(Function(m) m.CellNumber)
            </div>
        </div>
        <div id="actionContainer">
            <input type="submit" value="Save" class="button buttonTall buttonGray" />
        </div>
    </div>
End Using

Here is the MyAccount controller "Index" method, which is the page the TabStrip partial is placed on:

<HttpGet()>
<Compress()>
Public Function Index() As ActionResult

    Dim viewModel As MyAccountModel = MyCompany.Web.Mvc.Models.ModelFactory.CreateBaseModel(Of MyAccountModel)("MyCompany- My Account")
    Dim contact As Business.Entities.Contact = Me.ContactService.GetById(Me.CurrentUser.CompanyID, Me.CurrentUser.ID)

    With viewModel
        ' Page information
        .PageTitle = "MyCompany - My Account"
        .MetaDescription = "TODO:"
        .MetaKeywords = "TODO:"
        ' Content information
        .ContentTitle = "My Account"
        .ContentSubTitle = "Use the tabs below to edit your Laddawn.com account profile and settings"
        ' Model information
        .FirstName = contact.FirstName
        .LastName = contact.LastName
        .TelephoneNumber = contact.TelephoneNumber
        .TelephoneExtension = contact.TelephoneExtension
        .FaxNumber = contact.FaxNumber
        .CellNumber = contact.CellNumber
    End With

    Return View(viewModel)

End Function

Here is the action method that the TabStrip calls in MyAccountController to load the MyProfile partial view:

<HttpGet()>
<Compress()>
Public Function MyProfile() As ActionResult

    Dim viewModel As MyAccountModel = MyCompany.Web.Mvc.Models.ModelFactory.CreateBaseModel(Of MyAccountModel)("Laddawn - Contact Profile")

    With viewModel
        Dim contact As Business.Entities.Contact = Me.ContactService.GetById(Me.CurrentUser.CompanyID, Me.CurrentUser.ID)

        .FirstName = contact.FirstName
        .LastName = contact.LastName
        .TelephoneNumber = contact.TelephoneNumber
        .TelephoneExtension = contact.TelephoneExtension
        .FaxNumber = contact.FaxNumber
        .CellNumber = contact.CellNumber
    End With

    Return PartialView("~/Areas/MyAccount/Views/Shared/Partials/MyAccount/_MyProfile.vbhtml", viewModel)

End Function

Here is the function for the "Save" button on the MyProfile partial (also in MyAccountController):

Public Function UpdateProfile(model As MyAccountModel) As JsonResult

            If ModelState.IsValid Then
                Try
                    Dim contact As Business.Entities.Contact = Me.ContactService.GetById(Me.CurrentUser.CompanyID, Me.CurrentUser.ID)

                    With contact
                        .FirstName = model.FirstName
                        .LastName = model.LastName
                        .TelephoneNumber = model.TelephoneNumber
                        .TelephoneExtension = model.TelephoneExtension
                        .FaxNumber = model.FaxNumber
                        .CellNumber = model.CellNumber
                    End With

                    Me.ContactService.Update(contact)

                    ' Display notification
                    Me.ShowMessage(Notifications.MessageType.Success, "Profile updated successfully!")
                Catch ex As Exception
                    ' Display notification
                    Me.ShowMessage(Notifications.MessageType.Error, ex.Message)
                End Try
            Else
                Me.ShowMessage(Notifications.MessageType.Error, Me.GetValidationErrorHtml)
            End If

            Return Json(model, JsonRequestBehavior.AllowGet)

        End Function

This is all preliminary work and there is a lot of additional code as well as some clean up that needs to happen. But this got me to the point of having it all working.

Enjoy!