Display details on Bootstrap Modal using jQuery AJAX in ASP.Net MVC

bigbear
 
on Oct 16, 2019 12:15 AM
1572 Views

Hello all,

I currently have a modal that shows up and I have a JSON object that gets passed into my controller from javascript and comes back in the success .ajax() part of my method correctly populated.

I thought I would be able to populate my modal with this object pretty easily but im thinking its showing the old modal that I call first and maybe it populates it but when I call $('#modalInnerSQ').modal('show');

it doesn't open.

I know i am extremely close to having this I just want to populate my modal so I can update it in the database afterwards.

<td>
    <input type="button" class="btn btn-danger openModal" data-toggle="modal" data-target="#modalInnerSQ"
        data-tst="@Model.ListQuotes[i].QuoteID" value="ClickMe" />
</td>

 

[HttpPost]
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();
    if (model.EmployeeID != null)
    {
        var employee = context.Employee_Main.Where(z => z.EmployeeID == model.EmployeeID).FirstOrDefault();
        vm.EmpID = employee.EmployeeID.ToString();
        vm.EmpFirstName = employee.FirstName;
        vm.EmpLastName = employee.LastName;
        vm.EmpPosition = employee.Position;
        vm.EmpEmail = employee.Email;
    }
    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;
    vm.ExpirationDate = model.ExpirationDate;
    vm.ListOfSN2s = model.ListOfSN2s;
    vm.ContactID = model.ContactID.ToString();
    vm.ContactName = model.ContactName;
    vm.ContactPhone = model.ContactPhone;
    vm.ContactEmail = model.ContactEmail;

    return Json(vm, JsonRequestBehavior.AllowGet);
}

 

$('.openModal').on('click', function () {
    var quoteid = $(this).attr("data-tst");
    $.ajax({
        type: "POST",
        url: '/Service/GetServiceQuote/',
        contentType: "application/json; charset=utf-8",
        data: { "id": quoteid },
        datatype: "json",
        success: function (data) {
            alert('in success');
            var cnam = data.CustomerName;
            alert(cnam);
            //alert(data.CustomerName);
            //$('#ServiceVM_CustomerName').val(data.CustomerName);
            $('#ServiceVM_MachineCity').html(cnam);
            $("ServiceVM_MachineCity ").html(data.MachineCity);
            //$("#ServiceVM_MachineState").innerHTML(data.MachineState);
            document.getElementsByName("ServiceVM_MachineZip").value = data.MachineZip;
            //$('#modalInnerSQ').modal('show');
        }
    })
})

//$('#modalInnerSQ').on('show.bs.modal', function (e) {
//    $('#ServiceVM_MachineAddress').innerHTML = "tst";
//    $('#ServiceVM_MachineCity').text = "tst";
//    $('#ServiceVM_MachineState').val = "tst";
//    $('#ServiceVM_MachineCountry').html = "tst";
//});

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
bigbear
 
on Oct 16, 2019 10:55 AM

This is my solution I finally have it working!!

    $('#openModal').on('click', function () {
        var quoteid = $(this).attr("data-tst");
        var modalA = $('#modalInnerSQ');
        $.ajax({
            type: "GET",
            url: "/Service/GetServiceQuote/",
            data: { "id": quoteid },
            datatype: "Json",
            success: function (data) {
               // alert('in success');
                var cnam = data.CustomerName;

                if (data != null) {
                    jsonobj =
                        {
                            "quoteid": data.QuoteID,
                            "customername": cnam,
                            "machinecity" : data.MachineCity
                        }

                    // Create function to populate Modal
                    PopulateModalJSON(jsonobj);
                }
                $('#modalInnerSQ').modal('show');
            }
        })
    })
    function PopulateModalJSON(jsonObject) {
        var modalA = $('#modalInnerSQ');
        var body = $('.modal-body');
        var cust = modalA.find(body).find('#ServiceVM_CustomerName');
        var city = modalA.find(body).find('#ServiceVM_MachineCity');
        var state = modalA.find(body).find('#ServiceVM_MachineState');
        cust.val(jsonObject.customername);
        city.val(jsonObject.quoteid);
        state.val(jsonObject.machinecity);
    }