Whats the best way of using ajax jquery to load partial views onto a specific page?

Question

I have a index page the code looks like this

@model PagedList.IPagedList<PartialViews.Models.Customer>
@using PagedList.Mvc

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div class="container">
    <table class="table">
        <tr>
            <th>
                Title
            </th>
            <th>
                First Name
            </th>
            <th>
                Last Name
            </th>
            <th>
                Email Address
            </th>
            <th>
                Phone Number
            </th>
            <th>
                Modified Date
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FirstName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.LastName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EmailAddress)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Phone)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ModifiedDate)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.CustomerID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.CustomerID })
                </td>
            </tr>
        }

    </table>

    @Html.PagedListPager(Model,page=>Url.Action("Index",new{page,pageSize=Model.PageSize}))

</div>

My CustomersController has this code

private AdventureWorksLT2012Entities db = new AdventureWorksLT2012Entities();
// GET: Customers
public ActionResult Index(int page=1, int pageSize=10)
{
    List<Customer> customers = db.Customers.ToList();
    PagedList<Customer> cust = new PagedList<Customer>(customers,page,pageSize);
    return View(cust);
    //return View(db.Customers.ToList());
}

Heres the Main page where i want the Customers List from the Index action to be shown

@model PartialViews.Models.Customer

@{
    ViewBag.Title = "Main";
}

<body>

<div class="container">
    <h2>Customer's List</h2>
    <div id="dvCustomerDetails" style="width: 50%; height: 130px;display: none"></div>
</div>

</body>

<script type="text/javascript">
    $.ajax({
        url: 'Customers/Index',
        contentType: 'application/html;',
        type: 'GET',
        dataType:'html'
    })
        .success(function(result) {
            $('#dvCustomerDetails').html(result);
        })
</script>

I want to display this table onto a new page as a partial view using ajax jquery but I am having trouble implementing it. I was able to use RenderPartial method to display it as a partial view but i am having trouble doing it with ajax. Any help or suggestion will be appreciated.

I didn't see you're using AJAX code (`$.ajax()`) anywhere. You can look for [this issue](https://stackoverflow.com/questions/11947540/load-partialview-with-using-jquery-ajax), [this issue](https://stackoverflow.com/questions/51282278/how-to-dynamically-load-partial-view-via-jquery-ajax-in-asp-net-mvc) and [this issue](https://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc) for examples. — Tetsuya Yamamoto, Dec 18 '18 at 04:58
`contentType: 'application/html;'` and `dataType:'html'` are unnecessary, just remove them both. Also instead of `return View(cust);` try to use `return PartialView(cust);`, or create another action which returns `PartialView`. — Tetsuya Yamamoto, Dec 18 '18 at 06:03
tried returing PartialView(cust) it just displays a empty page on the Main page — MaddoxSt, Dec 18 '18 at 06:08
As I told you before, try to create another action method which specifically returns partial view of the table grid. Don't reuse `Index` action for partial view reloading because it needs to return entire view page. — Tetsuya Yamamoto, Dec 18 '18 at 06:09
yep tried creating a new Action method and tried returing the Partial View from it still shows empty content on the next page — MaddoxSt, Dec 18 '18 at 08:00
Usually the partial view approach to update table contents used by wrapping all elements inside `
` into a partial view file and then use `@Html.Partial("PartialViewFileName", model)`. Then you can set click event somewhere to trigger AJAX callback and reload the content. — Tetsuya Yamamoto, Dec 18 '18 at 09:32

Whats the best way of using ajax jquery to load partial views onto a specific page?

0 Answers0