So, you have a loop that creates a link with id = your item's ID (rename ID to whatever your object's ID is). The link's class is set to "partialLink" so the javascript function will pick up a click on any link associated with partialLink class.
In the javascript, we call a jquery.get() to an action that returns a partial view. We send the link's id (your object's id) as an id parameter to the action. You can then process your action and return PartialView(). The last part of the jquery.get()
calls to populate our returned data to the div named "partialDiv".
So when you click on the link, it'll trigger the jquery.get() call and send the model's ID to the action. When you return the PartialView, it returns to the jquery.get() as "data". We then populate the empty partialDiv container with the data (partial
view).
Where would this code go? In the MVC model I currently only have cshtml and cs files. Do I add an .aspx file? or modify the existing Index.cshtml file? Also how would I associate a link with that PartialLink class? Thanks again!
Please explain your question. What's Your mean of make the item clickable? You want click it and then redirect you to another acion?
If yes, you could create controller for each item then use actionlink redirect user to action, or you can do it as andrei said that use <a
href='@Url.Content, or use the javascript.
Hope this helpful
Regards
Young Yang
Please mark the replies as answers if they help or unmark if not.
Feedback to us
Kovarian
Member
2 Points
10 Posts
Linking to Partial View
Apr 11, 2012 01:48 AM|LINK
I'm sending a number of items from a database to the screen like so...
@foreach (var item in Model)
{
@Html.DisplayFor(modelItem => item.Title)
}
How would I make each item clickable to a partial view? Thanks!
ignatandrei
All-Star
135210 Points
21690 Posts
Moderator
MVP
Re: Linking to Partial View
Apr 11, 2012 07:29 AM|LINK
If you want to return a partial view, then you can with Ajax and javascript
<a href="javascript:YourFunction(@ArgumentID)>text</a>
. http://bit.ly/mvc_ajax_jquery
If you want to navigate to an action, then put a simple <a href='@Url.Content
JohnLocke
Contributor
3216 Points
710 Posts
Re: Linking to Partial View
Apr 11, 2012 01:04 PM|LINK
<script>
$(".partialLink").click(function () {
$.get('/ControllerName/ActionName', { id: $(this.attr('id') }, function (data) {
$("#partialDiv").html(data);
});
});
</script>
@foreach (var item in Model) {
<a href ="#" id="@item.ID" class="partialLink">@item.Title</a>
}
<div id="partialDiv"></div>
----------
So, you have a loop that creates a link with id = your item's ID (rename ID to whatever your object's ID is). The link's class is set to "partialLink" so the javascript function will pick up a click on any link associated with partialLink class.
In the javascript, we call a jquery.get() to an action that returns a partial view. We send the link's id (your object's id) as an id parameter to the action. You can then process your action and return PartialView(). The last part of the jquery.get() calls to populate our returned data to the div named "partialDiv".
So when you click on the link, it'll trigger the jquery.get() call and send the model's ID to the action. When you return the PartialView, it returns to the jquery.get() as "data". We then populate the empty partialDiv container with the data (partial view).
Hope that helps.
Kovarian
Member
2 Points
10 Posts
Re: Linking to Partial View
Apr 11, 2012 05:15 PM|LINK
Thanks for the responses!
Where would this code go? In the MVC model I currently only have cshtml and cs files. Do I add an .aspx file? or modify the existing Index.cshtml file? Also how would I associate a link with that PartialLink class? Thanks again!
Young Yang -...
All-Star
21332 Points
1818 Posts
Microsoft
Re: Linking to Partial View
Apr 13, 2012 03:29 AM|LINK
Hi
Please explain your question. What's Your mean of make the item clickable? You want click it and then redirect you to another acion?
If yes, you could create controller for each item then use actionlink redirect user to action, or you can do it as andrei said that use <a href='@Url.Content, or use the javascript.
Hope this helpful
Regards
Young Yang
Feedback to us
Develop and promote your apps in Windows Store