ASP.NET MVC PartialView with model on click

Question

I'd like to change a partial view to be rendered on click. I have spent a lot of time searching the solution on google.

The part is rendered while loading a main page.

<div id="tableContent">
    @{Html.RenderPartial("GetTableView", Model);}
</div>

I'd like to have this paritial loaded on click, something like this:

<div id="tableContent">
    <input type="button" class="btn btn-default" 
     onclick="Render Partial "GetTableView" in tableContent (replace the content)" />
</div>

My Model

public class ImportModel
{
    public class ImportFileDetails
    {
        [Display(Name = "File Name")]
        public string Filename { get; set; }
        [Display(Name = "Total Columns")]
        public int TotalColumns { get; set; }
        [Display(Name = "Total Rows")]
        public int TotalRows { get; set; }
        [Display(Name = "Import Rows")]
        public int ImportRows { get; set; }
        public List<string> Header { get; set; }
        public ICollection<RepCodesFile> RepCodesFile { get; set; }
    }
}

public class RepCodesFile
{
    public string RepCode { get; set; }
    public string Description { get; set; }
}

My Controller

    public ActionResult ImportFile(string ImportFile)
    {
        ImportModel.ImportFileDetails File = new Models.ImportModel.ImportFileDetails();
        // Model is passed to View corectly
        return View(File);
    }

My Main View

@model Models.ImportModel.ImportFileDetails
@{
    ViewBag.Title = "Import";
}

<h2>@ViewBag.Title</h2>
<hr />

@if (Model.Filename != null || Model.ImportRows == 0)
{
    <div id="tableContent">
        @{Html.RenderPartial("GetTableView", Model);}
    </div>
}
else
{
    <h4 class="text-warning">No data for import</h4>
}

My Partial

@model Models.ImportModel.ImportFileDetails
    <table id="filetable" class="table table-bordered pagination" cellspacing="0">
        <thead>
            <tr>
            @foreach (string item in Model.Header)
            {
                <th>@item</th>
            }
            </tr>
        </thead>
        <tbody>
            foreach (AutogemCMS.Models.RepCodesFile item in Model.RepCodesFile)
            {
                <tr>
                    <td>@item.RepCode</td>
                    <td>@item.Description</td>
                </tr>
            }
        </tbody>
    </table>

Please help.

Thanks

Loading GIF solution: It's not what i wanted but good enough for me.

Controller:

    if (Request.IsAjaxRequest())
    {
        return PartialView("GetTableView", File);
    }
    else
    {
        return View(File);
    }

Main View:

<div id="tableContent">
    <img src="~/Content/images/ajax-loader.gif" class="center-block img-responsive" />
</div>

$(function () {
    $.ajax({
        url: '/Import/ImportFile?ImportFile=@Model.Filename',
        dataType: 'html',
        success: function (data) {
            $('#tableContent').html(data);
        }
    });
});

Too much irrelevant code - please read this: http://stackoverflow.com/help/mcve — freedomn-m, Aug 06 '15 at 09:12
You should have a look at @Ajax.ActionLink(), or if you don't mind doing a whole page refresh/flicker, @Html.ActionLink — , Aug 06 '15 at 09:59
Is this something like you're looking for? `'$(".btn-default").click(function() { $("#tableContent").load('@Url.Action("GetTableView", Model))'); });'` — freedomn-m, Aug 06 '15 at 10:07
I haven't implemented the use of the helpers mentioned by @akemp but I would try doing [this](http://stackoverflow.com/questions/7430976/rendering-partial-views-using-ajax). — MiddleKay, Aug 06 '15 at 10:11
The problem is that Ajax doesnt want to pass collections/lists in model. public List Header { get; set; }] and public ICollection RepCodesFile { get; set; } — Maludasek, Aug 06 '15 at 10:51
Problem partially solved with @MiddleKay help by adding Loading GIF. Later time i will work on passing less complicated model to partial view. Thanks All — Maludasek, Aug 06 '15 at 12:28

score 1 · Answer 1 · edited Mar 20 '17 at 09:34

1

by click event in javascript

$("#tableContent").load('@Url.Action("PartialViewResult", "Controller_Name")');

N.B.: PartialViewResult must return PartialView(model) and .cshtml page a partial page.

edited Mar 20 '17 at 09:34

Peter Tretyakov

3,380
6
38
54

answered Mar 20 '17 at 08:42

AbdusSalam

420
6
10

score 0 · Answer 2 · answered Aug 06 '15 at 10:08

Create, for example, an ActionLink:

@Ajax.ActionLink("Any Text Here", "ImportFile", "ControllerName", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "get", UpdateTargetId = "tableContent" })

And then change you Action, to return a partial View, as follow:

public PartialViewResult ImportFile(string ImportFile)
{
    ImportModel.ImportFileDetails File = new Models.ImportModel.ImportFileDetails();
    // Model is passed to View corectly
    return PartialView("PartialView", model);
}

score 0 · Answer 3 · answered Aug 18 '15 at 06:10

Place content div (id=tableContent). The content will be replaced with partial view:
Put inside:
a. hidden loading gif animation - id=loading
b. action button - id=showContent

Execute an action button on click to remove button, unhide gif animation and run ajax which will get the partial view.

<div id="tableContent">
    <input type="button" class="btn btn-primary" id="showContent" value="Show Content" />
    <img id="loading" src="~/Content/images/ajax-loader.gif" class="center-block img-responsive hidden" />
</div>

<script>
    $('#showContent').click(function () {
        $('#showContent').remove();
        $('#loading').removeClass("hidden");
        $.ajax({
            url: '/Import/ImportFile?ImportFile=@Model.Filename',
            dataType: 'html',
            async: true,
            success: function (data) {
                $('#tableContent').html(data);
            }
        });
    })
</script>

ASP.NET MVC PartialView with model on click

3 Answers3