Is there a way to load a view as Partial (one with Layout = null), or as Standard (one with the default Layout in _ViewStart)?
I am trying to accomplish only loading part of a page (Partial View) into the current page if a user is already at some page that has the Layout presented, or loading the whole page (View + Layout) if a user is going to the page are not at a page that has the Layout loaded (such as when entering a specific URL into their address bar).
Yes, but you'll need to use some javascript too. Razor is a server-side rendering engine so once it has left the server you'll need client side scripting to take over and respond to your user's clicks if you want to dynamically load portions of the page.
In your View you could have something like this:
<button>Load Partial</button>
<div id="partial-content">
</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("button").click(function() {
$.get("/ControllerName/MyPartial").success(function(data) {
$("#partial-content").html(data);
});
});
});
</script>
In your Controller:
public ActionResult MyPartial()
{
return PartialView();
}
The javascript is simple:
Wait for the document to be ready.
Bind to the click event of the button.
When the button is clicked make a HTTP GET request to the url.
When the response comes back set the html of your div.
On a web page, I have some "Ignore this person" type of buttons. I'm attempting to use a pop up confirmation form which opens after a user clicks one of these buttons. I have 1 pop up confirmation form per "potential ignoree". These popups work as intended the first time, but once a popup form's action is carried out, I cannot get another such form to open/display by a subsequent button click. Here is my pop up form html and razor code:
<div data-role="popup" id="showIgnoreDialog#(i)" data-theme="a" style="max-width:400px;" class="ui-corner-all">
<form action="~/DisplayNames?ind=#passedIndex&sN=#whoToIgnore&tId=-2" id ="ignoreFormId" method="get">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1 id="popupHeader">Ignore them</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
#{
// make sure the name fits in box below
if(whoToIgnore.Length > 25)
{
whoToIgnore30 = whoToIgnore.Substring(0, 25);
whoToIgnore = whoToIgnore30 + "...";
}
}
<h3 id="popupInnerHeader" class="ui-title">Ignore #whoToIgnore?</h3>
Cancel
<button type="submit" data-inline="true" data-theme="c">Ignore</button>
</div>
</form>
Below this code on the cshtml page I have the following Jquery/Javascript:
function showIgnoreForm(i)
{
// var z = confirm("Works after submission...");
$("#showIgnoreDialog"+ i).popup('open');
}
I have tried to stick the functions inside a "document ready function" like:
jQuery(document).ready(function()
{
// I've had no success placing showIgnoreForm(i) in here
}
I have also tried using document.getElementById as well to no avail. I know the ignore button itself still works after the Form action is taken, because the "confirm" Javascript dialog fires after a submission. Basically, I imagine I need to know how to get the $("#showIgnoreDialog"+ i)... line to work after my Form's action has been completed.
Using MVC4/5's auto generated code there is a shared _LoginPartial.cshtml that allows me to call a small (Login) box in any cshtml view like so #Html.Partial("_LoginPartial") This is a pretty cool and responsive element that will change depending on if a user is logged or not and show their UserName.
My goal is to have a drop down panel, I was wondering if I could put jquery in the mix and on click it show the page.
Here's the code I tried.
$(function () {
$('#loginBtn').on('click', function () {
var path = '/Account/Login'
$("#loginContent").load(path);
});
});
</script>
<button id="loginBtn">Login</button>
<ul class="sub-menu">
<li id="loginContent"></li>
This passes in the view but it doesn't show inside a floating panel. Here it's just pushing the page down.
Is there a c#/razor equivalent I can place in my _LoginPartial.cshtml or _Layout page to keep the Html.Partial call while rendering the partial view in a small panel.
We have a web forms project and in it I want to use jQuery's colorbox plugin to pop up a small window with a submit button. Because we are using web forms, the form tag cannot be part of the colorbox. The problem is that when colorbox loads the element in the DOM into the colorbox, it actually moves it to the top of the body into an absolutely positioned element.
Normally this is fine, but it actually takes the contents out of the form tag. This makes it so that submit buttons within the colorbox no longer cause post backs.
Here is a fiddle representing the problem:
http://jsfiddle.net/Chevex/vbLFD/
If you click the submit changes button you will notice that the form posts to google and the window loads with google. However, if you click the link to load the DIV into colorbox and then click the submit button from within colorbox, nothing happens. The button was taken out of the form tag.
Is there an easy fix for this behavior?
Edit
I thought of submitting the form with jQuery as in this fiddle: http://jsfiddle.net/Chevex/vbLFD/6/
The problem with that is if the DIV contained other input elements, like text boxes, then they too would be removed from the form tag. So even if the form gets submitted with jQuery, the input values that were supposed to be posted with the form will not be included.
It would seem the only way to fix this would be to have colorbox stay within the form somehow.
We're using Colorbox v1.4.33, and applying the accepted answer did not solve the problem.
Colorbox creates two separate DIV elements, one with ID=colorbox and one with ID=cboxOverlay. You need to move both of these DIV elements in order for the Colorbox dialog to render correctly and the ASP.NET postback to trigger.
$(function () {
$("#btnBoligforholdAdd").colorbox({
inline: true,
href: "#modalDialog_Boligforhold",
width: "450px",
closeButton: false,
opacity: 0.5,
onOpen: function () {
$('#aspnetForm').append($('#cboxOverlay'));
$('#aspnetForm').append($('#colorbox'));
}
});
});
You can use a simple jQuery block to move it to the top of the main form.
$(document).ready(function() {
var colorbox = $("#colorbox");
colorbox.remove(); // Removes from dom
$('form#idOfForm').prepend(colorbox);
});
Now anything you load in there should be within the global form.
An alternative selector you can use is body > form for the global form, but it's not as fast as an id.
The below opens a colorbox of a 2 button form which allowsthe data to be saved back to the page behind function on the Save button.
1) The actual inline form
<div style="display: none;">
<div id="formcontent" class="form-horizontal padder">
<!--no <form> tag here as its inline content-->
</div>
</div>
2) Javascript
$(document).ready(function () {
$("#colorbox, #cboxOverlay").appendTo('form:first'); //required for colorbox forms!
$("#<%=cmdAdd.ClientID %>").colorbox({ inline: true, href: "#ColorBoxNewDiagram" });
$("#cmdNewDiagram").click(function () {
$.fn.colorbox.close();
});
$("#<%=cmdCancelAdd.ClientID%>").click(function () {
$.fn.colorbox.close();
return false;
});
});
Color box appends the hidden container to the < body> tag which is outside the asp < form > tag...
Solution is:
Append to < form > tag instead of the < body > tag
In the jquery.colorbox.js file, search for the following line:
$(document.body).append($overlay, $box.append($wrap, $loadingBay));
replace it with the following line:
$('form').prepend($overlay, $box.append($wrap, $loadingBay));
I have a data repeater in ASP.NET page. It loads lots of stuff and its taking 4 - 5 seconds to display images. I can' t page or get a part of items i need to display all of the data so i need a loading message or gif but how can i do that? Can anyone help me?
Thanks
If your scenario is not ajax one (classic form postback or browser is redirected by link-click)
I'd insert animated gif into html layout just before redirection / post back (hidden div is shown or something like that). AFAIK this approach will have problems with old-day-browsers (animation will be frozen)
Another approach is called page-processor?. Browser is redirected to intermediate page that shows animation while page requested is loaded.
You can also send javascript code from server (Response.Write / Response.Flush) that will animate your current page.
I also advise to block/hide UI control such as "send form" to deny impatient user click twice if server is responding too long.
Use an iframe. Essentially you can open a slow running page in an iframe and use the events raised by the iframe to display a loading image.
<script type="text/javascript">
var t;
//on iframe state change display or hide the loader tag
function readyStateChanged(state)
{
if (state == 'complete' || state == 4 || state == '4' || state == 'Complete')
{
//hide the loader
document.getElementById('loader').style.display = 'none';
clearTimeout(t);
} else
{
//diaplay the loader
document.getElementById('loader').style.display = '';
//hide the loader if the iframe never loads
t = setTimeout("hideLoader()", 5000);
}
}
//hide the loading tag
function hideLoader()
{
document.getElementById('loader').style.display = 'none';
clearTimeout(t);
}
</script>
<div id="loader" style="display: none;"><img />loading...</div>
<iframe id="frameX" src="your_page.aspx" width="100%" height="400px" onload="hideLoader();" onreadystatechange="readyStateChanged(this.readyState);" ></iframe>