locked
How to Call Partial View within Modal using jQuery RRS feed

  • Question

  • User1912965948 posted

    Hi all,

    I've a Partial View and I want to call it inside bootstrap Modal which is located on the main view.

    I've been trying to do it for 2 days but no success. :(

    This popup is meant to be used for two purposes,One for inserting the record and 2nd for updating or editing the record.

    I want, When I call Partial view within modal for inserting new record controller should return empty partial view 

    and when I call Partial view for updating or editing existing record the controller should return partial view with required record. 

    I hope you got my point. I share the code below.

    Index.cshtml

    @model Project.Models.CustomerModel
    @{
        ViewBag.Title = "Index";
    }
    
    <a id="btnModal" class="btn btn-primary btn-icon-split btn-sm" onclick="PopupForm('@Url.Action("AddEdit", "ProformaInvoice")')">Add New PI</a>
    
    <!-- Modal -->
    <div class="modal fade" id="customerModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Add New PI</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modalBody">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="reset" class="btn btn-warning">Reset</button>
                    <button type="submit" class="btn btn-primary">Add PI</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- jQuery -->
    
    @section scripts{
    <script type="text/javascript">
    
    var popUp;
    function PopupForm(url) {
                var formDiv = jQuery('#modalBody');
                jQuery.get(url)
                    .done(function (response) {
                        formDiv.html(response);
                        popUp = formDiv.modal('toggle');
                    });
    
    </script>
    }

    AddEdit.cshtml (Partial View)

    @model Project.Models.ProformaInvoiceModel
    
    
    @using (Html.BeginForm("AddEdit", "ProformaInvoice", FormMethod.Post, new { onsubmit = "return SubmitForm(this)" }))
    {
        @Html.HiddenFor(model => model.piId)
        <div class="form-group row">
            <div class="col-md-6">
                <label>Supplier</label>
                @Html.DropDownListFor(model => model.supId, new SelectList(ViewBag.SupplierList, "supId", "supName"), "--- Select Supplier ---", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.supId)
            </div>
            <div class="col-md-6">
                <label>Customer</label>
                @Html.DropDownListFor(model => model.cusId, new SelectList(ViewBag.CustomerList, "cusId", "cusName"), "--- Select Customer ---", htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.cusId)
            </div>
        </div>
        <div class="form-group row">
            <div class="col-md-6">
                <label>PI No</label>
                @Html.EditorFor(model => model.piNo, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.piNo)
            </div>
            <div class="col-md-6">
                <label>Issue Date</label>
                @Html.EditorFor(model => model.issueDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.issueDate)
    
            </div>
        </div>
    }
    

    Controller

    [HttpGet]
            public ActionResult AddEdit(int Id = 0) {
                DataSet ds = new DataSet();
                List<SupplierModel> supplierModelList = new List<SupplierModel>().ToList();
                List<CustomerModel> customerModelList = new List<CustomerModel>().ToList();
                
                if (Id == 0)
                {
                    ds = dbLayer.Get_SupplierProfileList();
                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++) {
                        SupplierModel supplierModel = new SupplierModel();
                        supplierModel.supId = Convert.ToInt32(ds.Tables[0].Rows[i]["SupId"].ToString());
                        supplierModel.supName = ds.Tables[0].Rows[i]["SupName"].ToString();
                        supplierModelList.Add(supplierModel);
                    }
                    ViewBag.SupplierList = supplierModelList;
    
                    ds = dbLayer.Get_CustomerProfileList();
                    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                    {
                        CustomerModel customerModel = new CustomerModel();
                        customerModel.cusId = Convert.ToInt32(ds.Tables[0].Rows[i]["CusId"].ToString());
                        customerModel.cusName = ds.Tables[0].Rows[i]["CusName"].ToString();
                        customerModelList.Add(customerModel);
                    }
                    ViewBag.CustomerList = customerModelList;
    
                    return PartialView("AddEdit", new ProformaInvoiceModel());
                }
                else {
                    ds = dbLayer.Get_ProformaInvoiceById(Id);
                    DataSet dataSetSupllier = dbLayer.Get_SupplierProfileList();
                    for (int i = 0; i < dataSetSupllier.Tables[0].Rows.Count; i++) {
                        SupplierModel supplierModel = new SupplierModel();
                        supplierModel.supId = Convert.ToInt32(dataSetSupllier.Tables[0].Rows[i]["SupId"].ToString());
                        supplierModel.supName = dataSetSupllier.Tables[0].Rows[i]["SupName"].ToString();
                        supplierModelList.Add(supplierModel);
    				}
    				ViewBag.SupplierList = supplierModelList;
                    
    				DataSet dataSetCustomer = dbLayer.Get_CustomerProfileList();
                    for (int i = 0; i < dataSetCustomer.Tables[0].Rows.Count; i++)
                    {
                        CustomerModel customerModel = new CustomerModel();
                        customerModel.cusId = Convert.ToInt32(dataSetCustomer.Tables[0].Rows[i]["CusId"].ToString());
                        customerModel.cusName = dataSetCustomer.Tables[0].Rows[i]["CusName"].ToString();
                        customerModelList.Add(customerModel);
                    }
    				ViewBag.CustomerList = customerModelList;
                    
    				ProformaInvoiceModel proformaInvoiceModel = new ProformaInvoiceModel();
                    proformaInvoiceModel.piId = Convert.ToInt32(ds.Tables[0].Rows[0]["PiId"].ToString());
                    proformaInvoiceModel.supId = Convert.ToInt32(ds.Tables[0].Rows[0]["SupId"].ToString());
                    proformaInvoiceModel.supName = ds.Tables[0].Rows[0]["SupName"].ToString();
                    proformaInvoiceModel.cusId = Convert.ToInt32(ds.Tables[0].Rows[0]["CusId"].ToString());
                    proformaInvoiceModel.cusName = ds.Tables[0].Rows[0]["CusName"].ToString();
                    proformaInvoiceModel.piNo = ds.Tables[0].Rows[0]["PiNo"].ToString();
                    proformaInvoiceModel.issueDate = ds.Tables[0].Rows[0]["IssueDate"].ToString();
                    return PartialView("AddEdit", proformaInvoiceModel);
                }
            }
    
            [HttpPost]
            public ActionResult AddEdit(ProformaInvoiceModel proformaInvoiceModel)
            {
                if (proformaInvoiceModel.piId == 0) {
                    dbLayer.Add_NewProformaInvoice(proformaInvoiceModel);
                    return Json(new { success = true, message = "New Proforma Invoice Saved Successfuly !!!" });
                }
                else {
                    dbLayer.Upd_ProformaInvoiceById(proformaInvoiceModel);
                    return Json(new { success = true, message = "Proforma Invoice Updated Successfuly !!!" });
                }
            }

    Please ask me if you need more info.

    Thanks in advance.

    Wednesday, February 19, 2020 11:52 AM

All replies