後值形式jQuery UI的滑塊行動asp.net的MVC

我有這樣的代碼的ASP.NET MVC查看：後值形式jQuery UI的滑塊行動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的索引。這裏是值I尋求：

<div class="last-value"><span> 10000</span></div>

我一直試圖做這樣的事情：在我HttpPost操作方法

var test = Request.Form["maximumSalary"];

：

[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); 
     } 
    }); 
}); 
}

你有任何想法如何，我能得到我的滑塊的「最後的價值」？乾杯。

來源

2015-08-21 Sheil

形式僅後回到表單控件的名稱/值對（'input'，'textarea'和'select'），不'div'元件。您需要將滑塊附加到控件上。你沒有指明你使用哪個插件，或者顯示了你如何附加插件的代碼，所以不能給你答案。 –

好的，但你使用哪個插件（有幾個引導滑塊） –

我錯了，它是jQuery UI滑塊:)抱歉讓你困惑。 – Sheil

您可以創建一個在您的形式隱藏輸入，並在回調更新隱藏輸入的值

@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 
}

來源

2015-08-22 06:21:13

後值形式jQuery UI的滑塊行動asp.net的MVC

回答

相關問題