MVC Partial view using ajax

Question

I have made an MVC application and I'm trying to create a partial view for when the user clicks the "details" button. I have one partial view working at the moment for my "delete" button. When I step through my code using breakpoints it brings me as far as my Task Controller and steps into my PartialViewResult method but then goes no further. When I click the "details" button nothing happens. Not sure what is missing here.

Index.cshtml

       <span class="btn btn-success btn-sm" onclick="showTask('@item.TaskId')">Details</span>

<div id="Detail"></div>

<Script>
        function showTask(showTaskID) {

        $.ajax({
            url: '@Url.Action("ShowTaskByID")',
            data: { id: showTaskID },
            success: function (data) {
                $('#Detail').hide();
                $('#Detail').html(data);
                $('#Detail').animate({
                    opacity: 1,
                    left: "+=50",
                    height: "toggle"
                }, 3000, function () {
                    // Animation complete.
                });

                $('#Edit').hide();
                $('#Delete').hide();
            },
            error: function (data) { $('#Details').html('<h3>Error</h3>'); }
        });
    }



</script>

_ShowTask

@model IEnumerable<WebApplication4.Models.Task>
<div class="panel panel-info">
    <div class="panel-heading" style="font-size:20px">
        <h2>List of Actors</h2>
    </div>
    <p>
        @Html.ActionLink("Create New Task", "CreateTask", null, new { @class = "btn btn-sm btn-primary" })
    </p>
    @if (Model.Any())
    {
        <table class="table table-condensed table-striped">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.First().TaskName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.First().StartDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.First().FinishDate)
                </th>
                <th></th>
            </tr>

            @if (Model != null)
            {
                foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.TaskName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.StartDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.FinishDate)
                        </td>
                        <td>
                            @Html.ActionLink("Edit", "EditTask", new { id = item.TaskId }, new { @class = "btn btn-info btn-xs" })
                            @*<a onclick="showEditActor('@item.MovieID','@item.ActorID','@item.ActorName','@item.age')" class="btn btn-xs btn-info">Edit</a>*@
                            @Html.ActionLink("Delete", "DeleteTask", new { id = item.TaskId }, new { @class = "btn btn-danger btn-xs" })
                        </td>
                    </tr>
                }
            } @* closing of if *@
        </table>
    }
    else
    {
        <div><strong>No Actors in Movie</strong></div>
    }
</div>

Task Controller

public ActionResult Details(int id)
{
    var q = db.Tasks.Find(id);
    if (q == null)
    {
    }
    return View(q);
}

public PartialViewResult ShowTaskByID(int id)
{

    return PartialView("_ShowTask", db.Tasks.Find(id).TaskName);
}

Run Fiddler while loading the partial, and see what is returned. Sounds like a client side issue — Tim
– Tim, Commented Sep 14, 2016 at 20:53

Leo · Accepted Answer · 2016-09-15 00:23:53Z

1

HTML

<input id="btnDetail" type="button" class="btn btn-success btn-sm" value="Details" />

<div id="Detail"></div>

JS

$('#btnDetail').on('click', function(){
    $.ajax({ 
        url: '@Url.Action("ShowTaskByID")',
        data: { id: showTaskID },
    }).done(function (data) {
        $('#Detail').html(data);
        $('#Detail').animate({
            opacity: 1,
            left: "+=50",
            height: "toggle"
        }, 3000, function () {
            // Animation complete.
        });

        $('#Edit').hide();
        $('#Delete').hide();
    }).fail(function (jqXHR, textStatus) {
        $('#Detail').html('<h3>Error :' + jqXHR.responseText + '</h3>'); 
    });
});

C#

public ActionResult Details(int id)
{
    try 
    {
       var task = db.Tasks.Find(id);
    }
    catch(HttpException e) 
    {
       throw new HttpException(404, "Task not found.")
    }

    return View(task);
}

public PartialViewResult ShowTaskByID(int id)
{
    try
    {
        var tasks = db.Tasks.Find(id).TaskName;    
    }
    catch(HttpException e) 
    {
       throw new HttpException(404, "Task nout found.")
    }

    return PartialView("_ShowTask", tasks);
}

If you are expecting a list of Tasks try this:

public PartialViewResult ShowTaskByID()
{
    try
    {
        var tasks = db.Tasks.ToList();
    }
    catch(HttpException e) 
    {
       throw new HttpException(404, "Task nout found.")
    }

    return PartialView("_ShowTask", tasks);
}

Or instead, you could edit _ShowTask model type to Task:

@model WebApplication4.Models.Task

<div class="panel panel-info">
    <div class="panel-heading" style="font-size:20px">
        <h2>List of Actors</h2>
    </div>
    <p>
        @Html.ActionLink("Create New Task", "CreateTask", null, new { @class = "btn btn-sm btn-primary" })
    </p>
    @if (Model.Any())
    {
        <table class="table table-condensed table-striped">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.TaskName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.StartDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.FinishDate)
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        @Html.DisplayFor(model => model.TaskName)
                    </td>
                    <td>
                        @Html.DisplayFor(model => model.StartDate)
                    </td>
                    <td>
                        @Html.DisplayFor(model => model.FinishDate)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "EditTask", new { id = Model.TaskId }, new { @class = "btn btn-info btn-xs" })
                        @*<a onclick="showEditActor('@item.MovieID','@item.ActorID','@item.ActorName','@item.age')" class="btn btn-xs btn-info">Edit</a>*@
                        @Html.ActionLink("Delete", "DeleteTask", new { id = Model.TaskId }, new { @class = "btn btn-danger btn-xs" })
                    </td>
                </tr>
            </tbody>    
            } @* closing of if *@
        </table>
    }
    else
    {
        <div><strong>No Actors in Movie</strong></div>
    }
</div>

edited Sep 15, 2016 at 0:23

answered Sep 14, 2016 at 20:58

Leo

6752 gold badges9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Craig Gallagher Over a year ago

I got the fallowing error when using your code snippet. Any ideas on how I would fix this.

Exception Details: System.InvalidOperationException: The model item passed into the dictionary is of type 'System.Data.Entity.DynamicProxies.Task_E325CAFED3402B9E516E7467C55ACD948A2123A1FE7EECA32D7824C88DD807C4', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable

1[WebApplication4.Models.Task]'.`

Leo Over a year ago

_ShowTask is expecting IEnumerable<WebApplication4.Models.Task>, looks like you are passing an object and not an IEnumerable. I'll update the code above.

Craig Gallagher Over a year ago

I added the code and got the fallowing error

The model item passed into the dictionary is of type 'System.String', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable

1[WebApplication4.Models.Task]'.`

Craig Gallagher Over a year ago

I got it working using your code I left something out. Thanks for your help and I will mark this as the correct answer. Thanks for your time :)

Robert Green MBA · Accepted Answer · 2016-09-14 21:14:23Z

0

[HttpGet] add the tag to your public PartialViewResult ShowTaskByID(int id)

so, it should result like:

[HttpGet] public PartialViewResult ShowTaskByID(int id)

answered Sep 14, 2016 at 21:14

Robert Green MBA

1,8963 gold badges31 silver badges57 bronze badges

Collectives™ on Stack Overflow

MVC Partial view using ajax

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related