Updating a view after button click in ASP.NET MVC

Question

Have had a look at the similar questions on here but can't seem to find a solution. I'm very new to MVC so would appreciate any help.

I've been trying to build a simple browser game where the user clicks to attack, the damage is calculated and the updated stats for the characters are updated in the view. My main problem is getting the view to update with the new HitPoint values for the characters after the user has clicked the Attack button.

I've had a number of errors as I tried to get it working, but most recently am getting a Null Reference Exception. Not sure why

Here is my code:

Controller

public ViewResult CharacterSelect()
{
    var heroes = _context.Heroes.ToList();
    return View(heroes);                      
}

public ActionResult BattleArena(int? id)
{           
    Random random = new Random();
    var monsterId = random.Next(8);           

    Monster arenaMonster = _context.Monsters.SingleOrDefault(m => m.Id == monsterId);
    Hero arenaHero = _context.Heroes.SingleOrDefault(m => m.Id == id);

    var battleViewModel = new BattleViewModel(arenaHero, arenaMonster);          

    return View(battleViewModel);
}

[HttpPost]
public ActionResult Attack(int? id, int? mid)
{
    var hero = _context.Heroes.SingleOrDefault(m => m.Id == id);
    var monster = _context.Monsters.SingleOrDefault(m => m.Id == id);

    var attackBattleViewModel = new BattleViewModel(hero, monster);

    if (attackBattleViewModel != null)
    {                
        Dice newDice = new Dice();

        int heroDamage = attackBattleViewModel.Hero.AttackRoll(newDice);
        attackBattleViewModel.Monster.Defend(heroDamage);

        int monsterDamage = attackBattleViewModel.Monster.AttackRoll(newDice);
        attackBattleViewModel.Hero.Defend(monsterDamage);                

        return View(attackBattleViewModel);
    }
    else
    {
        return RedirectToAction("Index");
    }
}        

View

<div class="arenaRow">
    <div class="container">
        <div class="row arenaHealth">
            <div class="col-md-4">
                <p class="arenaHp">
                    @Model.Hero.HitPoints
                </p>
            </div>
            <div class="col-md-4">
                @using (Html.BeginForm("Attack", "Battle", FormMethod.Post))
                {
                    <button type="submit" class="attackButton" onclick="location.href='@Url.Action("Attack", "Battle", new { id = @Model.Hero.Id, mid = @Model.Monster.Id })'">Attack</button>
                }
            </div>
            <div class="col-md-4">
                <p class="arenaHp">
                    @Model.Monster.HitPoints
                </p>
            </div>
        </div>
    </div>
</div>

BattleViewModel

public class BattleViewModel
{
    public Monster Monster { get; set; }
    public Hero Hero { get; set; }

    public BattleViewModel (Hero hero, Monster monster)
    {
        Hero = hero;
        Monster = monster;
    }
}

Again, any help for the rookie would be greatly appreciated.

Answer 1

In your Post Attack method the problem is this line of code:

if (attackBattleViewModel != null)

In the linie above you have declared this as New BattleViewModel So thhe test will always be not null. Once in here, your trying to use properties of the hero and monster objects which may not have been instantiated. It might be better to change the above line to : if (hero != null && monster != null) otherwise you need to handle for null on these in the function