How to display loading message when waiting for asp.net to return to a new view - asp.net-mvc

I have searched this a lot on the internet and I am looking for a way in where to display a loading message while asp.net is moving from one page to another. I have tried the load method from JavaScript but it does not work for moving from one page to another so how can I do this when a search button is clicked.
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Get))
{
<section class="search-sec">
<div class="container-fluid">
<form>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="searchTitle" class="form-control search-slt" placeholder="Job Title, Skills, Company!">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<input type="text" name="searchLocation" class="form-control search-slt" placeholder="Location">
</div>
<div class="col-lg-4 col-md-3 col-sm-12 p-0">
<button type="submit" value="Create" class="btn btn-danger wrn-btn">Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
}

If you are not using ajax then you could load the new page with a loading message and remove it when the load is complete. I used this one in one of my projects (https://ihatetomatoes.net/create-css3-spinning-preloader/). Basically you activate or deactivate adding a class to the html body.
In the view where I want to show it before anything else i put this:
<script>
$('body').removeClass('loaded');
</script>
and once everything is loaded :
<script>
//...other stuff
$(document).ready(function () {
setTimeout(function () {
$('body').addClass('loaded');
}, 500);
});
</script>
But you would still have time of wait before reaching the page, you should capture the search click and show the loader before leaving the first page.
Anyways I agree with Jerdine and daremachine, you would have more control loading with ajax the search results and showing them in the same page. Maybe is not possible so I hope the workaround works for you

Related

How to Handle PartialView form submit action in Bootstrap tab panel?

I have bootstrap tabs with 5 tabs. each tabs contains Partial View. when I post the form in Partial View from any tab then I want to stay on same tab after form submit successfully or if model validation fires. Currently, if I post form in Partial view then it loads full view and display first tab partial view
Tabpenl.cshtml
<div class="container">
<div class="row">
<div class="col-xl-12">
<h3>
First tab
</h3>
<section>
#Html.Partial("_Example1")
</section>
<h3>
Second tab
</h3>
<section>
#Html.Partial("_Example2")
</section>
<h3>
Third tab
</h3>
<section>
#Html.Partial("_Example3")
</section>
<h3>
Fourth tab
</h3>
<section>
#Html.Partial("_Example4")
</section>
<h3>
Firth tab
</h3>
<section>
#Html.Partial("_Example5")
</section>
</div>
</div>
</div>
_Example2.cshtml
<div class="form-group">
<div class="form-row">
<div class="col-md-8">
<input type="text" asp-for="City" class="form-control" maxlength="50" placeholder="Add City Name" required>
</div>
<div class="col-md-4">
<button id="btnSubmit" class="btn btn-warning btn-rounded btn-block " data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
</div>
</div>
</div>
You can trigger validation if(!$("#form_id").valid()) to navigate to the wrongly tab, also to keep current tab status, you can get the onChange event to save the information of current in local Storage or query parameter etc and navigate to it on reload.

When using Angular.js, how to retain form data after submit?

I have used the basic angular script which update what ever you type in the input field on any element we specify, real time...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Im new to Angular. I used this on may rails app. But the problem is, the field I used ng-model will reset its valu after submit. Even setting the 'value' attribute won't work. How can I fix this?
Exact code generated from my rails application :
<form accept-charset="UTF-8" action="/members" class="custom" id="new_member" method="post">
<div class="row collapse text-field">
<div class="small-4 columns">
<h3>Add Member : </h3>
</div>
<div class="small-6 columns left inline">
<h3 class="subheader inline"> {{newEntry.name}}</h3>
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_name">Full Name</label>
</div>
<div class="small-7 columns left">
<input class="input" id="member_name" name="member[name]" ng-model="newEntry.name" type="text" value="gj" />
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_address">Address</label>
</div>
<div class="small-9 columns">
<textarea class="input" height="115" id="member_address" name="member[address]">
</textarea>
</div>
</div>
<div class="row">
<div class="small-9 columns" ><input class="button radius" name="commit" type="submit" value="Add Member" /></div>
</div>
</form>
Note : I haven't used an ng-controller. Im new to Angular. If its required, please tell me how to convert the above to the controller. I can get the value of the field and send it back to the form in rails. Its there in a variable. But Angular keeps wiping it!
Note2 : This problem persist only for the input field I used angular-model.. All the other fields retained the data!
Ok this is not the best solution but you could do this:
<input type="text" ng-init="yourName = 'Your Value Goes Here'" ng-model="yourName" placeholder="Enter a name here">
ng-init directives are run when the app intialises, so your value will be assigned to angular's internal "yourName" model and be updated in the view accordingly.
That would solve your problem but its not the best way. Hopefully that will get you going for now - I'll try and post a more "ideal" solution shortly.

JQueryMobile not styling a Checkbox in Dialog

I am opening a page as a dialog. This dialog does not style the checkbox correctly.
Tried using checkboxradio("create"); but no joy.
How do I get the checkbox to style correctly in the Dialog box??
Here's a jsFiddle with the code.
You need to put the checkbox in a div with the proper markup
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
Example: http://jsfiddle.net/shanabus/8xMX2/12/
Based on the example in the docs here: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html
I think you'll have to put the checkbox inside of a form tag in order to get jQuery Mobile to style it.
Looks like this might be a bug. Adding the <form> tag works but you also had create but needed refresh for the checkboxradio():
http://jsfiddle.net/8xMX2/11/
JS
$('#page2').live('pageshow', function(){
$("input[type='checkbox']").checkboxradio("refresh");
});​
HTML
<div data-role="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
Open as Dialog
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
Back
<h1>Page Two</h1>
</div>
<div data-role="content">
<form>
This is a dialog Box.
JQM seems to be not styling the below checkbox.<br>
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">A Checkbox</label>
<br>
A button is styled well.<br>
Just a Button
</form>
</div>
</div>​

PartialViews Messing With Eachother

I have the following _Layout.cshtml page that has a bunch of #Html.Action() calls to several partial views.
<div class="wrapper">
<div class="header">
<a style="text-decoration:none;" href="#Url.Action("Index", "Home")"><div class="logo"><p>fisharwe</p><span class="greenText float-right">:</span></div></a>
<div class="searchBar">
#Html.Action("Search", "Item")
</div>
<div id="hearGreenBar"></div>
</div>
<div class="pageContent">
#RenderBody()
</div>
<div class="rightColumn">
<div id="help">
<div id="allHelpContent">
<span id="helpIcon"></span> <span id="helpTitle">help</span> <span id="helpArrow"></span>
</div>
</div>
<div id="userPanel">
#if(!Request.IsAuthenticated)
{
<div id="loginForm">#Html.Action("Login", "User")</div>
<div id="registerForm">#Html.Action("Register", "User")</div>
<hr class="greyLine" />
<div id="recentlyViewedItems">
<div id="recentItemsTitle">
<span class="recentItemsIcon"></span><span class="theRecentTitle">Recently Viewed</span>
</div>
</div>
}
else
{
<div id="userInfoSummary">#Html.Action("Summary", "User")</div>
}
</div>
</div>
</div>
At the top you can see the #Html.Action("Seach", "Item") call which renders a search bar and allows users to search for items/categories/sub-categories...etc. I got this working now, but it generated a new problem! When the user searches for something, and the results are rendered, the Login and Register partials in the sidebar (userPanel) are displaying validation errors such as "Email cannot be empty". I understand that the View is rendered regardless of what partial posted back but there has to be a way to prevent that from happening... Do I have to get rid of partials and render everything into the _Layout.cshtml page? But in that case I need to make this page typed which will cause yet another issue... So what can be done? I'm open to any suggestions...
Thank you.
Do you have different forms for the search and what is in the "userPanel"?. You may want to make sure your search is doing a get and not a post.
#using (Html.BeginForm("Search", "YourController", FormMethod.Get))

JQuery Mobile link to div on same page as dialog

I have this link on my page:
It shows up correct but it should render this when clicked:
<div data-role="page" id="advOptions">
<div data-role="header">
<h1>Advanced Options</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="stdDevs">Standard Deviations:</label>
<input type="textarea" name="stdDevs" id="stdDevs"/>
</div>
<div data-role="fieldcontain">
<label for="numsims">Number of Simulations:</label>
<input type="text" name="numsims" id="numsims" />
</div>
<div data-role="fieldcontain">
<label for="term">Forward Rate Data (in yrs):</label>
<input type="text" name="term" id="term" />
</div>
<div data-role="controlgroup" data-type="horizontal">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="d" data-transition="pop" data-icon="delete">Reset</button>
<button type="submit" data-theme="a" data-transition="pop" data-icon="plus">Add</button>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Chatham Financial</h4>
</div>
</div>
But it's trying to instead call the advOptions method on my controller which doesn't exist, looks like it's just trying to redirect from the base URL instead of opening that dialog.
What am I doing wrong?
The code looks good to me...
Are you adding that link to your page dynamically? Because if so, maybe JQuery Mobile did not recognize the data-rel="dialog" attribute. If this is the case, you should be able to simply call the .page() method on your page to let JQuery Mobile do its thing.

Resources