部分视图在 ajax.beginform 之后不会更新
Partial view won't update after ajax.beginform
我对 mvc3 相当陌生,所以请耐心等待。
这是场景:在我的视图中,我有一个小菜单和另一个部分视图,其中显示了名称与用户输入匹配的产品。
@model List<BlokCWebwinkelGroep3.Models.Product>
在迷你菜单中,我有一个滑块(带有 2 个滑块手柄)和一个按钮"搜索"(两者都在 ajax.beginform 中)。 当我单击搜索按钮时,滑块的 2 个值将作为参数发送到 HttpPost 操作方法"搜索"(这些值位于隐藏的输入字段中,当有人滑动滑块时,某些 JavaScript 会更新该字段), 它返回一个部分视图(_myPartial,模型)。(模型是一个列表)。
Ajax.BeginForm
@using (Ajax.BeginForm("Search",
new AjaxOptions
{
UpdateTargetId = "table-container",
InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
HttpMethod = "POST"
}))
{
<input type="hidden" name = "hidden" id="hidden_amount" />
<div id="slider-range">
</div>
<br />
<button type="submit" value="Search">
Search</button>
}
操作方法
[HttpPost]
public PartialViewResult Search(string hidden)
{
List<Product> Model = null;
string[] values = hidden.Split(' ');
int[] convertedString = Array.ConvertAll<string, int>(values, int.Parse);
string name = (string)TempData["searched"];
try
{
Model = ResultDBController.GetAdvancedSearched(name, convertedString[0], convertedString[1]);
}
catch (Exception e)
{
ViewBag.Foutmelding = "Er is iets foutgegaan: " + e;
}
return PartialView("_Product", Model);
}
UpdateTargetId 是div "table-container"
@*Calls the _Product partial view*@
<div class="table-container">@Html.Partial("_Product", Model)</div>
然后它通过部分视图运行,但它不会显示在屏幕上。
部分视图
<table class="productlist">
@foreach (BlokCWebwinkelGroep3.Models.Product product in Model)
{
<tr class="product" onclick="location.href = '@(Url.Action("ProductPage", "Product", new {ProductID = @product.ProductID}))'">
<td>
<img src = '@product.ImageURL' alt = '@product.Name' />
</td>
<td>
@product.Name
</td>
<td>
€@product.Price
</td>
</tr>
}
假设我搜索"er",这将在屏幕上显示 3 个产品。 2个<75欧元,另一个是183欧元。如果我将滑块设置为 75 - 300,我可以调试并看到一切正常。在actionmethod中返回的分部视图仅包含183欧元的产品,然后它循环遍历分部视图一次,但是分部视图不会更新到该版本,它与3个产品保持在同一版本上。
我在这里做错了什么?
附言我在标题中使用以下脚本
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/css" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
MSDN 文档指出 UpdateTargetId 更新的是 DOM ID,而不是像您正在执行的那样更新类。 将您的类更改为 ID,它应该按预期工作。
<div id="table-container"
相关文章:
- Bookshelf.js,在fetchAll()方法之后更新
- jQuery Slider/Carousel 在 DOM 之后更新内容
- 在arr.splice()之后更新变量
- 我需要一些关于PHP的帮助,并在“?”之后更新URL
- 在 jQuery UI Sortable 之后更新 CollectionView 内容的最佳方式
- 在成功调用ajax之后更新引导popover的内容
- 在“ac change”之后更新“acute.select”列表
- 在jquery.load()之后更新dom
- 如何在不刷新页面的情况下在AjaxCall之后更新HighSlide内容
- $http之后更新多个控制器中的作用域
- 在每一步/单击之后更新引导程序日期时间选择器
- 指令不会在父作用域的$http response之后更新作用域
- Angular 2:在valueChanges之后更新FormControl验证器
- 在使用jquery或ajax更新表之后更新输入表单
- 如何让Angular在ajax get之后更新集合
- 内容可编辑分区-在.html()之后更新光标位置
- 如何在jQuery .load()之后更新DOM
- 如何在一个很长的HTTP请求之后更新DOM,而不用在Angular中使用$scope
- AngularJS如何在事件监听器之后更新视图/作用域
- 在持久性烬之后更新dom