We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Strongly typed view does not return model values to controller upon submit of the form

Hi,
Im using strongly typed helpers for all the fields on my View. Im combining SyncFusion helpers with standard MVC helpers to achieve this.
Then I want to get all the field values in my controller usinf scaffolding method described here:https://www.syncfusion.com/kb/5427/how-to-get-the-form-control-values-in-postback
Unfortunaltely, only values for standard MVC fields are passed back to controller after submit of the form. All Syncfusion form fields have their values not present in the model passed back to my controller (see attached screenshot).

Controller:

public ActionResult TickingEdit(int nl_id)
{
TickingViewModel model = new TickingViewModel();
// Get Ticking Ad details
model.ticker = tickerService.GetTickerById(nl_id);
// Load all enumerations for DropDown fields
model.bodyTypes = tickerService.GetAllBodyTypes();
model.conditions = tickerService.GetAllConditions();
model.carMakes = tickerService.GetAllCarMakes();
model.carModels = tickerService.GetAllCarModels();
model.countries = tickerService.GetAllCountries();
model.customerTypes = tickerService.GetAllCustomerTypes();
model.fuelTypes = tickerService.GetAllFuelTypes();
model.kmRanges = tickerService.GetAllKmRanges();
model.segments = tickerService.GetAllSegments();
// Render Form
return View("TickingEdit", model);
}
[HttpPost]
public ActionResult TickingEditSubmit(TickingViewModel model)
{
// Save ticking Ad form data
tickerService.SaveTicker(model.ticker);
// Go back to listing grid
return RedirectToAction("TickingGrid");
}

View:

<script src="~/Scripts/ej/ej.web.all.min.js"></script>
<script src="~/Scripts/ej.data.min.js"></script>
@{
ViewBag.Title = "CarDat 2 - Ticking";
}
@model CarDat.Web.ViewModels.TickingViewModel
<br />
@using (Html.BeginForm("TickingEditSubmit", "Ticking", FormMethod.Post))
{
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label class="control-label " for="nl_id">Link na inzerát<span class="asteriskField">*</span></label>
@Html.TextBoxFor(model => model.ticker.s_url_link, new { @class = "e-textbox" })
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="s_url_domain">Doména</label>
@Html.TextBoxFor(model => model.ticker.s_url_domain, new { @class = "e-textbox" })
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__system_country">Zeme inzerátu</label>
@Html.EJ().DropDownListFor(model => model.countries).Datasource(Model.countries).DropDownListFields(Df => Df.Text("s_name").Value("nl_id")).Value(Model.ticker.nl_id_cis__system_country.ToString()).Width("100%")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="b_new_in_country">Nové v zemi</label><br />
@Html.CheckBoxFor(model => model.ticker.b_new_in_country)
</div>
</div>
<div class="col-md-5">
</div>
<div class="col-md-1">
<label class="control-label">Ticker #@Model.ticker.nl_id</label>
@Html.HiddenFor(model => model.ticker.nl_id)
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__car_make">Znacka</label>
@Html.EJ().DropDownListFor(model => model.carMakes).Datasource(Model.carMakes).DropDownListFields(Df => Df.Text("s_name").Value("nl_id_parent").ID("nl_id_parent")).Value(Model.ticker.nl_id_cis__car_make.ToString()).Width("100%").CascadeTo("nl_id_cis__car_model")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__car_model">Model</label>
@Html.EJ().DropDownListFor(model => model.carModels).Datasource(Model.carModels).DropDownListFields(Df => Df.Text("s_name").Value("nl_id")).Value(Model.ticker.nl_id_cis__car_model.ToString()).Width("100%")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nl_product_year">Rok výroby</label>
@Html.EJ().NumericTextBoxFor(model => model.ticker.nl_product_year).ShowSpinButton(false).Width("100%")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="b_has_sb">SB</label><br />
@Html.CheckBoxFor(model => model.ticker.b_has_sb)
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__car_body_type">Karoserie</label>
@Html.EJ().DropDownListFor(model => model.bodyTypes).Datasource(Model.bodyTypes).DropDownListFields(Df => Df.Text("s_name").Value("nl_id")).Value(Model.ticker.nl_id_cis__car_body_type.ToString()).Width("100%")
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__ticking_km_range">Najeto KM</label>
@Html.EJ().DropDownListFor(model => model.kmRanges).Datasource(Model.kmRanges).DropDownListFields(Df => Df.Text("s_name").Value("nl_id")).Value(Model.ticker.nl_id_cis__ticking_km_range.ToString()).Width("100%")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__ticking_fuel_type">Typ paliva</label>
@Html.EJ().DropDownListFor(model => model.fuelTypes).Datasource(Model.fuelTypes).DropDownListFields(Df => Df.Text("s_name").Value("nl_id")).Value(Model.ticker.nl_id_cis__ticking_fuel_type.ToString()).Width("100%")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="s_seller_name">Spolecnost</label>
@Html.TextBoxFor(model => model.ticker.s_seller_name, new { @class = "e-textbox" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="s_spz">SPZ</label>
@Html.TextBoxFor(model => model.ticker.s_spz, new { @class = "e-textbox" })
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="s_vin">VIN</label>
@Html.TextBoxFor(model => model.ticker.s_vin, new { @class = "e-textbox" })
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__ticking_condition">Exteriér - stav</label>
@Html.EJ().DropDownListFor(model => Model.conditions).Datasource(Model.conditions).DropDownListFields(Df => Df.Text("s_name").Value("nl_id")).Value(Model.ticker.nl_id_cis__ticking_condition.ToString()).Width("100%")
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__ticking_segment">Segment</label>
@Html.EJ().DropDownListFor(model => model.segments).Datasource(Model.segments).DropDownListFields(Df => Df.Text("s_name").Value("nl_id")).Value(Model.ticker.nl_id_cis__ticking_segment.ToString()).Width("100%")
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="s_phone">Telefon</label>
@Html.TextBoxFor(model => model.ticker.s_phone, new { @class = "e-textbox" })
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nl_id_cis__ticking_customer_type">Typ zákazníka</label>
@Html.EJ().DropDownListFor(model => model.customerTypes).Datasource(Model.customerTypes).DropDownListFields(Df => Df.Text("s_name").Value("nl_id")).Value(Model.ticker.nl_id_cis__ticking_customer_type.ToString()).Width("100%")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="s_seller_name">Spolecnost CRM</label>
@Html.TextBoxFor(model => model.ticker.s_seller_name, new { @class = "e-textbox" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="s_name_city">Mesto</label>
@Html.TextBoxFor(model => model.ticker.s_name_city, new { @class = "e-textbox" })
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="b_mobile_buying">MB</label><br />
@Html.CheckBoxFor(model => model.ticker.b_mobile_buying)
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nl_customer_price">Cenaz zákazníka</label>
@Html.EJ().NumericTextBoxFor(model => model.ticker.nl_customer_price).ShowSpinButton(false).Width("100%")
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="nl_buying_price">Výkupní cena</label>
@Html.EJ().NumericTextBoxFor(model => model.ticker.nl_buying_price).ShowSpinButton(false).Width("100%")
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="nl_selling_price">Prodejní cena</label>
@Html.EJ().NumericTextBoxFor(model => model.ticker.nl_selling_price).ShowSpinButton(false).Width("100%")
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label requiredField" for="nl_level">Grade</label>
@Html.EJ().NumericTextBoxFor(model => model.ticker.nl_level).ShowSpinButton(false).Width("100%")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nd_liquidity">Likvidita</label>
@Html.EJ().NumericTextBoxFor(model => model.ticker.nd_liquidity).ShowSpinButton(false).Width("100%")
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nl_web_position">Web Pozice</label>
@Html.EJ().NumericTextBoxFor(model => model.ticker.nl_web_position).ShowSpinButton(false).Width("100%")
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label class="control-label requiredField" for="s_note_ticker">Poznámka</label>
@Html.TextBoxFor(model => model.ticker.s_note_ticker, new { @class = "e-textbox" })
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="b_ac">AC</label><br />
@Html.CheckBoxFor(model => model.ticker.b_ac)
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="b_automat">Automat</label><br />
@Html.CheckBoxFor(model => model.ticker.b_automat)
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="b_4x4">4x4</label><br />
@Html.CheckBoxFor(model => model.ticker.b_4x4)
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="b_6seats">5 Seats</label><br />
@Html.CheckBoxFor(model => model.ticker.b_6seats)
</div>
</div>
<div class="col-md-1">
</div>
<div class="col-md-1">
<div class="form-group">
<label class="control-label requiredField" for="nl_web_position_de">Web pozice DE</label>
@Html.EJ().PercentTextBoxFor(model => model.ticker.nl_web_position_de).ShowSpinButton(false).Width("100%")
</div>
</div>
</div>
<div class="row">
<div class="col-md-9">
</div>
<div class="col-md-2">
@Html.EJ().Button("btnDateSelect").Text("Save").Type(ButtonType.Submit).Size(ButtonSize.Medium)
</div>
</div>
}

Attachment: screenshots_11c025c7.zip


6 Replies

TF Tom Frajer May 24, 2016 07:02 AM UTC

I was playing around little bit and discovered that I can get values from syncfusion componends this way:

        public ActionResult TickingEditSubmit(FormCollection form)
        {
            var wp = form["tickernl_web_position"];
            var wp2 = Request["tickernl_web_position"];
        }

I think that this is the root of the problem. When I have nested object in my model, Syncfusion components generate wrong name attribute for form fields. It should be like this: 

"ticker.nl_web_position"

Standard MVC components are working in different way and they are generating name attributest with dot as a separator between nested object and actual attribute in the nested object.


TF Tom Frajer May 24, 2016 07:44 AM UTC

Can I explicitly define name atribute for DropDownListFor and NumericTextBoxFor in my view code?
If this is possible and I will set correct names, maybe values will be atomatically passed to the model.

But still it would be nice to have all this happen automatically without any special configuration so I will not have to write more code than necessary...


TF Tom Frajer May 24, 2016 07:50 AM UTC

For example this:

@Html.EJ().DropDownListFor(m => m.carMakes).Datasource(Model.carMakes).DropDownListFields(Df => Df.Text("s_name").Value("nl_id_parent").ID("nl_id_parent")).Value(Model.ticker.nl_id_cis__car_make.ToString()).Width("100%").CascadeTo("nl_id_cis__car_model")

Generates this:

<span id="carMakes_container" class="e-in-wrap e-box"><input type="hidden" id="carMakes" class="e-dropdownlist e-js" tabindex="" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-haspopup="true" aria-owns="carMakes_popup" name="carMakes" value="70858" style="display: none;"><input id="carMakes_hidden" class="e-input" readonly="true" tabindex="-1" data-role="none"><span id="carMakes_dropdown" class="e-select" role="button" unselectable="on"><span class="e-icon e-down-arrow" aria-label="select" unselectable="on"></span></span></span>

But I would rather see this:

<span id="carMakes_container" class="e-in-wrap e-box"><input type="hidden" id="ticker.nl_id_cis__car_make" class="e-dropdownlist e-js" tabindex="" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-haspopup="true" aria-owns="carMakes_popup" name="ticker.nl_id_cis__car_make" value="70858" style="display: none;"><input id="carMakes_hidden" class="e-input" readonly="true" tabindex="-1" data-role="none"><span id="carMakes_dropdown" class="e-select" role="button" unselectable="on"><span class="e-icon e-down-arrow" aria-label="select" unselectable="on"></span></span></span>


PO Prince Oliver Syncfusion Team May 24, 2016 01:48 PM UTC

Hi Tom, 

Thanks for contacting Syncfusion support. 

Issues: 

  1. Generated name attribute without dot separator in  NumericTextBoxFor when binding complex data source.
  2. Value is not maintained after the postback in DropDownListFor control.

The two above mentioned issues are already fixed internally and will be available in 2016 volume 2 main release. In case you need to have a workaround for second issue, you need to manually remove the value attribute of the dropdownlist input element and set the value to the dropdownlist using clientside create event. Here is a sample code 

 
<script> 
 
    function onCreate() { 
        var value = this.element.attr("value"); 
        if (this.element.attr("value") != null){ 
            this.element.removeAttr('value'); 
        } 
        this.model.value = ""; 
        this.setModel({ value: value }); 
    } 
</script> 


Our strongly typed controls work similar to default MVC strongly typed controls as we have designed them in similar way. Due to these issues you may feel that our strongly typed controls to be different, sorry for the inconvenience. After the fix it will work similar to Default MVC strongly typed controls. Let us know if you have any further issues. 

Regards, 
Prince 



TF Tom Frajer May 31, 2016 07:01 AM UTC

Perfect, I will be lucky once Volume 2 main release will be released :)


KC Kasithangam C Syncfusion Team June 1, 2016 06:26 AM UTC

Hi Tom, 
Thanks for your update.A support incident to track the status of the reported issues has been created under your account. Please log on to our support website to check for further updates. 
Please let us know if you have further query. 
 
Regards, 
Kasithangam 


Loader.
Live Chat Icon For mobile
Up arrow icon