asp.net mvc 4.0 ajax, duplicated content

Question

Ok, so, first of all i am new to asp.net mvc and ajax. What i am trying to do, is really simple;

I have a table, displaying a list of events that a logged in user can attend. each element in the list, has a ajax.BeginForm() that points to an action that will connect the user to the event.

When the user is connected with the event, the page should update, so that the number of attendants is displayed properly on the page.

All, this is working properly. But, what is happening when the page is updated, is that the entire content of my _Layout.cshtml page is duplicated inside a copy of the 'div id="tableevent"' that i have specified in "UpdateTargetId" to be updated.

Snippet from the view

<div id="tableevents">
    <table class="table table-striped table-bordered table-condensed">

//I DISPLAY TABLE ITEMS HERE.

           @using (Ajax.BeginForm("AddAttendantToEvent", "MadklubEvents", new AjaxOptions()
                    {
                        HttpMethod = "post",
                        UpdateTargetId = "tableevents"
                    }))
                    {          
                        @Html.Hidden("EventID", item.MadklubEventID);
                        <input type="submit" value="Join!" id="join" class="btn" />                             
                    }  


        </table>
    </div>

AddAttendantToEvent Action This is possibly where i have gone wrong.. i used to just post data to this action, through a normal submit form, no ajax. I have not changed anything in this action.

[HttpPost]
[Authorize]
public ActionResult AddAttendantToEvent(int EventID)
{

    if (ModelState.IsValid)
    {
        var uow = new RsvpUnitofWork();

        var currentUser = WebSecurity.CurrentUserName;
        var Event = uow.EventRepo.Find(EventID);
        var user = uow.UserRepo.All.SingleOrDefault(u => u.Profile.UserName.Equals(currentUser));
        user.Events.Add(Event);
        Event.Attendants.Add(user);
        uow.Save();
        return RedirectToAction("Index");
    }

    {
        return View();
    }

}

Index The action that is redirected to: This is where the viewmodel, that contains the data, that my table is populated with, is initiated.

public ViewResult Index()
{
    ViewModelTest viewmodel = new ViewModelTest();
    viewmodel.events = madklubeventRepository.AllIncluding(madklubevent => madklubevent.Attendants).Take(10);
    viewmodel.users = kitchenuserRepository.All;

    return View(viewmodel);
}

Why is the div getting copied, and why is the entire content of my main _Layout page, getting duplicated inside the copy of the tag?

Please point me in the right direction! :)

Answer 1

You should return a PartialView that contains only the HTML that you want to display in your div.

  [HttpPost]
    [Authorize]
    public ActionResult AddAttendantToEvent(int EventID)
    {

        if (ModelState.IsValid)
        {
            var uow = new RsvpUnitofWork();

            var currentUser = WebSecurity.CurrentUserName;
            var Event = uow.EventRepo.Find(EventID);
            var user = uow.UserRepo.All.SingleOrDefault(u => u.Profile.UserName.Equals(currentUser));
            user.Events.Add(Event);
            Event.Attendants.Add(user);
            uow.Save();
            ViewModelTest viewmodel = new ViewModelTest();
            viewmodel.events = madklubeventRepository.AllIncluding(madklubevent =>  madklubevent.Attendants).Take(10);
    viewmodel.users = kitchenuserRepository.All;

            return PartialView("_Events", viewmodel)

        }

        {
            return View();
        }

    }