In my app I'm using MVC with Bootstrap. Ajax Action links are used as navigation.
Example:
<div class="navbar navbar-default">
<div class="navbar-header"></div>
<div class="buttons-container"></div>
<div class="navbar-collapse">
<ul class="nav nav-pills navbar-nav">
<li>#Ajax.ActionLink( i, "Action", "AboutUs", new { title = i }, new AjaxOptions() { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv", OnComplete = "updateDivAboutUs"} )</li>
</ul></div> </div>
Everything works as expected, when I resize my browser these links are converted into "dropdown" but my main problem is after converting I lose Ajax options like update target and I have plain text on my page without css and anything.
Did anyone encounter this problem before and any possible solution for this?
That's Bootstraps responsive design. The resizing of your nav links to a dropdown box. removing the 'navbar-collapse' div should do the trick I guess.
Related
Basically, I'm just trying to change the href attribute to be the result of the ActionLink:
#Html.ActionLink("Home", "Index", "Dashboard", new { }, new { #class = "nav-link active" })
<a class="nav-link active" href="index.html">
<div class="sb-nav-link-icon"><i class="fas fa-home"></i></div>
Home
</a>
If I replaced the index.html with #Html.ActionLink("Home", "Index", "Dashboard"), then what happens is the HTML is not formed correctly.
Any suggestions would be appreciated.
Thanks!
#Url.Action("Index", "Dashboard"), sorry this can be closed. Of course as soon as I ask I find the answer.
I guess that this code will work as you want it to. You don't have to use #Html.ActionLink
<a class="nav-link active" href="Dashboard/Index">
<div class="sb-nav-link-icon"><i class="fas fa-home"></i></div>
Home
</a>
I am trying to get an Ajax ActionLink to insert a small amount of content into a div within a view. No matter what I try, instead of inserting the content into the div with the rest of the HTML in the view in tact, it wipes out the entire existing view, and sends only the partial to the browser.
<div> Other Stuff</div>
#Ajax.ActionLink("Click here to see the latest review",
"LatestReview", new AjaxOptions
{
UpdateTargetId = "latestReview",
InsertionMode = InsertionMode.ReplaceWith,
HttpMethod = "GET",
LoadingElementId = "progress"
})
<div id="latestReview"></div>
<div>More Stuff</div>
So we start with this HTML:
<div> Other Stuff</div>
<a data-ajax="true" data-ajax-loading="#progress" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#latestReview" href="/Home/LatestReview">Click here to see the latest review</a>
<div id="latestReview"></div>
<div>More Stuff</div>
And what I want after the link is clicked it this:
<div> Other Stuff</div>
<a data-ajax="true" data-ajax-loading="#progress" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#latestReview" href="/Home/LatestReview">Click here to see the latest review</a>
<div id="latestReview">[Content Of The Latest Review]</div>
<div>More Stuff</div>
But instead, I get this:
<html><head></head><body>
<div class="review">
content of partial view
</div>
</body></html>
I have tried all the options within InsertMode: InsertAfter, InsertBefore, Replace, and ReplaceWith. I'm probably missing something simple. Just not sure what it is.
The problem turned out to be a miss-match between jquery files. I downloaded the latest versions of jquery, jquery-ui, and jquery.unobtrusive, and then it worked.
I have a default internet application template from MVC4 and I would like to add some links to the <nav> tag depending on the user logged in.
I.e all the users have a default navigation panel, but if it is an admin logged in, he should have extra link for Managing product stock.
Right now it looks like that(from _Layout.cshtml):
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Browse", "Product")</li>
...
</ul>
</nav>
And I need somehow insert new ActionLink. I've tried to make an if statement inside the default layout, but it does not work. How could I add an extra <li> tag inside this <nav>? I am not familiar with JavaScript or JQuery, but can it be done using MVC features?
Yes this can be achieved using the razor syntax
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Browse", "Product")</li>
#if( User.IsInRole("Admin") ){
<li>#Html.ActionLink("Admin", "...", "...")</li>
}
</ul>
</nav>
Consider:
<div id="tabs" >
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul><br />
<div id="Tab1" style="margin:0px; padding:0px;">
<ul>
<li>Inner A</li>
<li>Inner B</li>
<li>Inner C</li>
</ul>
<div id="InnerTab1">Welcome to Inner Tab1</div>
<div id="InnerTab2"><p>Welcome to Inner Tab1</p></div>
<div id="InnerTab3"><p>Welcome to Inner Tab1</p></div>
</div>
<div id="Tab2"><p>Tab2</p></div>
<div id="Tab3"><p>Tab3</p></div>
</div>
The above code is in a PartialView named ABC.
<%= Ajax.ActionLink("Select", "Action", new { Id = item.CustomerID }, new AjaxOptions { UpdateTargetId = "Abc" })%>
And the above code is in a partial view as well named XYZ.
So I have two partial views, Abc and XYZ. These two partial views are called on one view. On the view XYZ, I have a actionLink button on the click of which I am able to fill in details in ABC.
Now, in ABC I have a Tab panel as shown in the above code. When the page is load for the first time, I get the jQuery tab properly displayed. When I click on the ActionLink button, the tabs are displayed in the form of List.
I don't know what is happeneing. So this is my problem. Why are they losing their CSS on the click of action link?
I have included all the jQuery files in my code.
The jQuery UI Tabs component is not just CSS - it also uses JavaScript code to modify the elements under #tabs. When you click on the link, everything inside ABC is replaced with the version from the server, which does not include those modifications.
If you are using unobtrusive Ajax updates on an element that contains tabs, you will need to add an OnComplete handler to AjaxOptions that calls $("#tabs").tabs() to redo those modifications after the HTML is updated.
I have an ajax form in asp.net mvc which is as simple as this:
<% using (this.Ajax.BeginForm("LatestBlogPosts", "Blog", null, new AjaxOptions { UpdateTargetId = "blogPostPanel" }, new { id = "BlogPostForm" })) { %>
<div class="panel" id="blogPostPanel">
<img src="/images/ajax-loader.gif" alt="ajax-loader" />
</div>
<% } %>
I want to invoke the form submit when document is loaded. This should supposedly, call the controller's action and return a result that should be replaced with the placeholder DIV. If I add a SUBMIT button to the form, it works perfectly, but when I invoke the submit via jQuery, the whole page is refreshed, and the content returned by the server is displayed in the newly displayed page. Here's my jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#BlogPostForm").submit();
});
</script>
Anyway to do this?
I think it may work if you use the trigger method to generate the submit event, but I think there's a less complicated way to do this using jQuery.
<div class="panel" id="blogPostPanel">
<img src="/images/ajax-loader.gif" alt="ajax-loader" />
</div>
<script type="text/javascript">
$(function() {
$('#blogPostPanel').load( '<%= Url.Action( "LatestBlogPosts", "Blog" ) %>' );
});
</script>