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

Last Reply one year ago By bigbear

Posted one year ago

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.

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


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");
        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;
            $("ServiceVM_MachineCity ").html(data.MachineCity);
            document.getElementsByName("ServiceVM_MachineZip").value = data.MachineZip;

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


You are viewing reply posted by: bigbear one year ago.
Posted one year ago

This is my solution I finally have it working!!

    $('#openModal').on('click', function () {
        var quoteid = $(this).attr("data-tst");
        var modalA = $('#modalInnerSQ');
            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
    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');