I have a MessagingContainer that is going to display an Inbox and Outbox partial view. The Inbox and Outbox will toggle within the div on a click event. Since the Inbox is getting rendered on load, passing the Model is easy.
MessagingContainer –
<div id="messagingContainer">
@{
Html.RenderPartial(@"~Inbox.cshtml", Model);
}</div>
There is a link to get to the Outbox that will trigger an ajax event.
$('#outBox_@(instanceId)').unbind('click').bind('click', function () {
$.ajax({
type: 'POST',
url: '/Messaging/GetOutbox',
data: data,
success: function (result) {
$('#messagingContainer').html(result);
},
error: function (req, status, error) {
alert('Failed Method: MessagingController.GetOutbox');
}
});
});
The Model has multiple properties and objects in it so trying to recreate it as a JSON array would be long and tedious. My only thought right now is to pass in the Model.Id to the controller, re-fetching the Model object and then passing that newly fetched Model to the Outbox partial.
I was just curious if there was a more trixy way to to accomplish this that I haven’t come across yet.
I might suggest that you consider having separate inbox/outbox actions with the same or different views, then use
Html.Action()to render the Inbox when in your index action, delivering just the partial HTML when you toggle to the outbox.Controller
View (index)
Your AJAX code basically remains the same, but you are only rendering the partial HTML for just the outbox in the response and you can probably reuse a fair amount of the code for your Inbox/Outbox actions, likely including the partial view itself.