lundi 2 mai 2016

MVC AJAX Updating

I am trying to update my page with ajax and have a form inside my page but whenever I return a partial view, it returns on a new page.

The code is as follows:

..Other code in my view
<div id="createTeam">
    @using (Ajax.BeginForm("CreateTeam", "Lobby", new AjaxOptions
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "createTeam"
    }, new { id = "formCreateTeam" }))
        <button id="btnCloseCreateTeam" class="btnClose">X</button>
        <div id="leftSide">
            <p>Team Logo</p>
            <img id="imgTeamLogo" src="~/Content/Images/default_logo.png" />
            <div id="fileUpload">
                <span class="upload">Upload</span>
                <input type="file" id="uploadTeamLogo" name="TeamLogo" accept="image/*">
        <div id="rightSide">
            <p id="lblError" class="txtRedMedium">@Model.Error</p>
            @Html.ValidationMessage("TeamName", new { @class = "textRedSmall" })
            <label class="textBlackMedium">Team Name:</label><br />
            <input type="text" id="editTeamName" name="TeamName" class="textbox"><br />
            <label class="textBlackMedium">Team Description:</label><br />
            <textarea id="editTeamDescription" name="TeamDescription" class="textarea"></textarea><br />
            <input type="submit" value="Create Team" class="buttonCreateTeam">
            <input type="text" value="@Model.Sport.Name" name="sport" />
...Other code in my view

Controller function:

public PartialViewResult CreateTeam(LobbyMatchesViewModel model, String sport)
        model.Sport = new Sport();
        model.Sport.Name = sport;
        model.TeamCreated = false;

        /****************** Create Team *******************/

        // Check if team name is available
        Team tempTeam = db.getTeamByName(model.TeamName, sport);
        if (tempTeam != null)
            // Team name for this sport is already taken
            model.Error = "Team name is already taken!";
            return PartialView("CreateTeam", model);
        // Add image to user
        if (model.TeamLogo != null)
            byte[] data = new byte[model.TeamLogo.ContentLength];
            model.TeamLogo.InputStream.Read(data, 0, model.TeamLogo.ContentLength);
            model.ActualImage = data;
        model.TeamCreated = true;
        model.NewTeam = new Team(0, db.getSportID(sport), 0, 0, model.TeamName, model.TeamDescription, 100, null, model.ActualImage);
        db.addTeam(model.NewTeam, sport);
        return PartialView("CreateTeamSuccess");

I don't understand why it is loading a new page rather than just the div "createTeam". It is sending me to a page Lobby/CreateTeam instead of Lobby/Matches which is what I am on when I submit the form. Shouldn't Lobby/CreateTeam just render a partial view back to Lobby/Matches?

Aucun commentaire:

Enregistrer un commentaire