Develop Reference

stop refreshing _navigation partial view in mvc layout or load the _navigation only 1 time

I have a standard MVC layout with nav(slide off navigation).
Header & footer are partial views & referred to in views. Every time I click on nav link the total page refreshes and missing the active navbar position(placement). How can I best solve this issue? Any suggestions are welcome.
My _layout.cshtml is..
<!--Wrapper-->
<div id="wrapper">
<!--Navigation-->
#Html.Partial("_Navigation")
<!--Page wraper-->
<div id="page-wrapper" class="gray-bg">
#Html.Partial("_TopNavbar")
<!-- Main view-->
#RenderBody()
<!-- Footer -->
#Html.Partial("_Footer")
</div>
<!-- End page wrapper-->
</div>
and i tried the load method like follows..
$(document).ready(function () {
$("a.stop_refresh").click(function (e)
{
e.preventDefault(); var url = $(this).attr("href"); $('#page-wrapper').load(url);
});

You could have the nav link as a ajax call. As a response server would send you generated HTML - with which you would then (with jquery / javascript) replace the old HTML part of page which you are trying to reload.
For better effect add some kind of loader to the part of page that is being refreshed/ reloaded (it should start as first event on click and end when a response from ajax call is received).
But it is just too much work for most pages and since some elements can change, the amount of code/ time that you would spend on it just isnt a viable option for the most part.

How would I let 1 .aspx page use another .aspx page's code?

I have 2 aspx files in my project. The first.aspx page has some content on it and when I click on a button, it will launch a frame (second.aspx that only has code to show a calendar) on the same page.
Now once that calendar(second.aspx) loads on first.aspx, I want to click a link on the calendar that will .show() a hidden DIV on the first.aspx page.
How do I access code cross pages? In other words, how can I write some code in second.aspx that will affect first.aspx.

What you're asking for is not really possible. You're probably approaching it the wrong way. What you should do is turn your calendar page into a user control so that it can be used seamlessly in first.aspx.
Here is how to get started with user controls in asp.net:
After you turn it into a user control there are different approaches to getting access to the properties of the user control from your page. Here is one approach using the FindControl method.
Hope that helps.

The easiest solution would be to show and hide your div with jquery. Simple give your div a class like:
<div class="myCalendarDiv" style="display:none" />
And your Button should look like this:
<asp:Button id="myButton" OnClientClick="return ShowCalendar();" runat="server" />
<script type="text/javascript">
function ShowCalendar() {
$(".myCalendarDiv").show();
return false;
}
</script>
Another way would be instead of creating a seprate webpage for the calendar, as proposed you can use a jquery dialog, or make a usercontrol and embedd it on the same page.

(Posted on behalf of the OP).
So since I was dealing with an Iframe, I found out that you can target the parent window which would be first.aspx.
I used "window.parent.MYFUNCTION();" to call my JavaScript function on first.aspx and show the div.

Open a new window with Same session using jquery/C# Razor

I am trying to open a new window with same session as the current one. I wrote some code below but its no luck yet.
For example lets say i have a form with a label (Name), textbox (where the text goes in)
and a button when pressed takes me to a new window.
If i press the button it should open a new window with the same form elements and text in the textbox if it was put in before.
Also please note the new window must be opened as a new tab in the browser with the same state and same elements as in the previous browsers.
Anyone got an idea on this (using razor view engine or jquery/javascript) ? Thanks in advance.
<label for="Name">Name</label>
<input type="textbox" value="nothing" id="text" />
<input type="button" value="press me" id="submitButton" />
$(document).ready(function()
{
$('#submitButton').click(function()
{
var currentUrl=document.URL;
window.open(currentUrl,"newWindow",300);
event.preventDefault();
});
});

You may be able to accomplish this by using modals instead of popup windows. Jquery UI has built in modal support: http://jqueryui.com/dialog/
The advantage to this approach is that no data needs to be passed into a separate page. Your modal code would look something like this, with jQuery Dialog. This would go on the same page as your initial inputs:
<div id="dialog" title="Basic dialog">
<input type="text" id="popupText" name="popupText" />
</div>
and your click event would modified update the modal input and show the modal:
$(document).ready(function(event)
{
$('#submitButton').click(function()
{
$("#popupText").val($("#text").val());
$("#dialog").dialog();
event.preventDefault();
});
});
This could definitely be cleaned up but I believe it'll do what you need pretty simply. The dialog can contain any html elements, so you can add a separate form if necessary.

Making a button element submit

Using ASP.NET, how do I make this button tag submit my ASP.NET form when clicked:
<button>Submit</button>
I'd like it to do a post back just like a regular asp.net server control button would work. I'd prefer a jquery way to do it if possible.

$('button').on('click', function(){
$(this).closest('form').submit();
});
On button click, it will find the closest form (which will be the parent) and submit it by passing the form to the action where you can access the values through your defined method; either get or post.
I think this is what you're asking.

You can either use:
<input type="Submit" />
Or using jQuery you can use:
$(function() {
$('button').on('click', function() {
$('form').submit();
});
});

you use javascript when you have links, or divs, or other elements that can not do post back.
In your case the <button>Submit</button> in html5 renders a submit button that if you click it, you just submit the form and that all you need.
The extra asp.net controls have some more functionality and communication with the code behind, but for the submit of the form, any submit button ether that one, ether the classic <input type="submit" value="Submit"> can do what you ask as they are.

How can I create a pop-up window using a new page as the pop-up source?

I want to pop up a panel when a "createbutton" is clicked, I am using a panel and adding some textbox and buttons inside the panel. I am able to make the pop up panel by designing it in the same page where the createbutton is present. can I make the pop up in a separate page and make it pop up when I click the createbutton

Gokul,
Yes, you can put the panel in a separate page and make it appear when you click the create button. Here's one alternative (not my favorite but it doesn't depend on anything extra besides standard javascript):
When you click the "create button" open a new browser window resized exactly to match the panel's size. This can be done with javascript easily as follows:
<
input onclick="javascript:window.open('page.aspx','title','status=0,toolbar=0,width=350,height=250');"
type="button" value="Create" />
On the page that you popped up containing the panel (pagecontainingPanel.aspx - according to my example), you can have code to close the window once you perform some action. For example, if you have a button that's supposed to save some data to the database and comeback to the parent page, you could do something like:
{
///Perform server side process. If successfully executed close this window.
protected void btnSubmit_Click(object sender, EventArgs e)
if(EverythingOK)
{
StringBuilder cstext2 = new StringBuilder();
cstext2.Append("<script type=\"text/javascript\"> function CloseMe() {");
cstext2.Append("window.close();} </");
cstext2.Append("script>");
cs.RegisterStartupScript(cstype, csname2, cstext2.ToString(), false);
}
}

Sure. You could create an iframe and then set the source as the panel you're creating.
Let's say you have two html pages panel.html and main.html
Your panel.html can simply be
<html>
<body style="background-color:red">
Hi!
</body>
</html>
and your main.html
<html>
<body style="background-color:yellow">
<iframe src="panel.html" style="height:300px;width:300px;border:0px;display:none;" id="myPanel"></iframe>
Show Panel
</body>
</html>
This should show a yellow page with a hyperlink of "Show Panel". When you click on Show Panel, it will show the iframe of your panel.html.
If you're using ASP.NET MVC, you can do this by creating a View that can be called down with some Ajax/JQuery code. If you're looking for something along that approach, I can post some code for that.