ASP.NET MVC Form posting from direct page not from tab

Question

First Time posting here, I won't use it as an excuse not to be helpful but this is driving me nuts. I am a complete noob, this isn't hw but this is my first (at home/for fun) type of project with asp.net mvc.

So here we go..

My Main menu looks as such.

@{
    ViewBag.Title = "Index";
}

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#firstTab">View All 
Vendors</a></li>
    <li><a data-toggle="tab" href="#secondTab">Add New</a></li>
    <li><a data-toggle="tab" href="#thirdTab">Remove</a></li>
</ul>
<div class="tab-content">
    <div id="firstTab" class="tab-pane fade in active">@Html.Action("ViewAll")</div>
    <div id="secondTab" class="tab-pane fade in">@Html.Action("AddOrEdit")</div>
    <div id="thirdTab" class="tab-pane fade in">tab 3 content</div>
</div>
@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")
}

If I run my AddOrEdit.cshtml directly I can 'POST' just fine.

@model VendorApp.Models.VENDOR

@{
    ViewBag.Title = "AddOrEdit";
}

@using (Html.BeginForm("AddOrEdit","Vendor",FormMethod.Post, new { enctype = "multipart/form-data", onSubmit = "return jQueryAjaxPost(this);" }))
{
    @Html.AntiForgeryToken()
    <div class="row">
        <div class="form-horizontal">
            <h4>Add Vendor</h4>
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.VENDOR_NUM)

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

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

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

                <div class="form-group">
                    @Html.LabelFor(model => model.STATE, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.STATE, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.STATE, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Update" class="btn btn-default" />
                    </div>
                </div>
            </div>  
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.ZIP, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.ZIP, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.ZIP, "", new { @class = "text-danger" })
                    </div>
                </div>

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

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

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

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

And here is my Controller

using System;
using System.Collections.Generic;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using VendorApp.Models;

namespace VendorApp.Controllers
{
    public class VendorController : Controller
    {
        // GET: Vendor
        public ActionResult Index()
        {
            return View();
        }

        //get all Vendors
        public ActionResult ViewAll()
        {
            return View(GetAllVendor());
        }

        //numerate the vendors

        IEnumerable<VENDOR>GetAllVendor()
        {
            using (Pref_VendorEntities db = new Pref_VendorEntities())
            {
                return db.VENDORs.ToList<VENDOR>();
            }
        }

        /// <summary>
        /// HTTP GET by DEFAULT
        /// </summary>
        /// <returns></returns>
        public ActionResult AddOrEdit()
        {
            VENDOR vendor = new VENDOR();
            return View(vendor);
        }

        /// <summary>
        /// HTTP Post
        /// </summary>
        /// <returns></returns>

        [HttpPost]
        public ActionResult AddOrEdit(VENDOR vend)
        {
            using (Pref_VendorEntities db = new Pref_VendorEntities())
            {
                db.VENDORs.Add(vend);
                db.SaveChanges();
            }

            return RedirectToAction("ViewAll");
        }
    }
}

If I Debug or Load directly from my index.cshtml I get This

But then if I go to click on my 'Add New' tab it looks like this.. Add New which is fine, but then it doesn't actually 'POST' the data.

If I directly load from this page the page displays as such

But it will actually let me 'POST' the data.. I hope I included enough information, but not too much to be overkill. I've tried looking around on here, and I don't know exactly what I'm doing wrong. Any help would be extremely appreciated and I'll be more than happy to elaborate on whatever else is required.

Thank you kindly!

Answer 1

Here is the thing. Your are combining jQuery and MVC here and posting via AJAX. This is fine BUT you have to wire that up (the jQuery part).

See your code in the form onSubmit = "return jQueryAjaxPost(this);" (remove this)

Using Ajax is great BUT it has to be done properly and then you have to deal with the serialization and all that part properly on both ends. Easy enough but it does add a small bit of complexity to forms - not using post back and such.

NOTE: You are doing both Update and Create actions. Update needs an ID perhaps, so here is ONE way to do that - as a data attribute.

So, create a pubic method in your controller. Lets call it SaveVendor - default is normally "Save" but let's be specific for your "not default" situation.

Create two models (probably a base) one with an ID vendorId and one not, and we can use that with an overload.

I use your VENDOR class but suggest rename to Vendor instead.

public ActionResult SaveVendor(VENDOR vendor)

Add the proper attribute: (just like you have!)

[HttpPost]
public ActionResult SaveVendor(VENDOR vendor)

Now this one has a vendor id so:(for the update vs add)

[HttpPost]
public ActionResult SaveVendor(VendorWithId vendor)

Put some ajax around it: NOTE When you render the form for update, put the id in the data-vendorid

So this has two buttons, one for update, one for create in the form. Lots of ways to do this with one button, changing the text etc. but for this one I choose to create two with a class on each and then handle that, and show how to detect that, add extra data for the vendor id when you render it, get that and so forth.

I leave the exercise of how to handle display of which button to you as an exercise but you could add a class (hidden) or do it with code $('.update').toggle(false); etc.

// attach click handler to form, then each button has one
$('#AddOrEdit').on('click', '.create .update', function(event) {
  $(this).preventDefault(); // prevent submit because of button type
  let myform = $(event.delegateTarget);
  let mybuttonType = $(this).hasClass('create') ? "create" : "update";
  //add extra data so we know which
  myform.trigger("submit", ["submitbutton", mybuttonType]);
});
// I assume form ID AddOrEdit here:
$('#AddOrEdit').on('submit', function(event, param1, param2) {
  let myform = $(this);
  let myaction = myform.attr('action');
  let myData = myform.serializeArray();
  if (param2 === "update") {
    let $id = myform.data("vendorid");
    myData.push({
      name: "vendorId",
      value: $id
    });
  }
  $.ajax({
    type: "POST",
    url: myaction,
    data: $.param(myData);
  }).done(function(data) {
    alert(data);
  }).fail(function() {
    // ajax failed, do something
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="AddOrEdit" action="SaveVendor" data-vendorid="23223">
  <button type="submit" class="update btn btn-default">Update</button>
  <button type="submit" class="create btn btn-default">Create</button>
  <div>all my other form elements here:</div>
</form>

Note: I have "submitbutton" for param1, I did this just to show how to pass parameters with the trigger on the event, feel free to re purpose or revise, this is just an example.