Modal Popup for Editing a row changes a data type of bit ('0') to a text 'False' and causes an abort on a Save.

This is the modal
<div id="mdlEdit" class="modal fade" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
            <div class="modal-dialog">
                <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="hdrEdit" runat="server"></h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="iID" class="control-label col-xs-5"><span class= >*&nbsp;</span>ID</label>
                            <div>
                                <input type="number" class="form-control" id="iID" placeholder="Enter ID" runat="server" maxlength="30" name="iID" /> 
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="iTableID" class="control-label col-xs-5"><span class="required">*&nbsp;</span>Table ID</label>
                            <div>
                                <input type="number" class="form-control" id="iTableID" placeholder="Enter Table ID" runat="server" maxlength="10" name="iTableID" /> 
                            </div>
                        </div>
                         <div class="form-group">
                            <label for="iFieldName" class="control-label col-xs-5"><span class="required">*&nbsp;</span>Field Name</label>
                            <div>
                                <input type="text" class="form-control" id="iFieldName" placeholder="Enter FieldName" runat="server" maxlength="30" name="iFieldName" /> 
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="iIsKey" class="control-label col-xs-5"><span class="required">*&nbsp;</span>IsKey (0-False 1-True)</label>
                            <div>
                                <input type="text" class="form-control" id="iIsKey" placeholder="Enter IsKey" runat="server" maxlength="1" name="iIsKey" /> 
                            </div>
                            
                        </div>
                        <div class="form-group">
                            <label for="icanEdit" class="control-label col-xs-5"><span class="required">*&nbsp;</span>canEdit (0-False 1-True)</label>
                            <div>
                                <input type="text" class="form-control" id="icanEdit" placeholder="Enter canEdit" runat="server" maxlength="1" name="icanEdit" /> 
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="icanFilter" class="control-label col-xs-5"><span class="required">*&nbsp;</span>canFilter (0-False 1-True)</label>
                            <div>
                                <input type="text" class="form-control" id="icanFilter" placeholder="Enter canFilter" runat="server" maxlength="1" name="icanFilter" /> 
                            </div>
                        </div>
                        </div>
                        <div class="form-group">
                            <label for="iFilterTypeID" class="control-label col-xs-5"><span class="required">*&nbsp;</span>FilterT ype ID (2 for Textbox</label>
                            <div>
                                <input type="number" class="form-control" id="iFilterTypeID" placeholder="Enter FilterTypeID" runat="server" maxlength="1" name="iFilterTypeID" /> 
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="iSortOrder" class="control-label col-xs-5"><span class="required">*&nbsp;</span>SortOrder</label>
                            <div>
                                <input type="text" class="form-control" id="iSortOrder" placeholder="Enter SortOrder" runat="server" maxlength="30" name="iSortOrder" /> 
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="iActive" class="control-label col-xs-5"><span class="required">*&nbsp;</span>Active (0-False 1-True)</label>
                            <div>
                                <input type="text" id="iActive" placeholder="Enter Active" runat="server" maxlength="1" name="iActive" /> 
                            </div>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary btn-sm" runat="server" id="BtnSave" onclick="return save()">Save</button>
                    </div>
                        
                        <div class="text-danger" runat="server" id="div1" visible="false">
                            <strong>Update Not Saved!  </strong><div runat="server" id="div2"></div>
                        </div>   
                    </div>
                </div>
            </div>

Open in new window


Below is the table definition from SQL
The-Edit-Modal.docx
teFields.sql
keithwilson1developerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
JQuery code (comments inside):
 <script>
            //The following snippet add the 'show' 'hide' event
                (function ($) {
	              $.each(['show', 'hide'], function (i, ev) {
	              var el = $.fn[ev];
	              $.fn[ev] = function () {                      
	               this.trigger(ev);
	              return el.apply(this, arguments);
	              };
	             });
	             })(jQuery); 
                  
                 
              $('.fade').on('show',function(){
            //Check the value of the element contains false or true      
                if($('#icanEdit').val()==='False'){
                    $('#icanEdit').val('0');
                }
              //Same for the other elements contains false true....    
                  
              })
    
             </script>

Open in new window

Kelvin McDanielSr. DeveloperCommented:
If I remember correctly the Model Binder is smart enough to handle the translation.

1. Change your bit fields in your modal to type=checkbox.

2. Comment out the JavaScript in the 'fade' handler that translates the value from 'False' to '0'.

3. I don't see your save() function; hopefully you won't need to... but just in case be prepared to modify it to evaluate those checkbox fields for 'checked' using this technique.

4. Change the controller method parameters associated with the bit fields to booleans.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.