User-1641868886 posted
I have a view "CreateNewRecord" that contains a form with post action. One of the elements is a dropdownlist of "Vendors". If the user does not see his choice, he can press a button "AddNewVendor" to add a vendor using a jQuery popup dialog, this is a second
form with post method. This popup has an ajax post method and a "success" method that a) serializes the form through the "AddNewVendor" controller, b) shows a "notify" flag onscreen, c) closes the popup, and d) appends the ddl to auto-fill the ddl control
with the new choice.
ALL THIS WORKS, except when I use the popup, and then try to complete the primary form, "CreateNewRecord". I notice in debugging that the primary form DOES NOT send its results to the "CreateNewRecord" controller. HOWEVER,
if I DO NOT use the popup, and instead simply choose an existing choice in the "Vendor" ddl, then the primary form "CreateNewRecord" operates normally through its controller action, and creates a new record.
Here is the primary ("CreateNewRecord") form (A), its controller
(B), the razor view for the popup "AddNewVendor" (C), its controller
(D), and the jQuery for the popup (E).
(A) Razor for "CreateNewRecord":
@model Groc_Site_Web.Models.GrocBillsModel
@using (Html.BeginForm("CreateNewRecord", "GrocBills", FormMethod.Post))
{
@Html.HiddenFor(m => m.Groc_Id)
...several inputs with labels, validators in their own divs...
<div class="inline-flex">
@Html.DropDownList("Vend_Id", new SelectList(string.Empty, "Value", "Text"), "- - Select Vendor - -", new { @class = "form-control" })
<a class="btn btn-warning" style="margin-left:30px; " onclick="Vend_PopupForm('@Url.Action("AddOrEdit", "Vendors")')"
id="VendAddLink"><i class="fa fa-plus"></i> Add New Vendor</a>
</div>
...some more inputs with labels, validators...
<input type="submit" style="margin-left:5px;margin-bottom:20px;" name="SubmitBtn" value="Finish" />
(B) Controller action for "CreateNewRecord":
public ActionResult CreateNewRecord(GrocBillsModel gro)
{
DynamicParameters param = new DynamicParameters();
var userName = User.Identity.GetUserName();
param.Add("@Groc_Id", groc.Groc_Id);
param.Add("@UserName", UserName);
param.Add("@Sku", groc.Sku);
param.Add("@Vend_Id", groc.Vend_Id);
param.Add("@Cashier", groc.Cashier);
param.Add("@DateOfSale", groc.DateOfSale);
param.Add("@Price", groc.Price);
param.Add("@NetPrice", groc.NetPrice);
param.Add("@Whol_Id", groc.Whol_Id);
DataAccess.ExecuteWithoutReturn("spGrocBills_CreateNewRecord", param);
return RedirectToAction("Index", "GrocBills");
}
(C) PartialView razor for "AddNewVendor":
@model Groc_Site_Web.Models.VendorsViewModel
@using (Html.BeginForm("AddOrEdit", "Vendors", FormMethod.Post, new { onsubmit = "return SubmitVend_PopupForm(this)" }))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.HiddenFor(model => model.Vend_Id)
@Html.EditorFor(model => model.VendorName, new { htmlAttributes = new { @class = "form-control" } })
@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
@if (ViewBag.StatesList != null)
{
@Html.DropDownListFor(m => m.State, ViewBag.StatesList as SelectList, "- - Select State - -", new { @class = "form-control" })
}
@Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { @class = "form-control" } })
<input id="VendSend" type="submit" value="Save" class="btn btn-default" />
}
(D) Controller for "AddNewVendor":
[HttpPost]
public ActionResult AddOrEdit(VendorsViewModel Vend)
{
DynamicParameters param = new DynamicParameters();
param.Add("@Vend_Id", Vend.Vend_Id);
param.Add("@VendorName", Vend.VendorName);
param.Add("@Address", Vend.Address);
param.Add("@City", Vend.City);
param.Add("@State", Vend.State);
param.Add("@ZipCode", Vend.ZipCode);
DataAccess.ExecuteWithoutReturn("spVendors_AddOrEdit", param);
return Json(new { success = true, message = "Vendor Added Successfully." }, JsonRequestBehavior.AllowGet);
}
(E) JQuery for handling the "AddNewVendor" popupForm:
function SubmitVend_PopupForm(form) {
$.validator.unobtrusive.parse(form);
if ($(form).valid()) {
$.ajax({
type: "POST",
url: form.action,
data: $(form).serialize(),
dataType: "json",
success: function (data) {
if (data.success) {
Popup.dialog('close');
$("#Vend_Id").append(
$("<option></option>")
.val($("#VendorName").html())
.html($("#VendorName").val())
.prop("selected", true));
$.notify(data.message, {
globalPosition: "top center",
width: 300,
className: "success"
})
}
}
});
}
return false;
}
IS there anything I'm not seeing that is preventing the primary form from submitting after use of the popup? Thanks for looking.
RC
