MVC Ajax action Link copies itself and appends, how do i fix - asp.net-mvc-3

Question

I am using ordered list design to to make my twitter app to view the tweets. Every Time I call the ajax insert, it puts puts another copy of the ajax link on the page . I am just trying to get the next set of tweets from the controller and inserting them so it lines up. I have tried moving the tags around and but the additional ajax buttons keep showing up.
Thinking it was a css problem i stripped it all out. Wasnt the issue. I will have to reformat my list again to put the closing and openning tags before and after the code block.
I just tried to putting it in a partial view and I put the ajax code in the layout.
Ajax Action Link
#Ajax.ActionLink("Update Tweets", "Index", "Home",
new AjaxOptions
{
UpdateTargetId = "TweetBox",
InsertionMode = InsertionMode.InsertBefore,
HttpMethod = "Get",
})
Partial View
<div id="TweetBox">
<div class="TwitterMessageBox">
<ol>
<li class="TweetLineBody">
#foreach (var item in Model)
{
#Html.Hidden(item.StatusId, item.StatusId)
<div class="TwitProfileImage">
<img src=#Url.Content(item.ImageUrl) alt="#item.ScreenName" />
</div>
<div class="TwitRealName">
#item.User
</div>
<div class="TwitNickName">
#MvcHtmlString.Create(#Html.Namify(#item.ScreenName))
</div>
<div class="TweetText">
#MvcHtmlString.Create(#item.Tweet)</div>
<div class="TweetTime">
#Html.RelativeDate(#item.Created)</div>
<div class="TweetRating">
Rating</div>
}
</li>
</ol>
</div>
</div>
The Controller is just a basic Enumerable List on the Home/ Index
This is the behavior
Lets say you have an ajax call that gets data from a controller action. It inserts before on a targetid thats a div id.
The initial view is perfect
AJAX UPDATE HTML LINK // You click it to get the controller invoke the ajax and get the data
Tweet 1
Tweet 2
etc = its perfect and aligned
You click the Ajax action link in your webpage, It goes out and gets the data but adds a second like like this
AJAX UPDATE HTML LINK
AJAX UPDATE HTML LINK
Tweet 1
Tweet 2 // alignment is still perfect but you have the 2nd ajax links
Now click the ajax link a 3rd time
// alignment is still perfect but you have the 2nd ajax link at top and one sandwiched
AJAX UPDATE HTML LINK
AJAX UPDATE HTML LINK
Tweet 1
Tweet 2
// alignment is still perfect but you have the 2nd ajax link at top and one sandwiched
Plus the Tweets results
AJAX UPDATE HTML LINK
Tweet 1
Tweet 2 // alignment is still perfect but you have the 2nd ajax links at the top and a 3rd List is inserted betweet 2/3
Controller Code per request:
public class HomeController : Controller
{
//
// GET: /Home/
private TwitterContext twitterCtx;
public ActionResult Index()
{
twitterCtx = new TwitterContext();
List<TweetViewModel> friendTweets = (from tweet in twitterCtx.Status
where tweet.Type == StatusType.Public
select new TweetViewModel
{
ImageUrl = tweet.User.ProfileImageUrl,
UserId = tweet.UserID,
User = tweet.User.Name,
ScreenName = tweet.User.Identifier.ScreenName,
StatusId = tweet.StatusID,
Tweet = HomeController.AddWebAndTwitterLinks(tweet.Text),
Created = tweet.CreatedAt
})
.ToList();
return View(friendTweets);
}
My Desired Behavior is 1 ajax link to call the controller and the data inserts

Answer 1

Without seeing all the code, I can only assume you don't have your views sorted out. Your controller appears to be returning the full Index view. If you put your tweet box into a partial view, your ajax action needs to be returning that partial view.