Ajax.BeginForm，正在加载部分视图帮助

Question

我有一个正在处理的项目，正在ASP.NET MVC2中开发

目前，我已经使用Ajax加载了一些数据。 它在firefox和chrome上效果很好，但是我对IE有问题。

我的控制器：

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

我的观点：

<% 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>
<% }%> 

我已包含以下脚本

<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>  

我在调试过程中发现，在chrome和firefox中，所有DropDownList都填充了Request.Form（Request.Form（“ Voltage”）实际上显示了用户在DropDownList上选择的内容），但是在IE中，此Request.Form却没有完全填充，这只是一个空字符串...

谢谢大家的帮助

Answer 1

虽然我不知道为什么您的代码无法在IE上运行，但我还是提出了一些改进建议。 因此，像往常一样，我们先定义一个视图模型，该模型将代表我们在视图上处理的数据：

模型：

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; }
}

控制器：

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);
    }
}

视图：

<%@ 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>

现在，您可以安全地转储所有MSAjax*脚本以及所有Ajax.*帮助程序。 以正确的方式进行操作：毫不客气地使用jquery方法。

Answer 2

select元素生成的html看起来如何？ 检查选择内容是否包含“名称”属性。

如