[英]Ajax.BeginForm, Loading partial view help
I have a project that I am working on, it's being developed in ASP.NET MVC2 我有一个正在处理的项目,正在ASP.NET MVC2中开发
Currently I have used Ajax to load some data. 目前,我已经使用Ajax加载了一些数据。 It works great on firefox and chrome however I have an issue with IE.
它在firefox和chrome上效果很好,但是我对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... 我在调试过程中发现,在chrome和firefox中,所有DropDownList都填充了Request.Form(Request.Form(“ Voltage”)实际上显示了用户在DropDownList上选择的内容),但是在IE中,此Request.Form却没有完全填充,这只是一个空字符串...
Thanks for the help everyone 谢谢大家的帮助
While I have no clue why your code doesn't work on IE I have some suggestions about improving it. 虽然我不知道为什么您的代码无法在IE上运行,但我还是提出了一些改进建议。 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. 现在,您可以安全地转储所有
MSAjax*
脚本以及所有Ajax.*
帮助程序。 Do it the proper way: unobtrusively, the jquery way. 以正确的方式进行操作:毫不客气地使用jquery方法。
How does the generated html look like for the select elements? select元素生成的html看起来如何? Check if the select contains the 'name' attribute.
检查选择内容是否包含“名称”属性。
such as 如
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.