Run the Submit of a form in an element click event

Asked

Viewed 387 times

0

What is the best way to perform a POST at the click of a button in an Asp.net MVC form.

View Create:

@model Projeto.WebERP.EntityFramework.Entities.Pais

@{
    ViewBag.Title = "Create";
}

<div id="bannerMessage">

</div>

| @Html.ActionLink("Listar Paises", "Index", "Pais") |
<h2> Cadastro de País </h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Handle)

    <hr />

    <div class="form-horizontal">
        <div class="row">
            <!-- DESCRICAO -->
            <div class="col-md-4">
                <label for="txtDescricao"> Descrição: </label>
                @Html.TextBoxFor(model => model.Descricao, new { type = "text", @class = "form-control", id = "txtDescricao" })
                @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
            </div>
            <!-- SIGLA -->
            <div class="col-md-2">
                <label for="txtSigla"> Sigla: </label>
                @Html.TextBoxFor(model => model.Sigla, new { type = "text", @class = "form-control", id = "txtSigla" })
                @Html.ValidationMessageFor(model => model.Sigla, "", new { @class = "text-danger" })
            </div>
        </div>
        <br />
        <div class="row">
            <!-- DATACADASTRO -->
            <div class="col-md-4">
                <label for="txtDataCadastro"> Data Cadastro: </label>
                @Html.TextBoxFor(model => model.DataCadastro, new { type = "datetime", @class = "form-control", readOnly = true, id = "txtDataCadastro" })
                @Html.ValidationMessageFor(model => model.DataCadastro, "", new { @class = "text-danger" })
            </div>

            <!-- DATAALTERACAo -->
            <div class="col-md-4">
                <label for="txtDataAlteracao"> Data Alteração: </label>
                @Html.TextBoxFor(model => model.DataAlteracao, new { type = "datetime", @class = "form-control", readOnly = true, id = "txtDataAlteracao" })
                @Html.ValidationMessageFor(model => model.DataAlteracao, "", new { @class = "text-danger" })
            </div>
        </div>
        <br />
        <div class="row">
            <!-- BOTAO SALVAR -->
            <div class="col-md-1">
                <a href="javascript:;" id="btnSalvar" class="btn default green">
                    <i class="fa fa-plus"></i>  Salvar
                </a>
            </div>           
        </div>
    </div>
}

@section Scripts{
    <script>
        jQuery(document).ready(function(){

            // Elementos
            var $btnSalvar = $("#btnSalvar");

            // Eventos
            $btnSalvar.on("click", function () {

                // Realizar o post do submit

                var $divMessage = $("#bannerMessage");
                var html = "  <div class='alert alert-success'> " +
                           "    <strong>Success!</strong> Registro cadastrado com sucesso! " +
                           "  </div> ";                          
                $divMessage.html(html);
            });
        });
    </script>
}

Controller

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using Projeto.WebERP.EntityFramework.Context;
using Projeto.WebERP.EntityFramework.Entities;

namespace Projeto.WebERP.Web.Controllers
{
    public class PaisController : Controller
    {
        private Repositorio.Entities.Repositorio<Pais> Repositorio = new Repositorio.Entities.Repositorio<Pais>();

        [HttpGet]
        public JsonResult FiltroListarRegistros(string coluna, string filtro)
        {
            try
            {
                if (coluna.Contains("Todos"))
                {
                    return Json(Repositorio.GetAll().ToList(), JsonRequestBehavior.AllowGet);
                } 
                else if (coluna.Contains("Handle"))
                {
                    long handle = Convert.ToInt64(filtro);
                    return Json(Repositorio.Where(x => x.Handle == handle).ToList(), JsonRequestBehavior.AllowGet);
                }
                else if (coluna.Contains("Sigla"))
                {
                    return Json(Repositorio.Where(x => x.Sigla.Contains(filtro)).ToList(), JsonRequestBehavior.AllowGet);
                }
                else if (coluna.Contains("Descrição"))
                {
                    return Json(Repositorio.Where(x => x.Descricao.Contains(filtro)).ToList(), JsonRequestBehavior.AllowGet);
                }
                else
                    return null;
            }
            catch
            {
                throw;
            }            
        }

        // GET: Pais
        public ActionResult Index()
        {
            return View();
        }

        // GET: Pais/Details/5
        public ActionResult Details(long? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Pais pais = Repositorio.GetByHandle(id.Value);
            if (pais == null)
            {
                return HttpNotFound();
            }
            return View(pais);
        }

        // GET: Pais/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Pais/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "Handle,Descricao,Sigla,DataCadastro,DataAlteracao")] Pais pais)
        {
            if (ModelState.IsValid)
            {                
                Repositorio.Insert(pais);
                return RedirectToAction("Index");
            }

            return View(pais);
        }

        // GET: Pais/Edit/5
        public ActionResult Edit(long? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Pais pais = Repositorio.GetByHandle(id.Value);
            if (pais == null)
            {
                return HttpNotFound();
            }
            return View(pais);
        }

        // POST: Pais/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "Handle,Descricao,Sigla,DataCadastro,DataAlteracao")] Pais pais)
        {
            if (ModelState.IsValid)
            {                
                Repositorio.Update(pais);                
                return RedirectToAction("Index");
            }
            return View(pais);
        }

        // GET: Pais/Delete/5
        public ActionResult Delete(long? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Pais pais = Repositorio.GetByHandle(id.Value);
            if (pais == null)
            {
                return HttpNotFound();
            }
            return View(pais);
        }

        // POST: Pais/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(long id)
        {
            Pais pais = Repositorio.GetByHandle(id);
            Repositorio.Delete(pais);

            return RedirectToAction("Index");
        }
    }
}
c# jquery asp.net-mvc ajax

  • It was not clear your doubt, you would like to make a request ajax?

  • Exactly, I created a <a> tag in this element click event I would like to perform an ajax request, in case the form post.

  • Execute Contoller Create(Httppost), via ajax request, I searched and found nothing similar to what I want.

1 answer

1

For ajax request you can do so:

    <form name="formCreate" id="formCreate" method="post">
            @Html.AntiForgeryToken()
            <div class="col-md-4">
                <label for="txtDescricao"> Descrição: </label>
                @Html.TextBoxFor(model => model.Descricao, new { type = "text", @class = "form-control", id = "txtDescricao" })
                @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
            </div>
            <button type="button" id="btnCreate" class="btn btn-success" onclick="enviaCreate()">
                Salvar
            </button>
    </form>

    @section Scripts {
       <script>    
            function enviaCreate(){
            var objeto = $("#formCreate").serialize();                  
                $.ajax({
                    url: /Controller/Action,
                    type: "POST",
                    data: objeto,
                    datatype: "json",
                    success: function (data) {            
                        alert(data.Mensagem);
                    }
                });
            }
        </script>
    }

Action:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Handle,Descricao,Sigla,DataCadastro,DataAlteracao")] Pais pais)
  {
      if (!ModelState.IsValid)
           return Json(new { Mensagem = "Falha no modelo" });           

      Repositorio.Insert(pais);          
      return Json(new { Mensagem = "Sucesso"});
  }

Browser other questions tagged c# jquery asp.net-mvc ajax

You are not signed in. Login or sign up in order to post.