Partial View is not rendering properly, after JQuery Ajax submit

Question

I submit a form post in Asp.Net MVC Partial View with JQuery Ajax.

The Partial View is inside one of the tabs in bootstrap tabs (there is 4 tabs and each tab has its Partial View). And there is a View, which covers all these tabs. And there is a Layout which covers all.

This is Partial view Action method call inside the cover View:

 @Html.Action("AddProductPartial", "Products")

Partial View Action:

 [HttpPost]
        public ActionResult AddProductPartial(ProductCategoryBrand pcb)

        {
            if (ModelState.IsValid)
            {
                Product p = new Product();
                p.CategoryID = Convert.ToInt32(pcb.CategoryViewModel.Kategori);
                p.BrandID = Convert.ToInt32(pcb.BrandViewModel.BrandName);
                p.ExchangeName = pcb.ExchangeViewModel.ExchangeName;

               ProductRepository prep = new ProductRepository();
                prep.AddProduct(p)
            }
            loadBrands();
            getRates();

            return View(pcb);

        }

JQuery Ajax:

$('#saveProduct').click(function () {

    $.ajax({
        url: "/Products/AddProductPartial",
        type: 'POST',          
        data: "{'CategoryID':" + categoryID + ", 'BrandID':" + brandID + ",'ExchangeName':" + exchangeName + "}",
        async:true,            
        contentType: "application/json; charset=utf-8",
        dataType: "json",         
        success: function (data) {
            alert("success");
        },
        error: function (xhr, status, error) {
            alert(xhr.responseText)

        }
    });
});

These statements below populates dropdownlisfor from db. I added these methods because dropdownlistfor in the partial view was giving null exception after Ajax submit.

loadBrands();
 getRates();

After adding these statements, the problem occured.

After submit, Partial view is rendering weird: Bootstrap nav-tabs are no longer visible. Because the View that covers the Partial view is not rendering at all. When I change this line:

 return View(pcb);

to

return Partial View(pcb);

Then renders only the Partial view itself, independently from the all layout.

Could you please help. Thanks.

Can I see the ajax code? Perhaps on the success callback for the ajax function, you are replacing the entire web page instead of just HTML element that contains the partial. — Christopher M Miller
I added JQuery Ajax code. @ChristopherMMiller I shortened the parameters because code seems too long here — Zeynep
you should probably replace @Html.Action("AddProductPartial", "Products") with @Html.Partial("AddProductPartial") and your public ActionResult AddProductPartial should just return a Json object with helpful information like Success/Error/New Product ID etc — JamieD77
@JamieD77 I tryed @Html.Partial("AddProductPartial") but this way action method (Get) was not calling. And when I write something like return Json(new { data = 1 }, JsonRequestBehavior.AllowGet); this line results in empty page writing only {"data":1} — Zeynep
You are returning return View(pcb); Replace with json value data i.e — Asif Raza

kblau kblau · Accepted Answer · 2017-06-13T23:20:02

Here is the simplest example of partial view:

public class HomeController : Controller
{
    [HttpPost]
    public PartialViewResult GetXlFile()
    {
        return PartialView("_ExcelGrid");
    }

    public ActionResult GetXlFile(int? id)
    {
        return View();
    }

_ExcelGrid.cshtml in shared:

A Partial View Info

View:

<!DOCTYPE html>
@*credit to
    https://stackguides.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor*@
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index800</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#pvButton').click(function (event) {
                $.ajax({
                    url: this.action,
                    type: "POST",
                    data: $(this).serialize(),
                    success: function (result) {
                        $('#result').html(result);
                    }
                });
                return false;
            });
        });
    </script>
</head>
<body>
    <form>
        <div>
            <input id="pvButton" type="button" value="OK" />
            <div id="result"></div>
        </div>
    </form>
</body>
</html>

Partial View is not rendering properly, after JQuery Ajax submit

1 Answers