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.

Elis

So what is the problem with your code?? Is it loading that partial view as a whole view?? Can you please explain the actual problem/error messages? – Kenti

If you want to do it dynamically from the web page, you will need to look at Ajax. Essentially, you want your Ajax method to call and Action on your controller which will return your partialview. You then do something like $(myContainer).html(partialView) in the OnSuccess or Done callback in your Ajax method. – Avis

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.

Tseng

thanku its working now but another problem occurs at first time when i click on the record it simply shows a fade screen with cross symbol of the pop up, but when i click it next time it shows the pop up.whatis the actual problem. – Elis

Can you add a screenshot of the problem? – Tseng

i am not able to add screenshot in comments. the main problem is when page first postback it doesnot show anythin except a blank fade screen with the cross symbol of pop up but after closing that pop up again i click on the href link record it works as expected. did you get me. – Elis

Add it to your initial question, not the comments. – Tseng

@ Josh i am adding the screenshot in my initial question – Elis

please have a look, and actually i dont have any get method so i have used get: "POST" – Elis

Hmm, do you have javascript that does this fade effect somewhere? Also, I would recommend debugging that method to see exactly where it is going when you call that method with ajax. Also, I wouldn't use POST to just return some data, POST is typically used to send data to the database, such as add, update or delete a record. If you are just GETting data for display, I would use a GET. – Tseng

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/

Estaestablish

Try to call $('#detailsPlace').show();at the end of the view if it doesn't work tell me – Estaestablish

its working now but another problem occurs at first time when i click on the record it simply shows a fade screen with cross symbol of the pop up, but when i click it next time it shows the pop up. – Elis

I can't understand can you explain more – Estaestablish

pop up is not working when i click on the record at very first time when partial view loaded but at same time i again click on that record it shows me the pop up. wat is the actual problem . did u get me now ? – Elis

@Ajax.ActionLink("Details", "Details", new { id=item.TeamId}, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "dialog_window_id", OnComplete = "$('#detailsPlace').show();" }) – Estaestablish

try this code and remove the $('#detailsPlace').show(); from the view i you have already add it – Estaestablish

and be aware it takes some time to render so you need to implement some sort of loading indication – Estaestablish

i have added a screenshot to the initial question have a look . – Elis

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
            })

Danitadaniyal