Button making Submit for action instead of opening only Modal

Question

I am riding a Modal to add a category and a list of products in a modal.

When I click the button to add a new product my category Create action is called when I should just open the modal.

I do not understand what is wrong for this to happen, although I know that I am inside the View Create and that Submit call the action create, but what could reverse this scenario to just open the Modal ?

My View Create!

@model Exemplos_Asp.Net.MVC.Models.Categories

@{
    /**/

    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm("Create", "Categories", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Categories</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.CategoryName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CategoryName, new { htmlAttributes = new { @class = "form-control", @autofocus = "autofocus" } })
                @Html.ValidationMessageFor(model => model.CategoryName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Picture, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" name="uploadImages" class="input-files" />
            </div>
        </div>

        @*<div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>*@
    </div>

    <table class="table">
        <tr>
            <th>
                <label>Nome do Produto</label>
            </th>
            <th>
                <label>Preço Unitário</label>
            </th>
            <th>
                <label>Nivel Recoder</label>
            </th>
            <th>
                <button class="btn btn-default NovoProduto" data-id="0"><i class="glyphicon glyphicon-plus"></i></button>
            </th>
        </tr>

        @foreach (var produto in Model.Products)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => produto.ProductName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => produto.QuantityPerUnit)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => produto.ReorderLevel)
                </td>
                <td>
                    <button class="btn btn-default details" data-id="@produto.ProductID"><i class="glyphicon glyphicon-file"></i></button>
                    <button class="btn btn-danger delete" data-id="@produto.ProductID"><i class="glyphicon glyphicon-trash"></i></button>
                    <button class="btn btn-primary edit" data-id="@produto.ProductID"><i class="glyphicon glyphicon-edit"></i></button>
                </td>
            </tr>
        }
    </table>
    <div class="modal" id="modal">

    </div>
}
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
    $(function () {
        $(".NovoProduto").click(function () {
            $("#modal").load("NovoProduto", function () {
                $("#modal").modal();
            })
        });

        $(".edit").click(function () {
            var id = $(this).attr("data-id");
            $("#modal").load("Edit?id=" + id, function () {
                $("#modal").modal();
            })
        });
    });
</script>

My View Create Product!

@model Exemplos_Asp.Net.MVC.Models.Products

@{
    ViewBag.Title = "Novo Produto";
}

<h2>Edit Produto</h2>

<div class="modal-dialog">
    <div class="modal-content">
        @using (Html.BeginForm())
        {
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">Novo produto</h4>
            </div>

            @Html.AntiForgeryToken()

            <div class="modal-body">

                <div class="form-horizontal">
                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        <div class="col-md-6">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.ProductName)
                            </div>
                            <div class="col-md-12">
                                @Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.SupplierID)
                            </div>
                            <div class="col-md-12">
                                @Html.DropDownList("SupplierID", null, htmlAttributes: new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.SupplierID, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        @*<div class="col-md-3">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.CategoryID, "CategoryID")
                            </div>
                            <div class="col-md-12">
                                @Html.DropDownList("CategoryID", null, htmlAttributes: new { @class = "form-control" })
                                @Html.ValidationMessageFor(model => model.CategoryID, "", new { @class = "text-danger" })
                            </div>
                        </div>*@
                    </div>
                    <div class="form-group">
                        <div class="col-md-3">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.QuantityPerUnit)
                            </div>
                            <div class="col-md-12">
                                @Html.EditorFor(model => model.QuantityPerUnit, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.QuantityPerUnit, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.UnitPrice)
                            </div>
                            <div class="col-md-12">
                                @Html.EditorFor(model => model.UnitPrice, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.UnitPrice, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.UnitsInStock)
                            </div>
                            <div class="col-md-12">
                                @Html.EditorFor(model => model.UnitsInStock, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.UnitsInStock, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.UnitsOnOrder)
                            </div>
                            <div class="col-md-12">
                                @Html.EditorFor(model => model.UnitsOnOrder, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.UnitsOnOrder, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.ReorderLevel)
                            </div>
                            <div class="col-md-12">
                                @Html.EditorFor(model => model.ReorderLevel, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.ReorderLevel, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="control-label col-md-12">
                                @Html.LabelFor(model => model.Discontinued)
                            </div>
                            <div class="col-md-1">
                                @Html.EditorFor(model => model.Discontinued)
                                @Html.ValidationMessageFor(model => model.Discontinued, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create" class="btn btn-default" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" value="Salvar" class="btn btn-primary" />
                <input type="button" value="Cancelar" class="btn btn-default" data-dismiss="modal" />
            </div>
        }
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

My Controller.

 public class CategoriesController : Controller
    {
        private Context db = new Context();

        // GET: Categories
        public ActionResult Index()
        {
            return View(db.Categories.ToList());
        }

        // GET: Categories/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Categories categories = db.Categories.Find(id);
            if (categories == null)
            {
                return HttpNotFound();
            }
            return View(categories);
        }

        // GET: Categories/Create
        public ActionResult Create()
        {
            var categoria = new Categories();
            return View(categoria);
        }

        // POST: Categories/Create
        // Para se proteger de mais ataques, ative as propriedades específicas a que você quer se conectar. Para 
        // obter mais detalhes, consulte https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(Categories categories)
        {
            if (ModelState.IsValid)
            {
                categories.Picture = new byte[categories.UploadImages.ContentLength];
                categories.UploadImages.InputStream.Read(categories.Picture, 0, categories.Picture.Length);

                db.Categories.Add(categories);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(categories);
        }

        // GET: Categories/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Categories categories = db.Categories.Find(id);
            if (categories == null)
            {
                return HttpNotFound();
            }
            return View(categories);
        }

        // POST: Categories/Edit/5
        // Para se proteger de mais ataques, ative as propriedades específicas a que você quer se conectar. Para 
        // obter mais detalhes, consulte https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit(Categories categories)
        {
            if (ModelState.IsValid)
            {
                db.Entry(categories).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(categories);
        }

        // GET: Categories/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Categories categories = db.Categories.Find(id);
            if (categories == null)
            {
                return HttpNotFound();
            }
            return View(categories);
        }

        // POST: Categories/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Categories categories = db.Categories.Find(id);
            db.Categories.Remove(categories);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        public ActionResult NovoProduto()
        {
            Products products = new Products();

            ViewBag.SupplierID = new SelectList(db.Suppliers, "SupplierID", "CompanyName");

            return View("NovoProduto", products);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult NovoProduto(Products products)
        {
            if (ModelState.IsValid)
            {
                var categoria = new Categories();

                categoria.Products.Add(products);
                return View("Create", categoria);
            }

            ViewBag.SupplierID = new SelectList(db.Suppliers, "SupplierID", "CompanyName");

            return View("NovoProduto", products);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }

Answer 1

The element <button> when inside a form has by default the type="submit". By clicking it it will perform the functions or events to which it is bound, but will also submit the form in sequence.

If you want it to behave just like a click button to call a function or event, put the attribute type="button".

<form>
   <button type="button">Botão</button>
</form>