MVC Ajax action Link copies itself and appends, how do i fix

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.