I am putting together 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 it should only open the modal.
I do not understand what is wrong for this happens, although I know that I am inside the View Create and that the submit calls the action create, but what could reverse this scenario to just open 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);
}
}