Question

I have a project that I am working on, it’s being developed in ASP.NET MVC2

Currently I have used Ajax to load some data. It works great on firefox and chrome however I have an issue with IE.

My controller:

    public ActionResult UpdateSearchResults(FormCollection formValues)
    {
        var equipmentsResults = EquipmentQueries.GetEquipments(Request.Form["Voltage"],
                                                               Request.Form["EquipmentType"],
                                                               Request.Form["Word"]);
        return PartialView("SearchResults", equipmentsResults);
    }

My view:

<% using (Ajax.BeginForm("UpdateSearchResults", 
       new AjaxOptions {UpdateTargetId = "loadingData", 
                        LoadingElementId = "loadingImage", 
                        HttpMethod = "POST"}))
   { %>
    <fieldset>
        <legend>Filters</legend>
        <label>Voltage: </label>
        <%=Html.DropDownList("Voltage", (SelectList)ViewData["Voltage"], "Select Voltage", new { onchange = "this.form.submit();" })%>
        <br />

        <label>Equipment Type: </label>
        <%=Html.DropDownList("EquipmentType", (SelectList)ViewData["Equipment"], "Select Equipment Type")%>
        <br />

        <label>Station Keyword Search: </label>
        <%=Html.TextBox("Word")%>
        <br />

        <input id="btnSubmit" type="submit" value="Submit" name="submit" />
        <br />
    </fieldset>

    <img id="loadingImage" src="../../Images/ajax-loader.gif" alt="loading"/>
    <div id="loadingData"></div>
<% }%> 

I have included the following scripts

<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script> 
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>  
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>  

What I found during debugging is that in chrome and firefox all the DropDownList populate the Request.Form ( Request.Form(“Voltage”) actually displays what the user has picked on the DropDownList), however in IE this Request.Form doesn’t get populated at all, it’s just an empty string…

Thanks for the help everyone

Answer 1

While I have no clue why your code doesn’t work on IE I have some suggestions about improving it. So as usual we start by defining a view model which will represent the data we are dealing with on the view:

Model:

public class ProductViewModel
{
    public string SelectedVoltage { get; set; }
    public IEnumerable<SelectListItem> Voltages 
    {
        get
        {
            return new SelectList(new[] {
                new SelectListItem { Value = "110", Text = "110V" },
                new SelectListItem { Value = "220", Text = "220V" },
            }, "Value", "Text");
        }
    }

    public string SelectedEquipementType { get; set; }
    public IEnumerable<SelectListItem> EquipementTypes
    {
        get
        {
            return new SelectList(new[] 
            {
                new SelectListItem { Value = "t1", Text = "Equipement type 1" },
                new SelectListItem { Value = "t2", Text = "Equipement type 2" },
            }, "Value", "Text");
        }
    }

    public string Word { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new ProductViewModel());
    }

    [HttpPost]
    public ActionResult Search(ProductViewModel product)
    {
        var equipmentsResults = EquipmentQueries.GetEquipments(product);
        return View(equipmentsResults);
    }
}

View:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AppName.Models.ProductViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js"></script>
<!-- TODO: Put this in an external javascript file -->
<!-- I've left it here just to illustrate -->
<script type="text/javascript">
    $(function () {
        var options = {
            success: function (result) {
                $('#loadingData').html(result);
            }
        };
        $('form').ajaxForm(options);
        $('#SelectedVoltage').change(function () {
            $('form').ajaxSubmit(options);
        });
    });
</script>

<% using (Html.BeginForm("search", "home")) { %>
    <fieldset>
        <legend>Filters</legend>
        <label for="SelectedVoltage">Voltage: </label>
        <%= Html.DropDownListFor(x => x.SelectedVoltage, Model.Voltages, "Select Voltage")%>
        <br />

        <label for="SelectedEquipementType">Equipment Type: </label>
        <%= Html.DropDownListFor(x => x.SelectedEquipementType, Model.EquipementTypes, "Select Equipment Type")%>
        <br />

        <label for="Word">Station Keyword Search: </label>
        <%= Html.TextBoxFor(x => x.Word)%>
        <br />

        <input id="btnSubmit" type="submit" value="Submit" name="submit" />
    </fieldset>
<% } %>
<br />
<div id="loadingData"></div>

</asp:Content>

Now you can safely dump all the MSAjax* scripts as well as all Ajax.* helpers. Do it the proper way: unobtrusively, the jquery way.