We Keep Coding

Having separate Controller/Views for each Tab?

I'm creating an application in Asp.NET MVC. The main page will consist of a couple of tabs, for example, Students & Courses.
There will be a Student model and Course model. I'd like to have a Controller for each that would contain New, Edit, Delete Actions. The front end will look similar to this..
I'd like to use partial views within the body of each tab. Taking the first tab as an example, when the page loads it will display a list of Students in the tab body as a partial view. On clicking 'Add Student' within this partial view it will call an Action in the Student Controller and then return and display a partial view in the tab body with a form to create a new Student. On posting this form it will then again show the Student list partial view in the tab body.
Could anyone point me in the right direction or suggest a clean approach to achieve this?
A thought I had would be to have a partial view for each Action, for example:
<div class="tab-content" style="margin-top:20px;margin-left:10px;">
<div class="tab-pane fade active in" id="page-config-tab">
#Html.Partial("~/Views/Student/_List.cshtml")
#Html.Partial("~/Views/Student/_Add.cshtml")
#Html.Partial("~/Views/Student/_Edit.cshtml")
</div>
<div class="tab-pane fade" id="candidates-tab">
#Html.Partial("~/Views/Course/_List.cshtml")
#Html.Partial("~/Views/Course/_Add.cshtml")
#Html.Partial("~/Views/Course/_Edit.cshtml")
</div>
</div>
And when a button is clicked, I will use Jquery to Hide/Show the relevant partial view in a div before calling the Action in the Controller?
Thanks

You can use AJAX to call the necessary action which returns the correct partial view. Rendering them all on page load is wasteful since only 1 partial view will be displayed at a time.
Your initial HTML should looks like the following, only rendering the view you need:
<div class="tab-content" style="margin-top:20px;margin-left:10px;">
<div class="tab-pane fade active in" id="page-config-tab">
#Html.Partial("~/Views/Student/_List.cshtml")
</div>
<div class="tab-pane fade" id="candidates-tab"></div>
Then, add a script block:
<script>
$(function() {
$('#addStudentBtn').click(function() {
$.ajax({
method: 'GET',
url: '#Url.Action("Add", "Student")',
success: function(data) {
$('#page-config-tab').html(data); // 'data' will be your partial view
}
});
});
});
</script>
I've shown you a bare-minimum example for adding a student, you can use this general approach for each action.
P.S. looks like you're using bootstrap - they have event handlers you can use when changing tabs: https://getbootstrap.com/docs/3.3/javascript/#tabs-events

onClick bind to Url.ActionLink only works first time

So I have a Url.ActionLink, that when clicked, I want to load a partial view into a modal. This works the first time, but the second time it redirects the browser to the partial view instead of loading it into a modal, and the modal() call has an error saying that it is undefined.
The html for the div is:
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" id="modalBody"></div>
</div>
</div>
</div>
The code for the binding/loading so far is:
$(".actionLink").on("click", function (e) {
e.preventDefault();
$("#modalBody").load(e.target.href);
$("#modal").modal('show');
return false;
});
The error that I'm getting before the redirect is on the $("#modalBody").load(e.target.href); and the error is "Uncaught TypeError: undefined is not a function." It works the first time a link is clicked, so I don't know why it would be undefined the second time.

The .on() type of binding works only with the elements which was created before the script has been initialised.
So if you load some content dynamically in the on click function, the on() binding won't work for that content.
One solution could be if you bind the click event to the container element, where you load the new content, something like this:
$("#container").on("click", ".actionLink", function(e) { ... });
"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()"
jQuery .on() doc

show the animated gif file until asp page load while redirect?

When I click the redirect button, asp.net project redirect one html file And it show a loader (animated gif) to the user. Then it redirect to the particular page. Its works fine.
But now I not need the redirect page intermediate. When I Click the Redirect button, it show the particular asp page, and loader (animated gif) shows center in same page untill it loads. After the page loaded - loader (animated gif) has to hide. How can I do this?. Give a sample.
C# Code -
Response.Redirect("Redirecting.html?AvailResults.aspx");
Redirecting.html Code -
<body>
<div style='position:absolute;z-index:5;top:45%;left:45%;'>
<img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" /><br /> <br />
</div>
<script type="text/javascript">
/* <![CDATA[ */
this.focus(); //focus on new window
redirect = function() {
var querystring = window.location.search.substring(1); //first query string
var page = querystring.substring(querystring.indexOf('=') + 1, querystring.length);
function toPage() {
if (page !== undefined && page.length > 1) {
document.write('<!--[if !IE]>--><head><meta http-equiv="REFRESH" content="1;url=' + page + '" /><\/head><!--<![endif]-->');
document.write(' \n <!--[if IE]>');
document.write(' \n <script type="text/javascript">');
document.write(' \n var version = parseInt(navigator.appVersion);');
document.write(' \n if (version>=4 || window.location.replace) {');
document.write(' \n window.location.replace("' + page + '");');
document.write(' document.images["imgAjax"].src = "images/ajax-loading.gif"');
document.write(' \n } else');
document.write(' \n window.location.href="' + page + '";');
document.write(' \n <\/script> <![endif]-->');
}
}
return {
begin: toPage
}
} ();
redirect.begin();
/* ]]> */
</script>
</body>

The problem here is you can't remove the intermediate step AND show/hide your spinner on a different url (you would have already redirected by the time it loaded). You need a page to load the ajax spinner. I see two choices:
Option 1: go back to the way you were doing it (click redirect button, go to redirect page with spinner, then redirect to the final destination). This is similar those "You're now leaving xyz.com" splash pages that forums often use...
Option 2: add an iFrame to your redirect page so you can both show/hide the spinner and load the destination page (in the iframe) at the same time. (If you're redirecting to your own pages in an app or keeping the host the same, you should be able to avoid cross-site issues and ensure the destination pages don't contain frame-breakout scripts etc)
Here's what that might look like:
<div style='position:absolute;z-index:5;top:45%;left:45%;'>
<img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" />
</div>
<iframe src="about:blank" id="ifRedir" onload="$('#imgAjax').hide();" style="width:100%;height:100%;border:0px;"</iframe>
<script type="text/javascript">
$(document).ready(function () {
$('#ifRedir').attr('src', location.search.substr(1));
});
</script>
I think it's always better for a child page in a frame to tell a parent frameholder when it's done loading (you could do this via window.onload and a "parent." call). Without this type of interaction the page will load (and hide the loading spinner) before all pages assets (images) are fully loaded.
You could avoid this by removing the code and instead using:
<script type="text/javascript">
$(document).ready(function () {
$('#ifRedir').attr('src', location.search.substr(1));
setTimeout(function () { $('#imgAjax').hide(); }, 1000);
});
</script>

Web Page Print Preview

I'm creating an online application form.
In front page, There are First Name, Last Name, Email etc... form inputs. What I want is that
if user fills the form and click on the submit, I want to show him the print preview page with values which user filled... Is it possible? I'm using ASP.Net C#

If you can use jquery this code is good
$(document).ready(function () {
window.print();
});
and you can see these
http://www.designplace.org/tutorials.php?page=1&c_id=27
http://www.alistapart.com/articles/goingtoprint/
https://web.archive.org/web/20211029043752/https://www.4guysfromrolla.com/webtech/061103-1.shtml

If you can use javascript, then try this
<script type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=850,height=800,toolbar=0,scrollbars=1,status=0');
WinPrint.document.write('<html><head><title>Popup</title>')
WinPrint.document.write('</head><body>');
WinPrint.document.write('</body></html>');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
}
</script>
Take a print button on the page
<input id="btnPrint" type="button" value="Print" runat="server"
onclick="javascript:CallPrint('divPrint')"/>
and Place your Controls which are to be printed within a div
<div id="divPrint">
//Your controls
</div>

How to use #ReCaptcha with Ajax Form in MVC3?

I am trying to use ReCaptcha from Microsoft.Web.Helpers. If I load the entire page it renders correctly, but if I load the page with an ajax request it disappears.
Example (/home/index)
<div id="bla">
#Ajax.ActionLink("reload with ajax", "index", new AjaxOptions() { UpdateTargetId = "bla" })
#ReCaptcha.GetHtml(publicKey: "xxx")
</div>
If I enter /home/index the captcha appears. If I click the button reload with ajax the ReCaptcha disappears...
The page is loaded for the first time
reload with ajax was clicked, the contents of the page change to /home/index, in other words, the entire page reloaded asynchronous and the captcha is gone
Is there a way to fix this or a decent captcha helper for MVC 3?

I've replaced the helper with javascript. ReCaptcha script
<div id="captcha"></div>
<input type="submit" value="Send" />
<script type="text/javascript">
Recaptcha.destroy();
Recaptcha.create("publicKey", "captcha", {});
</script>
And the Controller is still the same
if (ReCaptcha.Validate("privateKey"))
{
}
So when it loads the view partially it executes this scripts and render correctly every time.
Thanks for the help #Bala R

I faced the same issue and the quickest solution i found is using what it is proposed above and add to it this part of code in the top of your page within the handler "EndRequestHandler" proposed by the .net javascript api ( http://msdn.microsoft.com/en-us/library/bb311028(v=vs.100)).
With this solution the backend validation always works.
Here is the code I've used :
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (Recaptcha != null) {
Recaptcha.destroy();
Recaptcha.create("public_key", "captcha", {});
}
}
</script>
I hope this could help someone...