I am using Bootstrap ScrollSpy in MVC 5 application.
ScrollSpy works fine with plain html and jquery but I want to implement the same thing in MVC 5.
<li>About</li>
<li>Contact</li>
the above code works fine, but when I tried to implement the same thing in MVC I somehow get confused.
<li> #Html.ActionLink("About", null, null, null, new { #class = "hidden-xs" })</li>
<li> #Html.ActionLink("Contact", null,null, null, new { #class = "hidden-xs" })</li>
This is not working as expected as its trying to redirect to specified actionname or I may be doing something wrong.
Suggest something.
Requirement for Bootstrap scrollspy to work, the scrollable elements must match the ID of the links.
Here <li>Contact</li> should match div with id <div id="contact">
Using Mvc:
<li> #Html.ActionLink("Contact", "Index", "Home", null, null, "contact", null, null)</li>
<li> Contact</li>
Check difference between HTML.ActionLink vs Url.Action here.
So finally in server side both generates url with trailing slash before hash(#) as shown below:
Contact
And thus above link doesn't match div with id <div id="contact"> because of / before #
Solution Using Mvc:
Create Custom UrlHelper
Create a folder named Helpers and add a class named UrlExtensions finally add below code:
public static class UrlExtensions
{
public static string HashAnchorLinks(this UrlHelper url, string hashLinkName)
{
string hashAnchorLink = string.Format("#{0}", hashLinkName);
return hashAnchorLink;
}
}
In View:
#using YourProjectName.Helpers;
<li> About</li>
<li> Contact</li>
Note:
Best solution would be using plain html as you did before, instead of using server to return the hash link.
References:
1.
2.
3.
Your not passing the right parameters in into the ActionLink().
#Html.ActionLink("About", "Home", "About", new object { }, new { #class = "hidden-xs"})
#Html.ActionLink("Contact", "Home", "Contact", new object { }, new { #class = "hidden-xs"})
Here is a explanation of the function.
Related
The problem in Html.ActionLink() is that you can't add additional html content inside the tag that it generates.
For example, if you want to add an icon besides the text like:
<i class="fa fa-users"></i> Go to Users
Using Html.ActionLink(), you can only generate:
Go to Users
So, to resolve this, you can use Url.Action() to generate only the URL inside the tag like:
// Here, Url.Action could not generate the URL "/admin/users". So this doesn't work.
<i class="fa fa-usesr"></i> Go to Users
// This works, as we know it but won't pass the Area needed.
<i class="fa fa-users"></i> Go to Users
So, how do you pass the Area using Url.Action()?
You can use this Url.Action("actionName", "controllerName", new { Area = "areaName" });
Also don't forget to add the namespace of the controller to avoid a conflict between the admin area controller names and the site controller names.
Something like this
public override void RegisterArea(AreaRegistrationContext context)
{
context.MapRoute(
"Admin_default",
"Admin/{controller}/{action}/{id}",
new { action = "Index", id = UrlParameter.Optional },
new[] { "Site.Mvc.Areas.Admin.Controllers" }
);
}
#Url.Action("{action}", "{controller}", new { Area = "areaname" });
#Html.ActionLink("LinkName", "{action}", "{controller}", new { area = "{areaname}" }, new { #class = "btn btn-cool" })
write area name as html attribute with anonymus object. you can use actionlink html helper extension method to achieve same thing.
If you want to create link for root controllers, it's enough to use this code:
Url.Action("ShowImage", "Page", new { Area = "" })
#Url.Action("{action}", "{controller}", new { Area = "areaname" });
#Html.ActionLink("LinkName", "{action}", "{controller}", new { area = "{areaname}"}, new { #class = "btn btn-cool" })
You can use above this
I am getting confuse in understanding the query string and routing concept in asp.net mvc, and I will appreciate if some one can please help.
My problem is:
I have a login page where user will enter the Username, password and Id. After successful login I like to take the Id and pass it to my Profile page. Now profile page is part of layout page along with two other links.
<nav class="main">
<ul class="menu" >
<li>#Html.ActionLink("Profile", MVC.Profile.Index(), new { Id = Request.QueryString["Id"].ToString() })</li>
<li>#Html.ActionLink("Configuration", MVC.Configuration.Index(),new { Id = Request.QueryString["Id"].ToString() })</li>
<li>#Html.ActionLink("Transaction", MVC.Transaction.Index(), new { Id = Request.QueryString["Id"].ToString() })</li>
</ul>
</nav>
From my login page I am using the following code to Redirect the user to Profile page.
return RedirectToAction("Index", "Profile", new { Id =
viewModel.Id });
Now how can i pass the same value to configuration and transaction page, they are just action links on layout page.I thought of using Request.QueryString like below:
new { Id = Request.QueryString["Id"].ToString()
but this is throwing object reference exception.
my routing look like this:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Login", action = "Index", id = UrlParameter.Optional });
Thanks in advance.
So after you are redirecting to the Index action of your Profile controller, make sure your action takes in a int parameter like below and return it to the Profile view:
public ActionResult Index(int id)
{
return View(id);
}
Render your links in the Profile's Index view like below:
#model int
<nav class="main">
<ul class="menu" >
<li>#Html.ActionLink("Profile", "Index", new { Id = #Model })</li>
<li>#Html.ActionLink("Configuration", "Index",new { Id = #Model })</li>
<li>#Html.ActionLink("Transaction", "Index", new { Id = #Model })</li>
</ul>
</nav>
Let me know if you need more clarification.
<li class="rtsLI" id="Summary"><span class="rtsTxt">Test</span></li>
Above I am replacing with following actionlink:
<li class="rtsLI" >#Html.ActionLink("test1", "Index", new { Area = "Area1", Controller = "controller1" }, new { #class = "rtsLink rtsTxt"})</li> "
At first css is working fine. But when using Actionlink, css not working. Thanks
The standard ActionLink helper always HTML encodes the link text. This means that you cannot use it if you want to render HTML inside. You have 3 possibilities:
Modify your CSS so that you don't need a span inside the link and so that the rtsTxt class could directly be applied to the link
Write a custom ActionLink helper that doesn't HTML encode the text and which would allow you to generate the same markup:
public static class ActionLinkExtensions
{
public static IHtmlString ActionLinkUnencoded(
this HtmlHelper htmlHelper,
string linkText,
string actionName,
object routeValues,
object htmlAttributes
)
{
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
var link = new TagBuilder("a");
link.MergeAttributes(new RouteValueDictionary(htmlAttributes));
link.Attributes["href"] = urlHelper.Action(actionName, routeValues);
link.InnerHtml = linkText;
return new HtmlString(link.ToString());
}
}
and then:
<li>
#Html.ActionLinkUnencoded(
"<span class=\"rtsTxt\">User Security</span>",
"index",
new { area = "Tools", controller = "UserSecurity" },
new { #class = "rtsLink" }
)
</li>
Use the Url.Action helper:
<li class="rtsLI">
<a href="#Url.Action("index", new { area = "Tools", controller = "UserSecurity" })" class="rtsLink">
<span class="rtsTxt">User Security</span>
</a>
</li>
Best option will be to use #Url.Action extension method
<li class="rtsLI" id="Summary"><span class="rtsTxt">User Security</span></li>
Write code this way:
<li class="rtsLI" >#Html.ActionLink("<span class='rtsTxt'>User Security</span>", "Index", new { Area = "Tools", Controller = "UserSecurity" }, new { #class = "rtsLink"})</li>`
Hi I am having difficulties using Url.Action method, please see my code below, what am I doing wrong....? (I'm using MVC Razor)
<a href='<%: #Url.Action("Edit", "Student",
new { id = item.DealPostID }) %>'>Hello </a>
Student is my StudentController and Edit is ActionResult method.
Remove <%: %> from your Razor view. Those are WebForms tags.
<a href='#Url.Action("Edit", "Student",
new { id = item.DealPostID })'>Hello </a>
Try this:
#Html.ActionLink("Hello", "Edit", "Student", new { id = item.DealPostID }, null)
Argument 1: Link text
Argument 2: Action name
Argument 3: Controller name
Argument 4: Route values
Argument 5: HtmlAttributes. This is set to null so that it doesn't append "?Length=" to your URL.
That should work out for you.
<a href='#Url.Action("Index", "Cliente", "Home")'>
I have this in my Global.asax.cs:
routes.MapRoute(
"User",
"User/{username}/{action}",
new { controller = "User", action = "Index", username = "*" }
);
Then on my _Layout.cshtml I have this code:
<ul id="menu">
#if (!String.IsNullOrEmpty(Context.User.Identity.Name))
{
<li>#Html.ActionLink("Home", "Home", new { controller = "User" }, new { username = Context.User.Identity.Name })</li>
}
</ul>
</div>
</div>
The thing is, it will render the link properly the first time it swings through here. (Link will be /User/rob/Home where "rob" is a username. If I navigate elsewhere on the page and then click back on my link, the link is rendered as /User/*/Home. When I step through the code, Context.User.Identity.Name is correct every time.
Am I missing something really basic here? I'm not sure what to search for.
That's exactly what you should expect given that route. You don't specify username in the route values dictionary but in the HTML attributes, so it takes the default from the route, *. You should be using the signature that allows you to specify both the controller and the action as strings with additional route values in the dictionary.
#if (!String.IsNullOrEmpty(Context.User.Identity.Name))
{
<li>#Html.ActionLink("Home", "Home", "User" new { username = Context.User.Identity.Name }, null )</li>
}