Em outro post mostrei como você pode utilizar a biblioteca JavaScript da Microsoft para construir um formulário em ASP.NET MVC com recursos Ajax [Leia mais], nesse exemplo eu utilizei o Ajax.BeginForm Helper Methods que recebe como parâmetro uma instância da classe AjaxOptions.

Neste post vou mostrar como você pode utilizar a classe AjaxOptions para controlar as solicitações Ajax, a classe possui apenas propriedades, veja a descrição de todas abaixo.

Confirm: essa propriedade recebe uma string com uma mensagem de confirmação que será exibida ao usuário antes do início da solicitação Ajax e antes do método OnBegin. Definir um valor para essa propriedade é equivalente a chamar a função JavaScript Confirm(‘Valor’);

HttpMethod: defini qual método será utilizado para enviar os dados para o servidor (GET ou POST).

InsertionMode: define o modo de inserção da resposta do servidor dentro do elemento HTML definido na propriedade UpdateTargetId, seu valor é definido através de um enum com três opções. InsertAfter: insere a resposta sempre no fim do elemento HTML. InsertBefore: insere a resposta sempre no inicio do elemento HTML . Replace: limpa todo o conteúdo antes de inserir a resposta, esse é o valor padrão.

UpdateTargetId: define o id do elemento HTML que receberá a resposta do servidor.

LoadingElementId: define o id do elemento HTML que será exibido durante o processo. Você pode colocar qualquer coisa dentro desse elemento, tipicamente uma animação é inserida dentro desse elemento.

Url: defini a URL que receberá a solicitação Ajax.

OnBegin: define o nome da função JavaScript que será chamada antes de iniciar o processo. A assinatura da função recebe como parâmetro um objeto AjaxContext.

function Begin(ajaxContext) {
    alert('Begin');
}

OnComplete: define o nome da função JavaScript que será chamada ao final do processo. A assinatura da função recebe como parâmetro três objetos Request, AjaxOptions, AjaxContext.

function Complete(request, ajaxOptions, ajaxContext) {
    alert('Complete');
}

OnSuccess: define o nome da função JavaScript que será chamada depois da função OnComplete caso não ocorra nenhum erro. A assinatura da função recebe como parâmetro um objeto AjaxContext.

function Success(ajaxContext) {
    alert('Success');
}

OnFailure: define o nome da função JavaScript que será chamada depois da função OnComplete caso ocorra algum erro. A assinatura da função recebe como parâmetro um objeto AjaxContext.

function Failure(ajaxContext) {
    alert('Failure');
}

Agora que já conhecemos todas as propriedades da classe AjaxOptions, podemos montar um exemplo para ver tudo isso funcionando.

Modelo

O modelo será apenas uma classe conforme código abaixo.

public class Filme
{
    public int FilmeId { get; set; }
    public string Nome { get; set; }
    public string Genero { get; set; }
    public string Sinopse { get; set; }
}

View

Vou utilizar a View Index do Controller Home.Veja o código abaixo.

1.Código da view Index

A view acima depende de três arquivos JavaScript , os arquivos MicrosoftAjax.js e MicrosoftMvcAjax.js referente a biblioteca da Microsoft para Ajax e o arquivo AjaxOption.js que contém as funções JavaScript configuradas para as propriedades OnBegin,OnComplete,OnFailure e OnSuccess, veja o código completo do arquivo AjaxOption.js abaixo .

function Begin(ajaxContext) {
    alert('Begin');
}

function Complete(request, ajaxOptions, ajaxContext) {
    alert('Complete'); 
}

function Failure(ajaxContext) {
    alert('Failure'); 
}

function Success(ajaxContext) {
    alert('Success');
}

Para montar o formulário da View utilizei o Helper Ajax.BeginForm , que recebe uma instância da classe AjaxOptions. A view possui também dois span loading e retorno configurados nas propriedades LoadingElementId e UpdateTargetId. Loading: possui um GIF com animação que será exibida durante o processo , esse span possui um atributo style que deixa o seu conteúdo invisível por padrão. Retorno: esse span é utilizado para exibir o retorno do servidor.

Controller

A action Adicionar deve ser inserida no controller Home ,veja o código abaixo.

[AcceptVerbs(HttpVerbs.Post)]
public string Adicionar(Filme filme)
{
    return string.Format("ID: {0} 
Nome: {1}
Genero: {2}
Sinopse: {3}",
        filme.FilmeId, filme.Nome, filme.Genero, filme.Sinopse);
}

A action Adicionar simplesmente retorna uma string com os dados do filme.

Fluxo de execução no lado do cliente

Veja o fluxo de execução da solicitação Ajax que você pode controlar, no lado do cliente.

2.Fluxo de execução no lado do cliente.

Agora podemos executar a aplicação, o resultado esperado pode ser visto na imagem abaixo.

3.Imagem da Aplicação.

Conclusão

Vou utilizar apenas uma frase. “O controle esta em suas mãos!”

Aqui você pode baixar o exemplo em C# e VB.NET

Daniel Fonseca Castro