javascript – Display one button based on the action of another

Question:

I'm new to ASP.NET MVC
I have a project.
And within a given view I have two buttons.

However, one of them can only appear if the other is executed.

1 Button> Save (save car)
2 Button> Associate a dealership (can only be enabled when I save the car)

Associate a Dealership is a PopUp that displays a grid with a checkbox and allows the user to select a Dealership to associate. This already works perfectly.

Can you help me? If you need more information, just let me know.

I believe I need a javascript code in the view, but I have no idea how to assemble it. I don't have enough knowledge in js.

Both are in the same view.

View

@model Carro
@{
    var idConcessionaria = "id" + Guid.NewGuid().ToString().Substring(0, 5);

}
<div class="box-fields">
    @using (Ajax.BeginForm(
        "Incluir",
        "Carro",
        new DefaultAjaxOptions()
    ))
    {
        @Html.Partial("Validation")

       @Html.HiddenFor(i => i.Id)
       @Html.EditorFor(i => i.Modelo)
       @Html.EditorFor(i => i.Codigo)
        [...]



       <div class="clear">

        <div class="box-button">
            <input type="submit" class="button blue" value="@Geral.Salvar" />
        </div>


        <div id="@idConcessionaria" class="box-button">
         <a class="button blue" href="#@idConcessionaria" onclick="openPopUpConcessionaria()" >@AdicionarConcessionaria</a>
        </div>
        </div>

    }

    <script language="javascript" type="text/javascript">

    function openPopUpConcessionaria() {
        var newGuid = guid();
        $('#console').load('@Url.Action("SelecionarConcessionaria", "Concessionaria")');
        return false;
    }


</script>

car controller

public ViewResultBase Salvar()
    {
        Carro model = new Carro();
        return base.SwitchView(model);
    }
[HttpPost]
[OutputCache(Duration = 0)]
public ViewResultBase Salvar([ModelBinder(typeof(CollectionModelBinder))]Carro model)
{
    if (this.ModelState.IsValid)
    {
        try
        {                    
            this.Service.AddItem(model);

            return this.PopUpSuccessView();
        }
        catch (ValidationException exception)
        {
            base.AddValidationErrors(exception);
            return base.PartialView(model);
        }
    }
    else
    {
        return base.PartialView(model);
    }
}

Services

public void AddItem(Carro item)
        {
            base.context.Carros.Add(item);
            base.Save();
        }

Answer:

I believe that the best way would be for you to change your system flow so that the Associate button is only shown when the user is Editing a car.

For example, create an Action called Add, in this action you return a View called AddOrEdit.cshtml (reuse the same View).

public ActionResult Adicionar()
{
    return View("AdicionarOuEditar");
}

[HttpPost]
public ActionResult Adicionar(SuaModelAqui model)
{
    //seu código para salvar aqui
    return RedirectToAction("Editar", new { id = seuNovoIdAqui });
}

Create the respective Action for your HttpPost.

In your View, create a condition to show or not the button, something like:

@if(Model != null && Model.Id != 0)
{
   significa que sua view está em modo de edição
   mostra o botão
}

Then you create another action called Edit and follow the same steps as before, but with specific codes for editing.

public ActionResult Editar(int id)
{
    var model = carregarSuaModelAqui(id);
    return View("AdicionarOuEditar", model);
}

[HttpPost]
public ActionResult Editar(SuaModelAqui model)
{
    //seu código para salvar aqui
    return Redirect(Request.RawUrl);
}