DropDownList in MVC2 using jQuery

Hi all, I apologize for the long hiatus but today, I discovered something new.

My new role allows me to play with a few more cool toys, eg: WCF, MongoDB, Fluent NHibernate and MVC.

Today I am going to be touching a little bit on MVC and specifically having to deal with retaining the value after selecting a drop down list item.

Previously, in Web Forms, we have the SelectedIndexChanged function that helped us.

However, there is none of that in MVC.

Thus, to solve this, I leverage the power of jQuery.

Before I begin, this was done using MVC2.

What I did was to use the standard Html.Select control on the View and have a hidden field (Html.Hidden in MVC2). Both the hidden and select control must use the same parameter. See the example below,

Html.Hidden( x => x.Field1).Id("hiddenFieldId")
Html.Select( x => x.Field1).Options([INSERT LIST TO BIND HERE]).Selected(Model.Field1).Id("dropDownListId")

After this, I leveraged jQuery in the document.ready() function to implement the change function for the drop down list.

Place the below within the document.ready() function.

$("#dropDownListId").change(function(e) {
var value = $(this).val();
$("#hiddenFieldId").attr("value", value);
});

We can now leverage the Html.Hidden field; Field1 in our code behind.

Server-side button click - client side implementation

Recently, I had to override the server-side button OnClick function for a button but unfortunately and I hope you do NOT come across this scenario, but the source code file, the C# file went MISSING.

Yes, I could have use DotNet Reflector to recover the code but I was under a very quick deadline, so here is my approach.

Use jQuery!

What you have to do is to assign a unique CssClass name for the button, which can still be done with just the .aspx file.

And include jQuery as per normal the crucial part is when you declare the jQuery document.ready function, include the following within the document.ready function.

That way, you override the ASP.Net page life cycle, thus when you click the button, this code snippet runs first.

$("input.[insert_unique_css_class_here]").click(function() {
//Validate some other controls. You will have to implement the validateChkBox and validateDdl functions.
var postBackRequired = false;
var postBackIfCbChecked = validateChkBox();
var postBackIfDdl = validateDdl();

if (postBackIfCbChecked && postBackIfDdl) {
postBackRequired = true;
}

return postBackRequired;
});

jQuery - simulating a C# dropdownlist OnSelectedItemChanged event

To do a simulation of the C# code-behind event of the dropdownlist; OnSelectedItemChange. Simply do the following:-

1. Create a drop down list and ensure that the CssClass attribute contains some value. For the purpose of this example, I'll name it "ddlChange"

eg:

<asp:DropDownList ID="[Your DDL name here]" runat="server" CssClass="ddlChange"></asp:DropDownList>

2. Create a javascrpit tag and add the following code in it.
$(".ddlOrderType").change(function() {
//Insert any logic you require here.
});

jQuery web service interaction

To interact with the web service on the client, do the following.

1. Insert the following into a script tag;
$(document).ready(function() {
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "wsTestAjax.asmx/HelloWorld",
        data: "{}",
        datatype: "json",
        success: function(msg) {
            var message = eval('(' + msg + ')');
            $(".lblTestAjax").text(message.d);
         }
     });
});

2. Have a literal tag as such within the form;
asp:Label ID="lblTestAjax" runat="server" CssClass="lblTestAjax"

3. Create a web service. In this particular case, I've called it wsTestAjax.asmx and within it, I had the basic function of "Hello World". Code as below:-
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
//This was the 1 line that I was missing, please don't forget to include the next
//line, if not you'll spend the whole day wondering what happened.
[System.Web.Script.Services.ScriptService]
public class wsTestAjax : System.Web.Services.WebService
{
    [WebMethod(EnableSession=true)]
    public string HelloWorld()
    {
        return "Hello World";
    }
}