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.

enter image description here

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? — wf4
– wf4, Commented Nov 17, 2014 at 15:09
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. — Steve
– Steve, Commented Nov 17, 2014 at 15:14

JB06 · Accepted Answer · 2014-11-17 15:39:29Z

5

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.

answered Nov 17, 2014 at 15:39

JB06

1,95116 silver badges31 bronze badges

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

7 Comments

Reshav Over a year ago

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.

JB06 Over a year ago

Can you add a screenshot of the problem?

Reshav Over a year ago

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.

JB06 Over a year ago

Add it to your initial question, not the comments.

Reshav Over a year ago

@ Josh i am adding the screenshot in my initial question

|

Ahmed Salah Hussein · Accepted Answer · 2014-11-17 15:32:26Z

5

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/

answered Nov 17, 2014 at 15:32

Ahmed Salah Hussein

513 bronze badges

8 Comments

Ahmed Salah Hussein Over a year ago

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

Reshav Over a year ago

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.

Ahmed Salah Hussein Over a year ago

I can't understand can you explain more

Reshav Over a year ago

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 ?

Ahmed Salah Hussein Over a year ago

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

|

Celdor · Accepted Answer · 2014-11-17 15:38:05Z

1

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

answered Nov 17, 2014 at 15:38

Celdor

2,6912 gold badges26 silver badges50 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

7 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related