My question is I currently have a modal with controls on it. When I click the save button the validation should show up on the modal. instead it opens a new window with the controls and all the validation that should be in the modal.
Also in this view both
<input type="button" class="openModal btn btn-danger" data-quoteid="@Model.ListQuotes[i].QuoteID" value="Edit" />
<button type="button" class="openOtherModal btn-success" data-quoteid="@Model.ListQuotes[i].QuoteID">
Test Val
</button>
@using (Ajax.BeginForm("SQUpdateRecord", "Service", new AjaxOptions() { HttpMethod="POST", UpdateTargetId="modalTestSQ" }))
{
<div>
<div class="modal" id="modalTestSQ" tabindex="-1" role="dialog" aria-labelledby="lblSQmodal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Service Quote Details</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modalOpen">
@Html.Partial("SQupdate")
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</div>
</div>
</div>
</div>
}
@using (Ajax.BeginForm("UpdateServiceTables", "Service", new AjaxOptions() { HttpMethod="POST", UpdateTargetId="ajaxit" }))
{
@Html.AntiForgeryToken()
<div class="modal" id="modalInnerSQ" tabindex="-1" role="dialog" aria-labelledby="lblSQmodal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
@* model = Model.ServiceVM SQUpdateRecord <!-- AjaxOptions() { OnSuccess="OnSuccess", OnFailure="OnFailure", OnComplete="OnComplete"} "modalInnerSQ"-->*@
@*@using (Html.BeginForm("UpdateServiceTables", "Service", FormMethod.Post, htmlAttributes: new { id="modalSQupdate", name="frmSQupdate" }))
{*@
<div class="modal-header">
<h4 class="modal-title">Service Quote Details</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="ajaxit">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(x => x.ServiceVM.QuoteID)
@Html.HiddenFor(x => x.ServiceVM.CustomerID)
@Html.HiddenFor(x => x.ServiceVM.ContactID)
@Html.HiddenFor(x => x.ServiceVM.EmpID)
<div class="form-group">
@Html.LabelFor(x => x.ServiceVM.CustomerName, htmlAttributes: new { @class = "control-label col-3" })
<div class="col-9">
@Html.TextBoxFor(x => x.ServiceVM.CustomerName, new { @class = "form-control", name = "txtCustName" })
@Html.ValidationMessageFor(x => x.ServiceVM.CustomerName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(x => x.ServiceVM.MachineCount, htmlAttributes: new { @class = "control-label col-3" })
<div class="col-9">
@Html.TextBoxFor(x => x.ServiceVM.MachineCount, new { @class = "form-control", name = "txtMcount" })
@Html.ValidationMessageFor(x => x.ServiceVM.MachineCount, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(x => x.ServiceVM.MachinePrice, htmlAttributes: new { @class = "control-label col-3" })
<div class="col-9">
@Html.TextBoxFor(x => x.ServiceVM.MachinePrice, new { @class = "form-control", name = "txtMprice" })
@Html.ValidationMessageFor(x => x.ServiceVM.MachinePrice, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(x => x.ServiceVM.MachineAddress, htmlAttributes: new { @class = "control-label col-3" })
<div class="col-9">
@Html.TextBoxFor(x => x.ServiceVM.MachineAddress, new { @class = "form-control", name = "txtMaddress" })
@Html.ValidationMessageFor(x => x.ServiceVM.MachineAddress, "", new { @class = "text-danger" })
</div>
</div>
....
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
@* SAVE BUTTON [ <button} or form <input> ]*@
<input type="submit" class="btn btn-primary" value="Save" />
@*@Html.ActionLink("Save", "UpdateServiceTables", "Service", new { model = Model }, new { @class="btn btn-primary" })*@
</div>
[/code]
Here is JavaScript both are the same .openModal and .openOtherModal
[code]
var jsonobj = {};
$('.openModal').on('click', function () {
var quoteid = $(this).attr("data-quoteid");
$.ajax({
type: "GET",
url: "/Service/GetServiceQuote/",
contentType: "application/json; charset=utf-8",
data: { "id": quoteid },
datatype: "Json",
success: function (data) {
if (data != null) {
jsonobj =
{
"quoteid": data.QuoteID,
"customerid": data.CustomerID,
"customername": data.CustomerName,
"listofsn2s": data.ListOfSN2s,
"machinecount": data.MachineCount,
"machineprice": data.MachinePrice,
"machineaddress": data.MachineAddress,
"machinecity": data.MachineCity,
"machinestate": data.MachineState,
"machinezipcode": data.MachineZipCode,
...
PopulateModalJSON(jsonobj);
function PopulateModalJSON(jsonObject) {
var modalA = $('#modalInnerSQ');
var body = $('.modal-body');
var quoteid = modalA.find(body).find('#ServiceVM_QuoteID');
var custid = modalA.find(body).find('#ServiceVM_CustomerID');
var cust = modalA.find(body).find('#ServiceVM_CustomerName');
var listsn2s = modalA.find(body).find('#ServiceVM_ListOfSN2s');
var mcount = modalA.find(body).find('#ServiceVM_MachineCount');
var mprice = modalA.find(body).find('#ServiceVM_MachinePrice');
...
function OpenServiceQuoteModal() {
$('#modalInnerSQ').modal('show');
}
[/code]
The Model is a normal model
[Display(Name = "Customer Name")]
[Required(ErrorMessage = "Customer Name MUST be filled out.")]
public string CustomerName { get; set; }
Here is the Controller
[code]
[HttpPost]
public ActionResult UpdateServiceTables(ServiceModel model)
{
model.Customers = GetCustomersSQ();
model.SerialNumbers = GetSerialNumbersSQ();
model.City = GetCitiesSQ();
model.State = GetStatesSQ();
model.Settings = GetTableSettingsSQ();
if (ModelState.IsValid)
{
var quote = context.Serv_Quotes.Where(x => x.QuoteID == model.ServiceVM.QuoteID).FirstOrDefault();
quote.QuoteID = model.ServiceVM.QuoteID;
quote.CustomerName = model.ServiceVM.CustomerName;
quote.ListOfSN2s = model.ServiceVM.ListOfSN2s;
quote.MachineCount = model.ServiceVM.MachineCount;
quote.PricePerMachine = model.ServiceVM.MachinePrice;
quote.Address = model.ServiceVM.MachineAddress;
context.Entry(quote).State = EntityState.Modified;
context.SaveChanges();
return RedirectToAction("SearchGet", model);
}
else
{
return PartialView("ModalSQUpdate", model);
}
}
public JsonResult GetServiceQuote(int? id)
{
if (id == null) { return null; }
var vm = new ServiceReportViewModel();
var model = context.Serv_Quotes.Where(x => x.QuoteID == id).FirstOrDefault();
vm.QuoteID = model.QuoteID;
vm.CustomerID = model.CustomerID.ToString();
vm.CustomerName = model.CustomerName;
vm.MachineCount = model.MachineCount;
vm.MachinePrice = model.PricePerMachine;
vm.MachineAddress = model.Address;
vm.MachineCity = model.City;
vm.MachineState = model.State;
vm.MachineZipCode = model.ZipCode;
vm.MachineCountry = model.Country;
return Json(vm, JsonRequestBehavior.AllowGet);
} parts of each modal for partial and the one in same view.
I know i am extremely extremely close to having this figured out.. just not sure what exact issue is. The modal turns into a new window with what is supposed to be in the modal
What I have tried:
I have been messing with this trying a bunch of different ways for quiet awhile now and haven't gotten it yet.
Can I have the modal inside my main view? or do I need a modal to be in a separate partialview.
I have been trying it both ways and I got the same result for both.
Here is the main view with buttons 1 modal inside same view near the bottom other modal in separate partial.
Submit an article or tip