método de formulário mvc = 'post' com dois botões de envio

Question

Eu revisei vários posts aqui para uma solução.Vou tentar uma nova pergunta.

meu formulário:

<form method="post" action="@Url.Action("Manage")"  data-cs-ajax="true" data-cs-target="#catalogList" >

Possui campo de preenchimento automático e paginação, muito semelhante ao exemplo OdeToFood de Scott Allen.

Há :

<input type="submit" value="Update" class="btn btn-default" />

que atualiza alguns itens filtrados para selecionados - tudo funciona muito bem - e também:

<input type="submit" name="btnSave" id="btnSave" value="Save" class="btn btn-default" />

Ambos acertaram com sucesso:

//POST: /WebCatalog/Manage/5
[HttpPost, ActionName("Manage")]
[ValidateAntiForgeryToken]
public ActionResult Manage([Bind(Include = "Id,CatalogId,CatalogColourId,CatalogSizeId,CatalogCategoryId,CatelogSupplierId,StartDate,EndDate,Active,isSubmitted")] WebCatalogViewModel model, string searchTerm = null, int page = 1)
    { ...

Eles atingem a ação do controlador por causa do javascript:

$(function () {

var ajaxFormSubmit = function () {
    var $form = $(this);

    var options = {
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    };

    $.ajax(options).done(function (data) {
        var $target = $($form.attr("data-cs-target"));
        var $newHtml = $(data);
        $target.replaceWith($newHtml);
        var options = {};
        $newHtml.effect("highlight", options, 500, doneEffect);
    });

    return false;
};

Agora...

Quero definir um campo no modelo para que o controlador saiba que o segundo botão btnSave foi clicado... para salvar o registro, é claro....

Então...

$(function () {

    $("#btnSave").click(function () {

        $("isSubmitted").val("1");
        return true;
    });

});

E isso dispara:antes que a página seja enviada via ajax em ajaxFormSubmit, o código jQuery do botão para $(#btnSave") é acionado com êxito.

Porém, na ação do controlador, isSubmitted é sempre 0.

Eu tentei :

$("isSubmitted").val(1);

Eu tentei o formulário como method='get' e ainda não há postagem - embora eu possa tentar alterar o método com javascript na função btnSave.click js - não tenho certeza de como fazer isso ... se puder ' Se não salvar um valor em um controle de formulário, por que eu poderia alterar o método do formulário?

Eu tentei um $Ajax.ActionLink - mas sempre recebo um erro 500 IIS.

Basicamente, preciso saber se o usuário clicou no botão Salvar, em vez de no botão Atualizar.

Qualquer conselho é apreciado!

Answer 1

@Robert Achmann, aqui está minha resposta

Parece que o seletor em $("isSubmitted") está faltando, por exemplo.$("#isSubmitted") para uma entrada com um id isSubmitted.

Answer 2

Você não precisa de um valor oculto para informar ao controlador qual botão foi clicado.O que você precisa fazer é nomear os 2 botões da seguinte forma

<input type="submit" name="btnAction" value="Update" class="btn btn-default" />
<input type="submit" name="btnAction" value="Save" id="btnSave" class="btn btn-default" />

Como você pode ver, eles têm o mesmo nome, mas valores diferentes (atualizar vs salvar).

No controlador, adicione outro parâmetro chamado btnAction, que é o nome dos botões, para a ação.

[HttpPost, ActionName("Manage")]
[ValidateAntiForgeryToken]
public ActionResult Manage(string btnAction, [Bind(Include = "Id,CatalogId,CatalogColourId,CatalogSizeId,CatalogCategoryId,CatelogSupplierId,StartDate,EndDate,Active,isSubmitted")] WebCatalogViewModel model, string searchTerm = null, int page = 1)
{
     if(btnAction.ToLower() == "save")
     {
          // The save button was clicked
     }
     else if(btnAction.ToLower() == "update")
     {
          // The update button was clicked
     }
     else
     {
          // default ...
     }
}

Basicamente, o parâmetro btnAction obterá o valor do botão enviar que aciona o formulário para receber a postagem.

Espero que isso ajude.

Answer 3

Você poderia criar um campo oculto em seu formulário para armazenar o valor de qual campo foi clicado (controlando isso com manipuladores de eventos jquery) e, para isso, você poderia fazer seu botão type="button" em vez de type="submit" (para envie seu formulário a partir do seu código Jquery) ou você pode usar eventPreventDefault.

Bem, aqui está um exemplo de código que pode ajudá-lo:

    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#bt1").click(function(){
        alert(' Save button');
        $("#operation").val('save');
        $("#frm").submit();
      });

      $("#bt2").click(function(){
        alert(' Update button');
        $("#operation").val('update');
        $("#frm").submit();
      });
    });
    </script>
    </head>

    <body>
       <form id="frm">
        <div id="div1"><h2> Form buttons - What of then was clicked? </h2></div>
        <button id="bt1"> Save button </button>
        <button id="bt2"> Update button </button>
         <input type="hidden" id="operation" name="operation" value=""/>
        </form>     
        </body>
        </html>