我正在使用MVC4。 不显眼的JavaScript在我的项目中被启用和引用。 Ajax 脚本正在我的共享母版页中加载。 FireBug没有报告任何错误或404。
我在页面中添加了一个Text
框,用于更新Ajax
表单内Hidden
字段的内容。 当用户按下某个键并触发KeyUp
事件时,我通过调用以下命令强制提交Ajax
表单:
$("form#ajaxForm").trigger("submit");
其中 ajaxForm 是 Ajax 窗体的名称。 这工作正常。 表单在后台提交,我的控制器事件触发。 模型根据用户的输入使用新数据进行更新。
然而,奇怪的是,当结果返回到我的形式时。 我的表单div
标签的全部内容被结果替换 - 这是整个页面。
<div id="basic-modal-content"">
<input id="breed" type="text"/>
<div>
<form id="ajaxForm" method="post" data-ajax-update="#results" data-ajax-mode="replace" data-ajax="true" action="/Poultry/ListBreeds?Length=7">
<div id="results">
->THIS AREA IS GETTING REPLACED WITH THE ENTIRE FORM <-
<div id="basic-modal-content">
</div>
</div>
</form>
- 请注意基本模态内容
- 现在如何包含自身,另一个基本模态内容。 结果div 应该只包含更新结果,而不是整个视图 - 显然。
我的代码如下:
View (BreedSelectorPartial.cshtml)
@model IQueryable<Inert.BreedViewModel>
<script type="text/javascript">
$(document).ready(function () {
$("#breed").keyup(function (e) {
$("input[name=breedSearch]").val($("#breed").val());
$("form#ajaxForm").trigger("submit");
});
});
</script>
<div id="basic-modal-content">
<input id="breed" type="text" style="width:100%; height:22px;" />
<div>
<div style="margin-top: 4px;">
<label for="breed">Begin by typing a breed, e.g. <span style="font-style: italic">Wyandotte</span></label>
</div>
</div>
@using (Ajax.BeginForm("ListBreeds", "Poultry", new AjaxOptions {UpdateTargetId = "results" }, new { id = "ajaxForm" }))
{
<input id="breedSearch" name="breedSearch" type="hidden" />
}
<div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
@{
var grid = new WebGrid(Model, ajaxUpdateContainerId: "results");
int c = Model.Count();
}
@grid.GetHtml(tableStyle: "webgrid",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
displayHeader: true)
</div>
</div>
<script type="text/javascript" src="/scripts/jquery.simplemodal.js"></script>
<script type="text/javascript" src="/scripts/basic.js"></script>
控制器(家禽控制器.cs)
[HttpPost]
public ActionResult ListBreeds(string breedSearch)
{
InertDatabaseEntitiesConnection db = new InertDatabaseEntitiesConnection();
var breeds = db.Breeds.Where(q => q.Name.Contains(breedSearch));
var names = breeds.Select(q => new BreedViewModel { Name = q.Name });
return PartialView("BreedSelectorPartial", names);
}
我不确定我在这方面哪里出错了。 我花了几个小时试图弄清楚这一点。 有什么解决办法吗?
第一个问题是您使用了错误的Ajax.BeginForm
帮助程序重载(但这不会导致不希望的行为,这只是一个旁注):
@using (Ajax.BeginForm(
"ListBreeds", // actionName
"Poultry", // routeValues
new AjaxOptions { UpdateTargetId = "results" }, // ajaxOptions
new { id = "ajaxForm" }) // htmlAttributes
)
而您需要:
@using (Ajax.BeginForm(
"ListBreeds", // actionName
"Poultry", // controllerName
null, // routeValues
new AjaxOptions { UpdateTargetId = "results" }, // ajaxOptions
new { id = "ajaxForm" }) // htmlAttributes
)
现在真正的问题是你需要把#results
div放在部分和主视图之外:
<div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
@Html.Partial("BreedSelectorPartial")
</div>
现在当然,如果您只需要更新WebGrid
部分,那么仅将网格保留在部分内并将表单移到主视图中会更有意义。
所以你的主视图现在变成:
@model IQueryable<BreedViewModel>
<script type="text/javascript">
$(document).ready(function () {
$("#breed").keyup(function (e) {
$("input[name=breedSearch]").val($("#breed").val());
$("form#ajaxForm").trigger("submit");
});
});
</script>
<div id="basic-modal-content">
<input id="breed" type="text" style="width:100%; height:22px;" />
<div>
<div style="margin-top: 4px;">
<label for="breed">Begin by typing a breed, e.g. <span style="font-style: italic">Wyandotte</span></label>
</div>
</div>
@using (Ajax.BeginForm("ListBreeds", "Poultry", null, new AjaxOptions { UpdateTargetId = "results" }, new { id = "ajaxForm" }))
{
<input id="breedSearch" name="breedSearch" type="hidden" />
}
<div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
@Html.Partial("BreedSelectorPartial")
</div>
</div>
唯一需要更新的部分是包含网格的BreedSelectorPartial.cshtml
部分:
@model IQueryable<BreedViewModel>
@{
var grid = new WebGrid(Model, ajaxUpdateContainerId: "results");
}
@grid.GetHtml(
tableStyle: "webgrid",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
displayHeader: true
)
前几天我也有类似的东西。
我不记得确切的问题是什么,但这与返回整个对象有关,而不仅仅是对象的 HTML 元素。
我目前找不到代码,但是如果您使用的是Firebug或类似的东西,请查看是否可以监视返回的数据,如果我正确补救,我需要做的就是在行尾添加.html。
抱歉,它有点模糊,但希望它能对您有所帮助。
你确定你没有做常规的表单提交吗?我认为这句话$("form#ajaxForm").trigger("submit");
正在做常规表单提交。您可能应该在此处发布ajax表单,而不是调用正常的表单提交。因此,您会看到整个页面重新加载。