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 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/