.

MVC maintain scrolling position – [best alternative suggested]

There is no standard way of handling this, this was a Microsoft hack to support their post back model. They needed this because every control did a post back and the user would constantly be pushed back to the top of the page.

The recommendation for use with MVC is to do most of your post back to servers using AJAX. So that the page doesn’t have to rerender the the focus is not moved. jQuery makes AJAX really easy, and there is even default forms like

<% Ajax.BeginForm(...) %>

Which will take care of the AJAX side of things for you.


The way MaintainScrollPositionOnPostback works in Asp.Net
is that it has a pair of hidden fields: __SCROLLPOSITIONX and __SCROLLPOSITIONY

On a postback, it sets these,

function WebForm_GetScrollY() {
if (__nonMSDOMBrowser) {
    return window.pageYOffset;
}
else {
    if (document.documentElement && document.documentElement.scrollTop) {
        return document.documentElement.scrollTop;
    }
    else if (document.body) {
        return document.body.scrollTop;
    }
}
return 0;
}
function WebForm_SaveScrollPositionSubmit() {
    if (__nonMSDOMBrowser) {
        theForm.elements['__SCROLLPOSITIONY'].value = window.pageYOffset;
        theForm.elements['__SCROLLPOSITIONX'].value = window.pageXOffset;
    }
    else {
        theForm.__SCROLLPOSITIONX.value = WebForm_GetScrollX();
        theForm.__SCROLLPOSITIONY.value = WebForm_GetScrollY();
    }
    if ((typeof(this.oldSubmit) != "undefined") && (this.oldSubmit != null)) {
        return this.oldSubmit();
    }
    return true;
    }

and then it calls RestoreScrollPosition:

function WebForm_RestoreScrollPosition() {
    if (__nonMSDOMBrowser) {
        window.scrollTo(theForm.elements['__SCROLLPOSITIONX'].value, theForm.elements['__SCROLLPOSITIONY'].value);
    }
    else {
        window.scrollTo(theForm.__SCROLLPOSITIONX.value, theForm.__SCROLLPOSITIONY.value);
    }
    if ((typeof(theForm.oldOnLoad) != "undefined") && (theForm.oldOnLoad != null)) {
        return theForm.oldOnLoad();
    }
    return true;
}

But (as most people say), MVC should be avoiding postbacks .


For anyone who want to use something easy as replacement, try this:

@{
    var scrollPositionX = string.Empty;        
    if(IsPost) {
        scrollPositionX = Request.Form["ScrollPositionX"];
    }
}

<form action="" method="post">
    <input type="hidden" id="ScrollPositionX" name="ScrollPositionX" value="@scrollPositionX" />
    <input type="submit" id="Submit" name="Submit" value="Go" />
</form>

$("#Submit").click(function () {
    $("#ScrollPositionX").val($(document).scrollTop());
});

$("#ScrollPositionX").each(function () {
    var val = parseInt($(this).val(), 10);
    if (!isNaN(val))
        $(document).scrollTop(val);
});

a Search Button with watermark

<input onfocus=”if (this.value == ‘Search’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Search’;}” value=”Search” name=”s” id=”s” type=”text”>
<input value=”" name=”submit” type=”submit”>

using JQuery with a Asp.Net WebService

Here follows the web service code and html code (+Javascript / JQuery) to make the necessary calls.
Please note the [System.Web.Script.Services.ScriptService] code that needs to be added to the default webservice class.

save the following as: GetTimeWebService.cs (in the “app_code” folder) :

 

 


 

using
System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class GetTimeWebService : System.Web.Services.WebService {

    public GetTimeWebService () {    }


    [WebMethod]

   public string checkit()

   {

        return "Hello World: " + DateTime.Now.ToLongTimeString();

    }

}

 

 

and this is the HTML page .. name whatever you want to:

 

 

<div>the time is: <span id="time_container"></span></div>

<script> //if you create the webservice in the same file then use ... url: "

<%=HttpContext.Current.Request.Url.LocalPath%>/GetTime", function UpdateTime()
{
$.ajax({
type: "POST",
url: "GetTimeWebService.asmx/checkit",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg)
{ $('#time_container').text(msg.d); } ,
error: function()
{ $('#time_container').text('lost connection'); }
}
);}
UpdateTime(); setInterval(UpdateTime,1000);
</script>

 

where is the mouse cursor?

use eg. with mouseover or mouseout:


function doSomething(e) {
	if (!e) var e = window.event;
	var relTarg = e.relatedTarget || e.fromElement;
}

document ready in JQuery

<span id="<%=ClientID %>_MouseXY">failed</span>

        protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.RegisterClientScriptBlock(GetType(),"BitlinkMouseXY",@"
            $(function (){
            $('#" + ClientID + @"_MouseXY').html('worked');
            });", true);
        }


$(document).ready(function (){
// code
});

Becomes (in JQuery)

$(function (){
// code
});

readonly CheckBox or CheckBoxList

Simply add the following to your declaration:
onclick=”return false;” 

This will disable the javascript that ticks / unticks the box.

Examples of both readonly CheckBoxLists and readonly CheckBoxListes in ASP.Net:

<asp:CheckBoxList ID=”CheckBoxList1″ runat=”server” onclick=”return false;”>
<asp:CheckBox ID=”CheckBox1″ runat=”server” onclick=”return false;” Text=”test” />

Or straight forward in simple HTML:

<input type="CheckBox" onclick="return false;" > Cant tick me</input>
<input type="CheckBox" onclick="return false;" checked="checked" > or untick me</input>
Cant tick me or untick me