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

[Tom Frajer]

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

[Tom Frajer]

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.

[Tom Frajer]

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...

[Tom Frajer]

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>

[Prince Oliver]

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 

[Tom Frajer]

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

[Kasithangam C]

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. 

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents   

Please let us know if you have further query. 

 

Regards, 

Kasithangam