Maintain the state of checkbox on page Load in MVC

Question

My issue is related to Page load. I have the following code:

Controller:

public ActionResult Index()
        {
     BD.isEmailON_OFF= db.Email_ON_OFF_T.Select(x=>x.isEmailON_OFF).FirstOrDefault().GetValueOrDefault();
}

[HttpPost]
        public ActionResult CheckEmail(string checkemails)
        {

            //calling Stored Procedure

            if (!string.IsNullOrWhiteSpace(checkemails)|| checkemails=="true" || checkemails=="false")
            {
                var checkemails1 = new SqlParameter("checkemails", checkemails);
                db.Database
                       .ExecuteSqlCommand("EXEC Sp_Email_on_off @checkemails", checkemails1);
            }


            return new JsonResult { };
        }

I have table IS_Email_on_OFF_T:

I inserted to isemailonoff column as 0

Functionality:

I have turned on the email button and checkbox.

turn on email----->becomes turn off button and checkbox checked.

turn off button----> becomes turn on button and checkbox unchecked.

worked correctly till here.

turn on email----->becomes turn off button and checkbox checked.

page load(loading the page)

clicking on turn off button and not changing to turn on the button(1st attempt)(ISSUE)

clicking on turn off button(2nd tym) and it changes.

What I have tried is:

Views:

@{
                if (Model.isEmailON_OFF == 0)
                {
                    <input type="button" value="Turn Email on" class="btn btn-success" id="btnturnemailonoff" />
                            <input type="checkbox" id="Chkemailonoff" style="float:right;" />
                }
                else
                {
                    <input type="button" value="Turn Email off" class="btn btn-success" id="btnturnemailonoff" />
                            <input type="checkbox" id="Chkemailonoff" style="float:right;" checked/>
                }
              }

AJAX call on button click:

<script type="text/javascript">



    $(document).ready(function () {
               $('#btnturnemailonoff').on('click', function () {    


            var checked = !$(this).data('checked');
            var message = checked ? 'Turn Email ON' : 'Turn Email OFF';
            if (confirm("Do you want to " + message + "? ")) {



                $("#Chkemailonoff").prop('checked', checked);
                $(this).val(checked ? 'Turn Email Off' : 'Turn Email on')
                $(this).data('checked', checked);



                debugger;
                var url = '@Url.Action("CheckEmail", "BillingDetails")';
                $.ajax({
                    url: url,
                    type: "POST",
                    data: { checkemails: checked },
                    dataType: "json",
                    // traditional: true,
                    success: function () {
                        alert("ajax request to server succeed");
                    }
                });
            }//end of if

        });
    });





</script>

SP:

ALTER procedure [dbo].[Sp_Email_on_off]
@checkemails varchar(10)
As
Begin
if(@checkemails='false')
Update Email_ON_OFF_T set isEmailON_OFF=0
else
Update Email_ON_OFF_T set isEmailON_OFF=1

End

Answer 1

I made changes in AJAX call button click and it worked for me.

$(document).ready(function () {
        $('#btnturnemailonoff').on('click', function () {                              
            debugger;
             var checked = $("#Chkemailonoff").prop('checked');
            var message = checked ? 'Turn Email On' : 'Turn Email Off';
            if (confirm("Do you want to " + message + "? ")) {
                $("#Chkemailonoff").prop('checked', !checked);
                $(this).val(message)
                var url = '@Url.Action("CheckEmail", "BillingDetails")';
                $.ajax({
                    url: url,
                    type: "POST",
                    data: { checkemails: !checked },
                    dataType: "json",
                    success: function () {
                        //alert("ajax request to server succeed");
                    }
                });
            }




        });
    });