updated model on server side after changes in JS on client

Question

I'm new to asp. so maybe it is a newbie question.

I have 2 lists and submit button inside a model in my client side, After I made some changes in the list I press on the button I want to update my DB with the latest list changes.

My problem is that after I made the changes in the client, The lists doesn't updated in the server side.

What am I missing here? How can I update the Server after some client changes?

This is part of my code:

ASPX : (Only the modal)

<div class="modal fade" data-backdrop="static" id="ModalSwitchTableSpecie" tabindex="-1" role="dialog" aria-labelledby="ModalSwitchTableSpecieLabel" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="H1">Add / Remove Items</h4>
                </div>
                <div class="modal-body row">
                    <select  class="list-group col-lg-5 " id="lstSpecieFullModal" runat="server" style="padding-left:20px;">
                    </select >
                    <div class="col-lg-2">
                        <button  type="button"  class="btn btn-info glyphicon glyphicon-chevron-right" id="btnAddSpecieModal"  onclick="AddSpecie()"></button>
                        <br />
                        <button  type="button" class="btn btn-info glyphicon glyphicon-chevron-left"  id="btnRemoveSpecieModal" onclick="RemoveSpecie()" ></button>
                    </div>
                    <select  class="list-group col-lg-5 " id="lstSpecieCurrentModal" runat="server" style="padding-right:20px;">
                    </select>
                </div>
                <div class="modal-footer">
                    <asp:Button Text="Submit" class="btn btn-success" UseSubmitBehavior="false" data-dismiss="modal" runat="server" id="btnSubmitSpecie" OnClick="btnSubmitchanges_ServerClick"/>
                </div>
            </div>
        </div>
    </div>

JS

    <script type="text/javascript" >
    function AddSpecie() {
        var selectedOpts = $('#lstSpecieFullModal option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#lstSpecieCurrentModal').append($(selectedOpts).clone());
        $(selectedOpts).remove();
    }(jQuery);
    function RemoveSpecie() {
        var selectedOpts = $('#lstSpecieCurrentModal option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }
        $('#lstSpecieFullModal').append($(selectedOpts).clone());
        $(selectedOpts).remove();
    } (jQuery);
</script>

Code Behind C#:

        protected void btnSubmitchanges_ServerClick(Object sender, EventArgs e)
    {
        Button clickedButton = sender as Button;
        dbManager.OpenConnection();
        switch (clickedButton.ID)
        {
            case "btnSubmitSpecie":
                for (int i = 0; i < lstSpecieCurrentModal.Items.Count; i++ )
                    if (!dbManager.CheckIfRecordExist("T_ProductToSpecie", "WHERE RevisionsID = " + SelectedProduct.RevisionsID + " AND SpecieID = " + GetSpecieIDByName( lstSpecieCurrentModal.Items[i].Text)))
                    {
                        dbManager.InsertRemoveFromTable("INSERT INTO T_ProductToSpecie (RevisionsID, SpecieID) VALUES ( " + SelectedProduct.RevisionsID + ", " + GetSpecieIDByName( lstSpecieCurrentModal.Items[i].Text) + ")" );
                    }
                break;
            default:
                break;
        }

    }

In this code as example, I'm adding some new items from the first list to the second and in the server side when I go over the loop, I see the the list size doesn't changed.

Thanks in advanced for help.

Answer 1

In the asp:Button , you have set UseSubmitBehavior="false" . With this setting, the form data does not get sent to the server side. You either need to change this back to UseSubmitBehavior="true" or omit this (since true is the default value here). The other option is to have some JavaScript code on button click that reads the form data and makes an AJAX call to post the data back to the server side.