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

对于选择的元素，生成的 html 是什么样子的？检查选择是否包含“名称”属性。

例如