Post Updated readonly values to Action in MVC

Question

I have below form which is of method=get.

@using (Html.BeginForm("Search", "Home", FormMethod.Get, htmlAttributes: new { @class = "main-search", id = "frmsearch", role = "form" })) {
<div class="row">
  <div class="col-md-3 col-sm-3">
    <div class="form-group">
      <label for="type">Property Type</label>
      @Html.ListBoxFor(m => m.searchModel.CategoriesId, Model.searchModel.Categories, htmlAttributes: new { id = "type", multiple = "multiple", @class = "animate", data_transition_parent = ".dropdown-menu", title = "All" })
    </div>
    <!-- /.form-group -->
  </div>

  <div class="col-md-3 col-sm-3">
    <div class="form-group">
      <label for="location">Location</label>
      @Html.DropDownListFor(m => m.searchModel.LocationID, Model.searchModel.Locations, htmlAttributes: new { id = "location", multiple = "multiple", @class = "animate", data_transition_parent = ".dropdown-menu", title = "All" })
    </div>
    <!-- /.form-group -->
  </div>
  <div class="col-md-3 col-sm-3">
    <div class="form-group">
      <label>Status</label>
      @Html.DropDownListFor(m => m.searchModel.StatusID, Model.searchModel.Status, htmlAttributes: new { id = "status", multiple = "multiple", @class = "animate", data_transition_parent = ".dropdown-menu", title = "All" })
    </div>
    <!-- /.form-group -->
  </div>
  <div class="col-md-2 col-sm-3">
    <div class="form-group">
      <label>Price</label>
      <div class="ui-slider" id="price-slider-category" data-value-min="@Model.searchModel.MinPrice" data-value-max="@Model.searchModel.MaxPrice" data-value-type="price" data-currency="&#8377;" data-currency-placement="before">
        <div class="values clearfix">
          @Html.TextBoxFor(m => m.searchModel.MinPrice, htmlAttributes: new { id = "value-min", @class = "value-min", name = "value-min[]", @readonly = "readonly", style = "padding:0px" }) 
          @Html.TextBoxFor(m => m.searchModel.MaxPrice, htmlAttributes: new { id = "value-max", @class = "value-max", name = "value-max[]", @readonly = "readonly", style = "padding:0px" })
        </div>
        <div class="element"></div>
      </div>
    </div>
    <!-- /.form-group -->
  </div>
  <div class="col-md-1 col-sm-3">
    <div class="form-group">
      <label></label>
      <button type="submit" style="color:white" id="searchSubmit" class="btn btn-block blue waves-effect">
        <i class="fa fa-search"> </i>
      </button>
    </div>
    <!-- /.form-group -->
  </div>
  <!--/.col-md-6-->
</div>
<!--/.row-->
}

and I have this JS to post form values through AJAX

$(document).on('click', '#searchSubmit', function (e) {
        var _form = $(this).closest('form');
        var _url = _form.attr('action');
        var formData = _form.serialize();
        var request = $.get(_url, formData);
        request.complete(function (response) {

        })
})

Here is my model

public class SearchFilters
{
    public SearchFilters()
    {
         MinPrice = 10000;
         MaxPrice=8000000;
    }
    public IEnumerable<SelectListItem> Categories { get; set; }
    public int[] CategoriesId { get; set; }

    public IEnumerable<SelectListItem> Locations { get; set; }
    public int[] LocationID { get; set; }

    public IEnumerable<SelectListItem> Status { get; set; }
    public int[] StatusID { get; set; }

    public int MinPrice { get; set; }
    public int MaxPrice { get; set; }
}

and this is my controller method to process the search request.

[HttpGet]
public ActionResult Search([Bind(Prefix = "searchModel")]SearchFilters smodel)
{
     ProjectsViewModel model = new ProjectsViewModel();
     //search db and fill model
     return PartialView("_PropertyDetails", model);
}

The UI rendering happens for min and max value using noUiSlider plugin and thus inputs are readonly but gets updated through update option of noUiSlider. But whenever model is received in Server it comes as default value assigned to model variables even after update. The values doesn't get updated when inspected in DOM but its reflected in UI. Yes it is because of readonly property of textbox but Is there any other way to post the readonly property values in these type of situations? Below are few screenshots of how UI looks and DOM and model values when it is received.

UI

DOM

Model

UPDATE

I can see the posted values in URL as ...searchModel.MinPrice=₹2%2C189%2C090.00&searchModel.MaxPrice=₹5%2C772%2C480.00 But not in model. Not sure how to get on this..

Answer 1

₹ and , formatting makes the MinPrice and MaxPrice as strings. And as a result those are not getting bind to int properties. Just remove the formatting and send them in GET, then they will be getting bind to int properties.