我有一个ASP.NET MVC视图，其代码如下：
@using (Html.BeginForm("Index", "Home"))
{
<div class="row">
<label class="col-md-3">Maximum Salary</label>
<div class="col-md-9">
<div class="range-slider">
<div id="maximumSalary" class="slider" data-min="1000" data-max="100000" data-current="10000"></div>
<div class="last-value"><span> 10000</span></div>
</div>
</div>
</div>
<div class="hsb-submit">
<input type="submit" class="btn btn-default btn-block" value="Search">
</div>
}
我正在尝试将滑块的值作为参数发送给称为HomeController的索引的操作方法。这是我追求的价值：
<div class="last-value"><span> 10000</span></div>
我一直在尝试做这样的事情：
var test = Request.Form["maximumSalary"];
在我的HttpPost操作方法中：
[HttpPost]
public ActionResult Index(string searchString, int categoryList)
{
var test = Request.Form["minimumSalary"];
return null;
}
但是我在Request.Form词典中找不到maximumSalary参数。
这是我使用的js：
if ($.fn.slider) {
$('.header-search-bar .range-slider .slider, .header-search .range-slider .slider').each(function () {
var $this = $(this),
min = $this.data('min'),
max = $this.data('max'),
current = $this.data('current');
$this.slider({
range: 'min',
min: min,
max: max,
step: 1,
value: current,
slide: function (event, ui) {
$this.parent('.range-slider').find('.last-value > span').html(ui.value);
}
});
});
}
您有任何想法如何获得滑块的“最后价值”吗？干杯。
您可以在表单中创建一个隐藏的输入，并在.slide回调中更新该隐藏的输入的值
@Html.Hidden("maximumSalary")
然后将您的脚本修改为
slide: function (event, ui) {
var value = ui.value;
// update the 'label'
$this.parent('.range-slider').find('.last-value > span').html(value);
// update the hidden input
$('#maximumSalary').val(value);
}
或者，将跨度替换为一个看起来像跨度的只读文本框 @Html.TextBox("maximumSalary", new { readonly = "readonly", @class = "..." })
边注。我强烈建议您创建一个包含正在编辑的属性的视图模型，例如
public class MyViewModel
{
[Display(Name = "Maximum Salary")]
[Range(1000, 100000, ErrorMessage = "Please select a salary between $1,000 and $100,000")]
public int MaximumSalary { get; set; }
// add attributes to the following as required
public string SearchString { get; set; }
public int CategoryList { get; set; }
}
这样您就可以牢固地绑定到模型属性，回发模型，同时进行客户端和服务器端验证
@Html.LabelFor(m => m.MaximumSalary, new { @class="col-md-3" })
<div class="row">
@Html.LabelFor(m => m.MaximumSalary, new { @class="col-md-3" })
<div class="col-md-9">
<div class="range-slider">
<div id="maximumSalary" class="slider" data-min="1000" data-max="100000" data-current="10000"></div>
<div>
@Html.TextBoxFor(m => m.MaximumSalary, new { readonly = "readonly", @class = "..." })
@Html.ValidationMessageFor(m => m.MaximumSalary)
</div>
</div>
</div>
</div>
然后您的POST方法将是
[HttpPost]
public ActionResult Index(MyViewModel model)
{
if (!ModelState.IsValid)
{
return View(model);
}
// save and redirect
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句