WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for jQuery

By Anuraj Parameswaran, 28 Nov 2012

4.00 (1 vote)

Today while working on an ASP.NET web application in VS Express 2012 for Web, I got a strange error like this.

Error : WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for ‘jquery’. Please add a ScriptResourceMapping named jquery (case-sensitive).

It was strange because I just added some basic components like TextBox, RequiredfieldValidator, and validation summary controls only. Later I found a Microsoft Connect issue. And according to the Connect website, we can fix this by removing the following element from the web.config file.

 Collapse | Copy Code

<add key="ValidationSettings:UnobtrusiveValidationMode" 
value="WebForms" />

But I couldn’t find this element in my web.config file. Another option to fix this issue is registering jQuery inGlobal.asax in the Application_Start event like this:

 Collapse | Copy Code

ScriptManager.ScriptResourceMapping.AddDefinition("jquery", 
    new ScriptResourceDefinition
{
Path = "~/scripts/jquery-1.7.2.min.js",
DebugPath = "~/scripts/jquery-1.7.2.min.js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.js"
});

And it worked without any issue. Adding the following element in web.config also works.

 Collapse | Copy Code

<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />

You can find more about Unobtrusive JavaScript on Wikipedia.
Happy programming

How to pass a value from User Control to the Page

In the process of developing an application, there are situations when you need to pass a particular value from user control to its calling page. This article describes solution to that type of problem in an easy to follow steps.

Introduction

In this article, I am going to show you how to get a particular value entered by the user from user control to the calling page. In order to do that I am going to create a user control (.ascx) and a page (.aspx) page like shown in the picture below.

User Control (WriteThisMessageToThePage.ascx)

In this user control, I am going to place a TextBox and a button like picture below. The functionality should work like this. If I write something in the TextBox and click the button, the value of the textbox should be written into the Label control of the .aspx page.


To do that I need to create a delegate so I have created a delegate named SendMessageToThePageHanlder(string messageToThePage) just above the class declaration for the user control. You will have to make sure that it is outside the scope of class declaration otherwise it will not work. Then I have created a variable called sendMessageToThePage for this delegate. In the click event of the button, I am first checking if the delegate is not null then passing the textbox value to it. You may be wondering why we are passing textbox value to this delegate. This is because this value we have to get into the calling page so from the calling page. I will simply call this delegate on the calling page (will talk later in this article).
So my code for user control will look like following
Code for WriteThisMessageToThePage.ascx

<table>

<tr>

<td>My Name: <asp:TextBox ID="txtName" runat="Server"></asp:TextBox></td>

</tr>

<tr>

<td><asp:Button ID="Button1" runat="server" OnClick="Button1_Clicked" Text="Send TextBox Value to the Page" /></td>

</tr>

</table>

Code for WriteThisMessageToThePage.ascx.cs (code behind)

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;



public delegate void SendMessageToThePageHandler(string messageToThePage);



public partial class UserControl_WriteThisMessageToThePage : System.Web.UI.UserControl

{

public event SendMessageToThePageHandler sendMessageToThePage;



protected void Page_Load(object sender, EventArgs e)

{



}

/// <summary>

/// Fires when button is clicked

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

protected void Button1_Clicked(object sender, EventArgs e)

{

     if (sendMessageToThePage != null)

     {

         sendMessageToThePage(txtName.Text);

     }

}
}

Calling page (default.aspx)

In the default.aspx page (the page that is calling/using the user control), I am going to place an asp:Label control to write the value of the TextBox. In the Page_Load method of the page, I will attach the delegate of the user control and pass the variable called message so that I will have the textbox value in that variable (Remember, we had  passed the textbox value into the delegate in the user control). Then simply specify the Text property of the Label control to the variable and we are done!!!
My code for .aspx page looks like following
Code for default.aspx

<form id="form1" runat="server">

<h3>Demo of passing User Control value to the page</h3><hr />

<div>

<uc1:WriteThisMessageToThePage id="WriteThisMessageToThePage1" runat="server">

</uc1:WriteThisMessageToThePage></div>

<br /><br />

Value of user control TextBox is: <asp:Label ID="lblUserControlTextBoxValue" runat="Server" Font-Bold="True"></asp:Label><hr />

</form>

Code for default.aspx.cs (Code behind)

protected void Page_Load(object sender, EventArgs e)

{


WriteThisMessageToThePage1.sendMessageToThePage += delegate(string message)

{

lblUserControlTextBoxValue.Text = message;

};
}

Test it!!!. If you have exactly followed my steps simply run the page and enter something into the textbox (that is placed in the user control) and hit the button, you should see the value of the textbox into the Label control (placed on the .aspx page).

Conclusion

Here we saw how beautifully a delegate can be used to pass value from a user control to the page.
Thanks and Happy Coding !!!

ASP Get query string from previous page url

HttpUtility.ParseQueryString(Request.UrlReferrer.Query)["search"]

JavaScript to get int and String parameter value from URL

/* THIS FUNCTION IS TO FETCH INT PARAMETER VALUES */
function getParametera(param) {
                var val = document.URL;
                var url = val.substr(val.indexOf(param))  
                var n=parseInt(url.replace(param+"=",""));
                alert(n); 
}
getParametera("page");
getParametera("pagee");

/*THIS FUNCTION IS TO FETCH STRING PARAMETER*/
function getParameter(param) {
                var val = document.URL;
                var url = val.substr(val.indexOf(param))  
                var n=url.replace(param+"=","");
                alert(n); 
}
getParameter("str");

Adding Paging Support to the Repeater or DataList with the PagedDataSource Class

Introduction

When building ASP.NET Web applications, one of the most common tasks is displaying data. ASP.NET offers a bounty of data Web controls that make displaying data a breeze, but the most powerful data Web control - the DataGrid - imposes some limitations on the flexibility of laying out the data on the Web page. Recently I found myself needing a more flexible layout than the DataGrid's rigid column/row orientation, so I decided to go with the Repeater control so I could easily customize the HTML markup emitted.The Repeater control is great for situations like this, where you need a finer degree of control over the emitted HTML in order to layout the content in a unique or precise manner. One drawback to the Repeater is that it does not have built-in paging capability, a feature the DataGrid offers. Since I would need to display potentially hundreds of records in the catalog, it was essential that I provided paging support for the Repeater.
Fortunately there is a class in the .NET Framework that was designed to provide paged access to a data source. This class, the PagedDataSource class, can be used by either the Repeater or DataGrid to mimic the paging capabilities of the DataGrid. Using the PagedDataSourceclass you'll have to write a bit more code than you would when using the DataGrid, but the amount and complexity of the code you do have to write is fairly low. In this article we'll examine this class, and see a specific example of how to implement paging with a Repeater control.

Paging with the PagedDataSource Class

The PagedDataSource class, found in the System.Web.UI.WebControls namespace, encapsulates the properties needed to enable paging for a control. To implement paging in a control with the PagedDataSource class, you'll need to perform the following steps:

1. Get the data that you want to page through. This can be an array, a DataSet, a DataReader, or any other object that can be assigned to a data Web control's DataSource property.
2. Create the PagedDataSource instance, and assign the data to page through to the PagedDataSource's DataSource property.
3. Set the PagedDataSource class's paging properties, such as setting AllowPaging to True, and setting PageSize (to indicate how many records per page to show).
4. Assign the PagedDataSource instance to the data Web control's DataSource property and call the data Web control's DataBind() method.

Example: Creating a Pageable Repeater

To examine how to use the PagedDataSource class to provide pagination support in a Repeater, let's create a pageable Repeater. First we need to build the HTML content that includes the Repeater control; note that the HTML contains not only a Repeater, but also the paging navigation buttons and a Label indicating the page number. (Notice that the Repeater's ItemTemplate is very simple in this example, and the same output could be possible with a DataGrid; but the concept holds - you could alter the Repeater's markup to allow for a much richer output that would not be possible with the DataGrid.)

<table width="100%" border="0"> <tr> <td> Repeater control with Paging functionality</td> </tr> <tr> <td> <asp:label id="lblCurrentPage" runat="server"></asp:label></td> </tr> <tr> <td> <asp:button id="cmdPrev" runat="server" text=" << "></asp:button> <asp:button id="cmdNext" runat="server" text=" >> "></asp:button></td> </tr> </table> <table border="1"> <asp:repeater id="repeaterItems" runat="server"> <itemtemplate> <tr> <td> <b><%# DataBinder.Eval(Container.DataItem, "ItemName") %></b></td> <td> <b><%# DataBinder.Eval(Container.DataItem, "ItemDescription") %></b></td> <td> <b><%# DataBinder.Eval(Container.DataItem, "ItemPrice") %></b></td> <td> <b><%# DataBinder.Eval(Container.DataItem, "ItemInStock") %></b></td> </tr> </itemtemplate> </asp:repeater> </table>

The HTML for a pageable Repeater can be as simple or as involved as you want. The code, though, is pretty straightforward. The first step is to write the code that will do all of the work of displaying the correct page of data in the Repeater. This is accomplished by first reading in the data to be paged through. For this example, I just created an XML file (Items.xml) containing some sample data; this XML file is available in the code download at the end of this article.

// Read sample item info from XML document into a DataSet DataSet Items = new DataSet(); Items.ReadXml(MapPath("Items.xml"));

Now that we have the data to page through, we need to create a PagedDataSource instance and specify its DataSource property and other germane properties.

// Populate the repeater control with the Items DataSet PagedDataSource objPds = new PagedDataSource(); objPds.DataSource = Items.Tables[0].DefaultView; // Indicate that the data should be paged objPds.AllowPaging = true; // Set the number of items you wish to display per page objPds.PageSize = 3;

The PagedDataSource also has a CurrentPageIndex, which indicates what page of data to display. The following code shows assigning this property. Note that CurrentPageIndex is assigned the value of a page-level property called CurrentPage. We'll discuss this page-level property shortly.

// Set the PagedDataSource's current page objPds.CurrentPageIndex = CurrentPage - 1;

Finally, we need to enable/disable the navigation buttons depending if we're on the first/last page, as well as update the Label Web control to indicate what page is currently being viewed. We can easily determine if we're on the first/last page using the PagedDataSource'sIsFirstPage and IsLastPage properties.

lblCurrentPage.Text = "Page: " + (CurrentPage + 1).ToString() + " of "     + objPds.PageCount.ToString(); // Disable Prev or Next buttons if necessary cmdPrev.Enabled = !objPds.IsFirstPage; cmdNext.Enabled = !objPds.IsLastPage;

Finally, we display the correct page of data by binding the PagedDataSource object to the Repeater.

repeaterItems.DataSource = objPds; repeaterItems.DataBind();

Examining the CurrentPage Page-Level Property

Back in our earlier code example, we assigned the PagedDataSource object's CurrentPageIndex property to a page-level property called CurrentPage. In order to remember the page of data to display across postbacks, it is important that the page index be maintained in the view state. This page-level property essentially wraps the complexity of reading from / writing to the view state, providing a convenient way to get and set the current page index. Here is the CurrentPage property:

public int CurrentPage {    get    {       // look for current page in ViewState       object o = this.ViewState["_CurrentPage"];       if (o == null)          return 0; // default page index of 0       else          return (int) o;    }    set    {       this.ViewState["_CurrentPage"] = value;    } }

Moving Between Pages of Data

To move from one page of data to another, the user visiting the Web page can click the next or previous buttons. These buttons, when clicked, cause a postback, and run server-side code that updates the CurrentPage property and rebinds the data to the Repeater.

private void cmdPrev_Click(object sender, System.EventArgs e) {    // Set viewstate variable to the previous page    CurrentPage -= 1;    // Reload control    ItemsGet(); } private void cmdNext_Click(object sender, System.EventArgs e) {    // Set viewstate variable to the next page    CurrentPage += 1;    // Reload control    ItemsGet(); }

ItemsGet() is a page-level method (whose code we examined earlier) that contains the code to create the PagedDataSource object and bind it to the Repeater.

Conclusion

As you can see, adding the paging functionality to the Repeater control is fairly simple thanks to the PagedDataSource. You should now be able to create a paging Repeater control that will fit your needs; the lessons learned here can also be applied to adding pagination support to a DataList. Having the ability to page with a Repeater or DataList control will greatly enhance the usefulness of these data Web controls and, hopefully, you will find yourself using these versatile controls more often.Happy Programming!

By Harrison Enholm

---

Download the complete source code (in a ZIP file)

View a live demo!