call a partial view using @url.action click using jquery

Question

call a partial view on @url.action. i am displaying the records using url.action and want to load the partial view when user click on the records.

here is my code on which i want to call the partial view when user click on it.

<td>
<a href="@Url.Action("Details", new { id=item.TeamId})">
 @Html.DisplayFor(modelItem => item.TeamName)
</a>
</td>

here is my Div in which i am placing the Partial view

<div id="detailsPlace" class="dialog_content3" style="display:none"></div>
         @Html.Partial("_TeamDetails")
    </div>

here is my partial view which i want to render

@model light.ViewModels.ViewDetailTeam
@{
    var item = Model.Team;
}

    <div class="dialogModal_header">@Html.Label(item.TeamName)</div>
    <div class="dialogModal_content">
        <div class="main-content">
            <div class="navi-but">
                    @Html.Label(item.TeamName)
                </div>
                    @Html.Label(item.Description)
                </div>
            </div>
        </div>

and here is my controller

public ActionResult Details(int id)
        {

            lightCoreModel.User loggedInUser = new lightCoreModel.User();


                ViewDetailTeam viewDetailTeam = new ViewDetailTeam();
                ViewData["DetailModel"] = viewDetailTeam;
                viewDetailTeam.Retrieve(id);
                return PartialView("_TeamDetails",viewDetailTeam);

        }
now i am facing this problem with pop up its showing me the following screen.

Answer 1

You would need Ajax to do this. First, add a script block in your view with this code:

<script type="text/javascript">
    $(function () {
        $('.details').click(function () {
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');

            $.ajax({
                url: '@Url.Action("Details")',
                type: 'GET',
                data: { id: id },
                success: function (partialView) {
                    $('#detailsPlace').html(partialView);
                    $('#detailsPlace').show();
                }
            });
        });
    });
</script>

Then change your anchor tag to this:

<a href="#" class="details" data-id="@item.TeamId">Details</a>

The ajax call will be fired whenever an element with the class of details is clicked. Once clicked, the Id that is stored in the data-id attribute will be passed along to the controller. When your controller passes the partial view back, the partial view will be loaded in the success function of the ajax call, and the detailsPlace will be shown, since it's display is set to none.

Answer 2

You Can use ajax to Get your List Details and Render the partial view without refreshing the entire page

First install package jQuery.Ajax.Unobtrusive using command

Install-Package jQuery.Ajax.Unobtrusive

and make sure jQuery-xxxx.js and jquery.unobtrusive-ajax.js are included before the list

modify your code on which i want to call the partial view when user click on it

<a  href="@Url.Action("Details", new { id=item.TeamId})" data-ajax='true' data-ajax-update='#detailsPlace' data-ajax-mode='replace'>

or

@Ajax.ActionLink("Details", 
                 "Details", 
                  new { id=item.TeamId}, 
                 new AjaxOptions { HttpMethod = "GET", 
                 InsertionMode = InsertionMode.Replace, 
                 UpdateTargetId = "detailsPlace"})

and at the top of your View add this Code

if (Request.IsAjaxRequest())
{
   Layout=null;
}

for more info visit http://chsakell.com/2013/05/12/mvc-unobtrusive-ajax/

Answer 3

If you want to place PartialView in a div, you might want to try Ajax helper. First, try to change ActionResult to PartialViewResult. The one of the definitions of Ajax helper is following:

@Ajax.ActionLink("Display name",
        "Your partial action name",
        "Controller name",
        new { /* object values */ }, // e.g. ID = yourmodel.ID or null
            new AjaxOptions {
                HttpMethod = "GET",
                UpdateTargetId = "your div id without #",
                InsertionMode = InsertionMode.Replace
            })