Retain jquery tabs after redirect - jquery-tabs

I am having jquery tabs inside the parent menus, I want to retain the opened tabs after the page redirect.
HttpContext.Current.Response.Redirect("~/HRMS/PayrollHome.aspx", false);

You could always store when tabs are opened and closed in the session. Then when the page is visited again you can check if each tab is listed as being open in the session and if it is re-open it.
EDIT
Its difficult to give you entire code snippets that answer your problem completely because I haven't got access to your code base. But it would be something like this.
<ul id="tabs">
<li onclick="$.get("SaveTab.ashx?tab=1");">Tab 1</li>
<li onclick="$.get("SaveTab.ashx?tab=2");">Tab 2</li>
</ul>
Then in the SaveSession handler
<%# WebHandler Language="C#" Class="SaveTab" %>
using System;
using System.Web;
public class SaveTab: IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
if (HttpContext.Current.Request.QueryString["tab"] != null)
{
HttpContext.Current.Session["OpenTab"] = HttpContext.Current.Request.QueryString["tab"];
}
}
public bool IsReusable {
get {
return false;
}
}
}
Then in the ASPX output some Javascript that selects the tab. Notice that I am outputting the session value.
$(document).ready(function() {
$('#tabs').tabs('select', <%= SESSION["OpenTab"]%>);
});
I hope this is enough for you to get the general idea, I can't obviously tell you exactly what to do just show you a good approach.

Related

Custom Blazor Server Component Not Invoking the OnClick Function

I have created a layout component in the same directory as with the MainLayout component. The CustomLayout #inherits LayoutComponentBase and has #Body which gets the content to be rendered inside the layout.
As obviously expected, the layout component has its own css files and UI display is fine. I am only having a problem with the #onclick function. It cannot be invoked. Is there a way to trigger the function on button click?
The reason I want to do this is that I am creating a navigation bar which will have to show/hide a dropdown. I hope I can get some ideas on this. Appreciated.
I am calling a server function this way: #onclick="SomeFuction" or #onclick="SomeFuction" or #onclick="#(() => SomeFuction())"
LayoutComponent:
#inherits LayoutComponentBase
#Body
Home page referencing a custom layout:
[AllowAnonymous]
[Layout(typeof(CustomLayoutComponent))]
[AllowAnonymous] is just for allowing anonymous access.
I am using Blazor Server and .NET 6
Additional Information:
I have put all the code in one page so that it becomes easier to read and understand.
Here is the LayoutComponent razor component:
#inherits LayoutComponentBase
<div class="navbar" id="custom-navbar">
<div class="wrapper">
<a>Home</a>
<a>Service</a>
<button class="btn btn-primary" #onclick="ToggleProductsUI">Products</button>
</div> </div>
<!--Component to show Products UI Component. Scoped css for styling-->
<ProductsComponent TValue="string" UIState="#ProductsUIState"></ProductsComponent>
#code{
// state of the Products submenu Component
string ProductsUIState { get; set; }
// a control function for toggling the Products UI
// this function somehow is not invoked.
void ToggleProductsUI()
{
if (string.IsNullOrWhiteSpace(ProductsUIState))
{
ProductsUIState = "show-ui";
return;
}
ProductsUIState = string.Empty;
}
}
Here is the ProductsUI component code (I have removed the unnecessary event to avoid confusion. The component can be fully controlled by the parent):
public partial class ProductsComponent<TValue> {
[Parameter]
public string? UIState { get; set; } }
Blazor pages that will use the custom layout component will point to it like this:
[AllowAnonymous]
[Layout(typeof(CustomLayoutComponent))]
public partial class Index
{
}
This is working fine. The issue is in the CustomLayoutComponent when trying to invoke the ToggleProductsUI() function
I accidentally inluded a <body> element in the layout and as such, the <script src="_framework/blazor.server.js"></script> was not being run hence the click event was not being invoked. I removed the <body> element. I was misled by the default body{} style in the underlining scopped css. Resolved.

Use forms on multiple tabs in Net Core 3.1 MVC

In my Net Core 3.1 MVC project I wish to create two tabs on one page, with on each tab a form for editing data. What is the best approach to do this? Preferably with lazy loading, so that form data gets loaded when a tab is active.
I have tried with Pages and PartialViews but this didn't work properly, and now I am wondering if there is a straightforward way of achieving this in Net Core MVC.
My code so far:
basicprofile.cshtml
#page
#model VideoGallery.Presentation.Pages.Account.BasicUserProfile.InputModel
#{
}
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="basicprofile-tab" data-toggle="tab" href="#basicprofile" aria-controls="basic" aria-selected="true">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" id="extendedprofile-tab" data-toggle="tab" href="#extendedprofile" aria-controls="extended" aria-selected="false">Profile</a>
</li>
</ul>
<div class="tab-content p-3 border-right border-left">
<div class="tab-pane fade show active" id="basicprofile" role="tabpanel" aria-labelledby="basicprofile-tab">
</div>
<div class="tab-pane fade" id="extendedprofile" role="tabpanel" aria-labelledby="extendedprofile-tab"></div>
</div>
#section scripts{
<script>
var basicprofileLoaded = false;
var extendedprofileLoaded = false;
console.log("active");
$(function () {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
switch ($(e.target).attr('aria-controls')) {
case "basic":
if (!basicprofileLoaded) {
$('#basicprofile').load("#Url.Page("basicuserprofile", pageHandler:"PartialForm" )");
basicprofileLoaded = true;
}
break;
case "extended":
if (!extendedprofileLoaded) {
console.log("inside switch/ IF extended part");
$('#extendedprofile').load('/account/extendedprofile')
ordersLoaded = true;
}
break;
}
});
});
</script>
}
BasicUserProfile.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.ComponentModel.DataAnnotations;
using System.Threading.Tasks;
using VideoGallery.Presentation.Services;
namespace VideoGallery.Presentation.Pages.Account
{
public class BasicUserProfile : PageModel
{
[BindProperty]
public InputModel Input { get; set; }
public class InputModel
{
public string LoginName { get; set; }
public string Password { get; set; }
}
// both methods don't even get called, even when the page renders with an empty form.
public async Task<IActionResult> OnGetAsync()
{
Input.Password = "test inpu";
Input.LoginName = "other input";
return Page();
}
public async Task<PartialViewResult> OnGetPartialForm()
{
Input.LoginName = "some name";
return Partial("_BasicProfilePartial", Input);
}
}
}
I have several problems:
My handlers OnGet() and OnGetPartialForm() are not fired. Break points don't get hit.
On loading of BasicUserProfile page, the basic tab should be active, showing the form on this first tab. It has the active class, but the data isn't loaded.
The BasicProfile tab loads the whole Page object, after I click the basic tab (when I am on the extended-tab, for example). It loads the whole page, although none of the backend breakpoints are hit.
What I would like to do:
On loading the initial page, the form data for the first tab (active on loading) should be loaded, with or without data. Then if the user changes to the second tab, that form data should be loaded and displayed under the 2nd tab. Obviously, later, I want to process the data with a post request.
My handlers OnGet() and OnGetPartialForm() are not fired. Break points don't get hit.
That is because you use #model VideoGallery.Presentation.Pages.Account.BasicUserProfile.InputModel , which is not a PageModel.
Change to:
#page
#model VideoGallery.Presentation.Pages.Account.BasicUserProfile
<input asp-for="Input.Password" />
<input asp-for="Input.LoginName" />
$('#basicprofile').load("#Url.Page("basicuserprofile", pageHandler:"PartialForm" )");
Be sure the url is rendered successfully. You can press F12 and click Sources panel to check the js source in browser. In your scenario, it seems to be:$('#basicprofile').load("#Url.Page("/Account/basicuserprofile", pageHandler:"PartialForm" )");.
[BindProperty]
public InputModel Input { get; set; }
You need remember to initialize the InputModel, otherwise it will get error when hit Input.Password = "test inpu";:
[BindProperty]
public InputModel Input { get; set; } = new InputModel();

How to link to a webpage that is in the same folder and level

I am having trouble with accessing a html page that is in the same folder directory and level. Every thing I tried results in a error on the page. I have tried a few ways to navigate to the page, but all fail except for main 5 it just opens the login page again so that does not work either.
I am a bit lost on how this works. I have attached a picture of now my structure is set up below.
I am trying to get from home.html to main.html
I am running Spring framework.
And this is the code that I am using to as the link.
{{>partials/header}}
<h2>Login Page</h2>
<h4>Links</h4>
<ul class="nav nav-pills nav-stacked">
<li role="presentation">
Main 1
Main 2
Main 3
Main 4
Main 5
</li>
</ul>
{{>partials/footer}}
Here is my controller
//New login page
#RequestMapping(value = HOME_URL_MAPPING)
public String inventory(final Model model) {
return controllerHelper.createUrl(INVENTORY, WebGlobals.HOME);
}
//new page Was the home page before
#RequestMapping(value ="/main")
public String inventgus(final Model model) {
UserDetails activeUser = (UserDetails)SecurityContextHolder.getContext().getAuthentication().getPrincipal();
model.addAttribute(CAN_MAKE_REQUEST, canMakeRequest(activeUser));
model.addAttribute(CAN_APPROVE_REQUEST, canApproveRequest(activeUser));
return controllerHelper.createUrl(INVENTORY, "main");
}
You were so close! Here's the answer:
Main
The single dot refers to the current folder and putting a slash means that the file is under that folder.
this works for me:
Main

2 interlocking questions regarding html helpers

first off some background. i have a web site written in MVC5 and VS 2013. i created the project using the MVC template so i do have the bootstrap navbar at the top which is where all my menu links are. each link corresponds to a different view and each view uses (by default) _Layout.cshtml. i want to do 2 things to the links on the navbar - 1. have the current selected (active) item highlited when selected and 2. have them ajax compliant so that only the content of each view is refreshed not the entire page when a link is clicked.
i already have goal 1 done and working but i'm not sure i'm doing it right. after finding a sample on the web i created an html helper extension method in the App_Code directory that looks like this..
public static class MyHelper
{
public static MvcHtmlString HtmlLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName)
{
var currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
var currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
var builder = new TagBuilder("li")
{
InnerHtml = htmlHelper.ActionLink(linkText, actionName, controllerName).ToHtmlString()
};
if (controllerName == currentController && actionName == currentAction)
builder.AddCssClass("active");
return new MvcHtmlString(builder.ToString());
}
}
i implemented it in _Layout like this..
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.HtmlLink("Home", "Index", "Home")</li>
<li>#Html.HtmlLink("About Me", "AboutMe", "Home")</li>
<li>#Html.HtmlLink("Samples", "Samples", "Home")</li>
<li>#Html.HtmlLink("Links", "Links", "Home")</li>
<li>#Html.HtmlLink("Contact", "Contact", "Home")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
</div>
the only question i have with this is how does VS know that HtmlLink is a helper extension? i didn't inherit from anything and both the class and method names were ones i made up. all i had to do was put #Html in front and it knew what it was. just want to understand whats going on. sure it works but i want to know why.
now for the Ajax stuff. i got that working also but i had to change the html helper calls in _Layout to ajax helper calls as so..
<li>#Ajax.ActionLink("Home", "Index", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
<li>#Ajax.ActionLink("About Me", "AboutMe", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
<li>#Ajax.ActionLink("Samples", "Samples", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
<li>#Ajax.ActionLink("Links", "Links", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
<li>#Ajax.ActionLink("Contact", "Contact", "Home", new AjaxOptions() { UpdateTargetId = "site_content" })</li>
but now i'm in a quandary. since in both cases i had to change the same code in _Layout, i can right now only do one or the other not both.
is there a way to possibly combine the 2 functionalities into one helper method or maybe there's a better way to do either or both? appreciate any help.
surprised nobody came up with this. the first question was answered but the second was not. to reiterate, it was 'how do i get both the active menu selection and Ajax to work at the same time using extensions?' took some doing but i found the answer. i ended up using the Ajax.ActionLink helper in _Layout.cshtml to implement Ajax and the following jquery added to each view to implement the menu selection. very simple and ended up not even needing the extension..
$(document).ready(function () {
$('ul.nav.navbar-nav').find('a[href="' + location.pathname + '"]')
.closest('li').addClass('active');
});
so as it turns out i didn't need the Html helper extension method i created but at least i learned how to do it. anyway, to finish things off, i just changed the default attributes in bootstrap.css to fit my preferences and that was it..
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #DA9C9C;
background-color: #FFFFFF; /**/
text-shadow: 0px 0px #FFFFFF; /**/
font-weight:bold;
}
both objectives are now met and it works like a champ.

loading an html page using angularjs

Am new to Angular and seek your help. Is it possible to display/load an HTML page (i don't want redirection to a page) through a controller in AngularJS?
To elaborate: I have an application page that displays a list of items, say. Each item has a 'view' icon against it which when clicked should bring up a detailed view of the item.
<ul class="list" data-ng-controller="check">
<li>Item 1
<em class="view"></em>
</li>
<li>Item 2
<em class="view"></em>
</li>
</ul>
myapp=angular.module("MyApp",[]);
myapp.controller("check",['$scope',function($scope){
$scope.somefunction = function(){how to ask it to load an html page i got ??};
}]);
Thanks!
ng-include is the correct way of achieving this. http://docs.angularjs.org/api/ng.directive:ngInclude
If you really don't want to do that you can fetch the page using $http and mark it as safe to render using $sce.
<div ng-bind-html="trustedHtml"></div>
myapp.controller("check",['$scope', '$http', '$sce',
function ($scope, $http, $sce) {
// Fetch contents using $http.
$http({method: 'GET', url: '/someUrl'}).success(function (contents) {
$scope.trustedHtml = $sce.trustAsHtml(contents);
});
}
]);