C# 返回视图全部内容的MVC Ajax表单
我正在使用MVC4。我的项目中启用并引用了不引人注目的JavaScript。Ajax脚本正在加载到我的共享母版页中。FireBug报告没有错误或404错误 我在我的页面中添加了一个C# 返回视图全部内容的MVC Ajax表单,c#,jquery,.net,ajax,asp.net-mvc-4,C#,Jquery,.net,Ajax,Asp.net Mvc 4,我正在使用MVC4。我的项目中启用并引用了不引人注目的JavaScript。Ajax脚本正在加载到我的共享母版页中。FireBug报告没有错误或404错误 我在我的页面中添加了一个文本框,它更新了我的Ajax表单中的隐藏字段的内容。当用户按下一个键,并触发KeyUp事件时,我通过调用以下命令强制提交我的Ajax表单: $("form#ajaxForm").trigger("submit"); 其中ajaxForm是Ajax表单的名称。这个很好用。表单在幕后提交,我的控制器事件触发。根据用户的输
文本
框,它更新了我的Ajax
表单中的隐藏
字段的内容。当用户按下一个键,并触发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>
我不确定我在这件事上错在哪里。我花了好几个小时想弄明白。有什么解决办法吗?前几天我也遇到过类似的情况 我不记得确切的问题是什么,但这与返回整个对象有关,而不仅仅是对象的HTML元素 我现在找不到代码,但是如果您使用的是Firebug或类似的东西,请查看是否可以监视返回的数据,如果我记得正确,我需要做的就是在行的末尾添加.html
抱歉,它有点模糊,但希望它能对您有所帮助。您确定您没有执行常规表单提交吗?我认为这一行
$(“form#ajaxForm”).trigger(“submit”)代码>
正在做常规表单提交。您可能应该在这里发布ajax表单,而不是调用正常的表单提交。因此,您会看到整个页面重新加载。第一个问题是,您使用了错误的Ajax.BeginForm
帮助程序重载(但这并没有导致不希望出现的行为,只是一个旁注):
鉴于您需要:
@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>
唯一需要更新的部分是包含网格的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
)
@model IQueryable
@{
var grid=新的WebGrid(模型,ajaxUpdateContainerId:“结果”);
}
@grid.GetHtml(
表样式:“webgrid”,
交替行样式:“webgrid交替行”,
行样式:“webgrid行样式”,
displayHeader:true
)
我正在这样做——它将结果div的全部内容替换为表单。这就是问题所在。这是因为您的视图模型显示模板。。。返回与主视图模型@model IQueryable匹配的对象。。。因此,它直接调用该视图。您能否显示BreedSelectorPartial.cshtml
partial的内容?@DarinDimitrov上面的标记代码是BreedSelectorPartial.cshtml
视图。我试图做的是让视图调用它自己来获得一个更新的模型——但是只用更改替换results div中的区域。好的,我以为这是您的主视图。没有仔细阅读你的问题。现在一切都清楚了。看看我的答案。#results
div必须位于主视图中的分部之外。整个页面不会重新加载。正在使用局部视图的全部内容重新加载result div的内容。
@using (Ajax.BeginForm(
"ListBreeds", // actionName
"Poultry", // controllerName
null, // routeValues
new AjaxOptions { UpdateTargetId = "results" }, // ajaxOptions
new { id = "ajaxForm" }) // htmlAttributes
)
<div id="results" style="height: 320px; color: black; margin-top: 12px; font-size: 18px;">
@Html.Partial("BreedSelectorPartial")
</div>
@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>
@model IQueryable<BreedViewModel>
@{
var grid = new WebGrid(Model, ajaxUpdateContainerId: "results");
}
@grid.GetHtml(
tableStyle: "webgrid",
alternatingRowStyle: "webgrid-alternating-row",
rowStyle: "webgrid-row-style",
displayHeader: true
)