使用AJAX在视图内呈现部分视图
本文关键字:视图 现部 使用 AJAX | 更新日期: 2023-09-27 18:09:05
我试图刷新一个视图内的部分视图,当一个表单被提交。然而,每当我尝试它只是渲染部分视图作为一个正常的视图。有人能告诉我我哪里做错了吗?
控制器:
public ActionResult ChangeHeatName(string heatName, string updatedHeat)
{
string user = User.Identity.Name;
HomeModel H = new HomeModel();
H.ChangeHeatName(heatName, updatedHeat, user);
ChemViewModel mySlagViewModel = new ChemViewModel();
mySlagViewModel = H.QueryResults(heatName);
return PartialView("PartialChemAnalysis", mySlagViewModel);
}
局部视图表单(包含在局部视图中,而不是主视图中):
@using (Ajax.BeginForm("ChangeHeatName", "Home", new AjaxOptions(){UpdateTargetId = "chemDiv" InsertionMode = InsertionMode.Replace}))
{
<section>
Heat Name:<input type="text" name="heatName" value="@Html.ValueFor(x => x.heatname)" style ="width:100px"/>
Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" />
<input type="submit" name="ChangeHeatName" value="Change" />
</section>
}
呈现部分视图的索引视图:
@if(ViewBag.SearchKey == null)
{
<div class="content-wrapper">
<hgroup class="title">
<h1>@HttpContext.Current.User.Identity.Name</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
</div>
}
@using (Html.BeginForm("Index", "Home", "POST"))
{
<div class="searchField">
<input type="text" class="search-query" name="heatSearch" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
<br />
@if (ViewBag.AverageSuccessful == true)
{
<input type="text" name="AvgConfirmation" class="search-query" value="Average Submitted Successfully" width:"400px" placeholder="Search" />
}
</div>
}
@if(ViewBag.SearchKey != null)
{
<div>
<div id ="chemDiv">
@Html.Action("PartialChemAnalysis", "Home", (string)ViewBag.SearchKey)
</div>
<div id ="slafDiv">
@Html.Action("PartialSlagView", "Home", (string)ViewBag.SearchKey)
</div>
</div>
}
传递SearchKey:
的索引控制器 [HttpPost]
public ActionResult Index(string heatSearch)
{
ViewBag.SearchKey = heatSearch;
return View();
}
当前您的ajax。Beginform在你的部分视图中,这很好,但是你的部分视图没有在你的索引中呈现,所以你从来没有做过ajax替换逻辑你只是调用一个action方法并获得部分视图的整个页面刷新。
是这样的
@if(ViewBag.SearchKey != null)
{
<div>
<div id ="chemDiv">
@Html.Partial("ChangeHeatName")
</div>
<div id ="slafDiv">
@Html.Action("PartialSlagView", "Home", (string)ViewBag.SearchKey)
</div>
</div>
}
现在是Ajax。Beginform在索引视图中呈现,当按钮被点击时,它将刷新。
编辑:你需要做一些@Html.Action("PartialChemAnalysis", "Home", (string)ViewBag.SearchKey)
可能粘在你的部分视图,因为一切在"chemDiv"现在将被替换更新。
没有在Ajax.BeginForm()
中指定POST
。试试这个:
@using (Ajax.BeginForm("ChangeHeatName", "Home", FormMethod.Post,
new AjaxOptions(){UpdateTargetId = "chemDiv" InsertionMode = InsertionMode.Replace}))
{...}
同样,在你的控制器动作上粘贴一个断点并逐步通过它,看看它是否真的击中return PartialView()
或跳过它。
发布这个是因为它不是一个直观的修复。显然有MVC 4和jQuery 1.9.1的问题,所以要做到这一点,我不得不改变我的参考jQuery 1.7.1