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

Question

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!

Shyju · Accepted Answer · 2016-02-23 19:41:01Z

1

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>

answered Feb 23, 2016 at 19:41

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

8 Comments

GSeriousB Over a year ago

Thanks for your answer! Unfortunately I get the 404 error to this link(localhost:5000/Music/Play?uri=<attribute>). My "Play" Action returns "return PartialView("_MediaPlayerPartial");". So I do not really understand why is necessary the id to the <div>, because in the <div> is "@Html.Partial("_MediaPlayerPartial", ViewData["uri"])".

Shyju Over a year ago

When you try to access the url directly on a browser, are you getting a 404 /

Shyju Over a year ago

is url param value having / in the string ?

GSeriousB Over a year ago

I am storing the music in Azure Storage. The uri doesn't containes '/' It changes to it's code: "%2F". And ':', "space" too.

Shyju Over a year ago

Can you share the url it generated ( check view source) and share it as it is ?

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related