Working with DropDownList with MVC and KnockoutJs to limit the data posted on the server efficient way ~ CodeRower Software Private Limited

Working with Knockoutjs and MVC makes our life easy, but still there are some points that require some special attention.

And one of these points is How much data is posted back to the server when we make a async call? Well it is obviously not required for very small application that target very limited users that are using very high connectivity with the server. but most of the application are not like that. In general we have to take care of such things to make our application more reliable and scalable. Quick reference to the issue i have observed in many applications.

But before going to the issue and solution directly can you answer this question:- We have a form that has dropdowns for user selection (user can select one/many options out of the available options ) then why we have to post all the available options back to server instead of just sending the selected options?

well i have created a sample scenario to describe the problem i details.

<p>

Choose a color:

</p>

</li>

<li>

<a onclick="SubmitData()">submit</a>

</li>

now i bind this with data from the Model (Server side class of MVC) as

var colorVm;

var modelColor = @Html.Raw(Json.Encode(Model));

function colorsViewModel() {

var self = this;

self.Colors = ko.observable([]);

self.SelectedColors = ko.observable();

}

colorVm = new colorsViewModel();

ko.mapping.fromJS(modelColor,{}, colorVm);

ko.applyBindings(colorVm, document.getElementById('liColors'));

</script>

now all works fine as expected. But when i see the IIS logs of my actual application in which there is a form with 100 dropdowns and all dropdowns are mapped with metadata tables that has 1000 records each, it was like wow!!! bulk of data is sent and received but...... Received why???

after investigating through fiddler i found the issue i.e.

"With the form all the option of the dropdown list are sent back to the server"-- this is redundant data as i have to work only on the selected item.refer the screenshot and you would also agree with me.

After understanding the issue i found there are 3 solutions that will eliminate redundant data easily

Destroy the options (call destroy on ViewModel):- not applicable is some secenarios.
UnMap the ViewModel and set the option property to null- get the OP as :
Exclude the options from ViewModel - the best option for my scenario. it says that bind the dropdown with model property directly or use view bag and in ViewModel (ko) only have selected item property. see the screenshot below.