0

I'm new to C#, and I'm wondering if it's possible to use an @Html.ActionLink command to execute a block of code in the same view?

So for example:

//bootstrap tab button 1
<@Html.ActionLink("Community", "", new {id="Community"}, new {@class= "nav-link active" }, new {data-toggle="tab"})

//bootstrap tab button 2
<@Html.ActionLink("Health", "", new {id="Health"}, new {@class= "nav-link" }, new {data-toggle="tab"})



<div id="Community"> //some code here </div>

<div id="Health"? //some code here </div>

Ideally there would be a default choice made on page load (community), and then when the user clicked on either the community, or health buttons(bootstrap tabs style) the corresponding code block would get run.

Not sure if this is possible with the Actionlink command, or perhaps there's a better/easier/simpler way to accomplish these tasks.

Update:

Attempted a solution below, and had no joy, so am including all of my code to help explain in greater detail.

EventCalendarController.cs

using iehp.EventCalendar.Models;
using Sitecore;
using Sitecore.Data;
using Sitecore.Data.Items;
using Sitecore.Mvc.Controllers;
using System.Linq;
using System.Web.Mvc;

namespace iehp.Controllers
{
    public class EventCalendarController : SitecoreController
    {
        public ViewResult EventCalendarCtrl()
        {

            //read in config file & get parentGuid value
            var parentGuidValue = Sitecore.Configuration.Settings.GetSetting("eventCalendarFolderGuid");

            //init Sitecore db 
            Database database = Context.Database;

            var model = new EventViewModel();
            model.Item = database.GetItem(parentGuidValue);
            model.Children = model.Item.Children.ToList();

            return View("/Views/Components/EventCalendarCtrl.cshtml", model);
        }
    }
}

EventCalendarCtrlModel.cs

using Sitecore.Data.Items; using System.Collections.Generic;

namespace iehp.EventCalendar.Models
{
    public class EventViewModel
    {
        public Item Item { get; set; }
        public List<Item> Children { get; set; }
    }
}

EventCalendarCtrl(partial view)

    @model iehp.EventCalendar.Models.EventViewModel

<div class="col-12"><h4>Upcoming Events</h4></div>
<div class="col-12 text-right"><a href="#" class="moreEvents">load more >> </a></div>

<div class="col-24">
    <ul id="eventsTab" class="nav nav-tabs nav-fill">
        <li class="nav-item">
            @Html.ActionLink("Community", "", new { id = "Community" }, new { @class = "nav-link" + @ViewBag.Tab == "Community" ? " active" : "" })
        </li>
        <li class="nav-item">
            @Html.ActionLink("Health", "", new { id = "Health" }, new { @class = "nav-link" + @ViewBag.Tab == "Health" ? " active" : "" })
        </li>
    </ul>
</div>

Community.cshtml(view)

@using Sitecore.Data.Fields
@using Sitecore.Data.Items
@using Sitecore.Mvc
@using Sitecore.Resources.Media
@model iehp.EventCalendar.Models.EventViewModel

@{
    ViewBag.Tab = "Community";
}
@Html.Partial("EventCalendarCtrl")

<div id="Community" class="card-deck">
    @foreach (var child in Model.Children)
    {
        Item item = Sitecore.Context.Item;
        ImageField imgField = ((ImageField)child.Fields["Image"]);

        <div class="card" style="margin-right:20px;">
            <img class="card-img-top" src="@MediaManager.GetMediaUrl(imgField.MediaItem)" />
            <div class="card-body">
                <p class="card-text">@Html.Sitecore().Field("Description", child)</p>
                <p class="date-time"><strong>Event Date:</strong> @Html.Sitecore().Field("Event Date", child)</p>
            </div>
        </div>
    }
</div>

thanks!

Nick
  • 141
  • 14
  • There are many ways to do it, I guess the better way would be partial view. Remember @Html.ActionLink will just render a tag in the HTML – Hugo Jose Apr 09 '18 at 18:59
  • Ahh, so that wouldn't allow me to execute a block of code in the same view. Would you have any suggestions on how to do it? – Nick Apr 09 '18 at 19:05
  • just a minute, I will write the answer using a partial view. – Hugo Jose Apr 09 '18 at 19:12
  • 1
    Change your action links to onclick events that simply call some javascript to toggle the divs visible or hidden. It will all render only 1 time, but only 1 of the 2 divs will be visible at a given time. This also allows you to set the default state to visible for community and hidden for health. – user7396598 Apr 09 '18 at 20:16
  • Would love to do that.. can I trigger a div in a view? (I'm new to c#/mvc development). So I could add an onclick to the ahref, then write a function that gets the click and shows the correct div, but would that work where the div is in a different file (in a view?) – Nick Apr 09 '18 at 20:26
  • 1
    Your javascript will try to grab the html elements by id, or class, or whatever you designate. If they are rendered, the js can find and manipulate them. You're not really triggering it in the view, you're setting the default style to hidden. Your js method then toggles the visibility of the div. Check out this example: https://stackoverflow.com/questions/19074171/how-to-toggle-a-divs-visibility-by-using-a-button-click -- yours will simply toggle 2 divs in the same method call. – user7396598 Apr 09 '18 at 23:17
  • 1
    It is important to note though, that if you are just hard coding the hidden attribute, if the page is reloaded it will go back to your default state. If you want it to maintain the last state between page loads, it gets a bit trickier, and will involve your view model to track the state and to dynamically set the divs correctly on page load. – user7396598 Apr 09 '18 at 23:19
  • This worked great. I should have thought of it in the beginning. This is the accepted solution as far as I'm concerned. :) – Nick Apr 10 '18 at 15:12

1 Answers1

0

Using partial view would be something like this

_CommunPage.cshtml:

 @model iehp.EventCalendar.Models.EventViewModel

<div class="col-12"><h4>Upcoming Events</h4></div>
<div class="col-12 text-right"><a href="#" class="moreEvents">load more >> </a></div>

<div class="col-24">
    <ul id="eventsTab" class="nav nav-tabs nav-fill">
         <li class="@(ViewBag.Tab == "Community" ? "nav-item active" : "nav-item")">
            @Html.ActionLink("Community", "", new { id = "Community" }, new { @class = "nav-link")
        </li>
         <li class="@(ViewBag.Tab == "Health" ? "nav-item active" : "nav-item")">
            @Html.ActionLink("Health", "", new { id = "Health" }, new { @class = "nav-link")
        </li>
    </ul>
</div>

Community.cshtml:

@{
    ViewBag.Title = "Community Page Tile";
    ViewBag.Tab = "Community";
}
@Html.Partial("_CommunPage")

Html for the Community page....

Health.cshml:

@{
    ViewBag.Title = "Health Page Tile";
    ViewBag.Tab = "Health";
}
@Html.Partial("_CommunPage")

Html for the Health page....
Hugo Jose
  • 339
  • 2
  • 13
  • Hi Hugo, this looks cool, and I'm trying to grasp it's workings. are the Cummunity and health views partials as well? Could the _CommunPage not be a partial? (I'm thinking about how to integrate your solution into my view page). – Nick Apr 09 '18 at 19:37
  • Maybe just you can use HTML purely. take a look at this link https://codepen.io/wizly/pen/BlKxo – Hugo Jose Apr 09 '18 at 19:49
  • The data is being pulled from a sitecore instance. Plugging in your example, didn't quite work, so I'm going to revise my post to include all my code, and that could make things more clear what I'm trying to accomplish. – Nick Apr 09 '18 at 19:54
  • So after attempting to use your solution, now the content associated with each "category" (community, health) is not pulling in, and my tabs actually are now more like links (trying to load separate pages instead of just displaying the correct category results). I've updated the code, any thoughts? :) – Nick Apr 09 '18 at 20:06
  • So using an idea that another person suggested, I solved this without using partial views, I just wrote a couple of basic jquery functions to show/hide divs, made two copies of my code blocks and made a jquery function to figure out what link was clicked. Probably not the most elegant way, but it works for now. Thanks for all of your efforts on this Hugo. – Nick Apr 09 '18 at 21:01