CODEWITHSUNDEEP
jqueryasp.netasp.net-mvc
GSeriousB
GSeriousB

Reputation: 251

ASP.NET 5 - Render just partial view on list item click

I have more partial views on the page. One contains the list of music(stored on Azure Storage) and an other the media player. I want to load just the media player partial view by clicking on an item from the list. I also have to pass data(in my case a link) to the controller. I've read about AJAX, but I didn't find an example when you select a list item and pass data too...Here is my list:

<ul style="list-style:none">
@foreach (var item in Model)
{
    <li>
        <p><a asp-controller="Music" asp-action="Play" asp-route-uri="@item.DownloadUri">@item.TitleOnView</a></p>
    </li>
}

and the controller:

public IActionResult Play(string uri)
{
    ViewData["uri"] = uri;
    return PartialView("_MediaPlayerPartial");
}

Thanks!

Upvotes: 0

Views: 596

Answers (1)

Shyju
Shyju

Reputation: 218722

Yes, using jQuery ajax you can do that.

Give a css class to your links so that we can use that as the jQuery selector later.

<a asp-controller="Music" asp-action="Play" asp-route-uri="@item.DownloadUri"
                                                      class="myLink">@item.TitleOnView</a>

And now listen to the click event on this link and get the href attribute value of the clicked link and make an ajax call. You can use the jQuery load method to load the partial view content to your page.

$(function(){

   $("a.myLink").click(function(e){
     e.preventDefault();
     $("#YourContainerToShowPartial").load($(this).attr("href"));
   });

});

Assuming YourContainerToShowPartial is the Id of a div in your page where you want to show the response from your Play action method.

<div id="YourContainerToShowPartial"></div>

Upvotes: 1

Related Questions