how to disable button and Jquery code for that button - asp.net mvc-3

Question

there seems to be another problem ..not with JQuery code but with Action controller code...

i am putting the breakspoints on controllers and start debugging the app, its straight away going to controller and trying to pass in the null values ...please have a look and let me know... thx

public class HomeController : Controller
    {
        //
        // GET: /Home/
        UsersRepository repo = new UsersRepository();
        DBHelpers db = new DBHelpers();

        public ActionResult Index()
        {
           var users = new Users();
           return View(users);
        }

        public ContentResult CheckLogin(Users checkuser)
        {
            checkuser = new Users();
            if (db.CheckUserLoginDetails(checkuser))
            {
                return Content("Login Successful:" + checkuser.Email);
            }
            else
            {
                return Content("Login UnSuccessful");
            }
        }


        public ContentResult Register(Users userRegister)
        {
            userRegister = new Users();
            if (db.InsertNewUSerDetails(userRegister))
            {
                return Content("Registration Successful : your ID is : " + userRegister.UserID);
            }
            else
            {
                return Content("There was a problem addding you, please try again");
            }
        }
    }

=================

here is my DBHelpers class

UsersRepository db = new UsersRepository();

        public bool CheckUserLoginDetails(Users user)
        {
            return (from u in db.EUsers where u.Email == user.Email & u.Password == user.Password select u).Any();
        }

        public bool InsertNewUSerDetails(Users newUser)
        {
            newUser = new Users();
            try
            {
                var date = DateTime.Now.Date;
                newUser.JoiningDate = date;
                db.EUsers.Add(newUser);
                db.SaveChanges();
                return true;
            }
            catch (DbEntityValidationException dbEX)
            {
                foreach (var validationerrors in dbEX.EntityValidationErrors)
                {
                    foreach (var valerror in validationerrors.ValidationErrors)
                    {
                        Trace.TraceInformation("Property: {0} Error: {1}", valerror.PropertyName, valerror.ErrorMessage);
                    }
                }
                return false;
            }

        }

}

and here is my Users class

public class Users
    {
        [Key]
        public virtual int UserID { get; set; }

        [Required(ErrorMessage="Required")]
        public virtual string FirstName { get; set; }

        [Required(ErrorMessage = "Required")]
        public virtual string LastName { get; set; }

        [Required(ErrorMessage = "Required")]
        [DataType(DataType.EmailAddress)]
        public virtual string Email { get; set; }

        [Required(ErrorMessage = "Required")]
        [DataType(DataType.Password)]
        public virtual string Password { get; set; }

        [DataType(DataType.Date)]
        public virtual DateTime JoiningDate { get; set; }

    }

============== problem is when i try to run the application, its directly going to Register() action and passing the null values ...

please help...

=================

here is my View Code...

@model Temp1.Models.Users

@{
    ViewBag.Title = "Index";
}

<script src="@Url.Content("~/Scripts/jquery-1.5.1.js") type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1-vsdoc.js") type="text/javascript"></script>

@using (Html.BeginForm())
{ 
    <fieldset>
    <div id="divLoginInfo">
    <p>if not registered, please @Html.ActionLink("Register", "Register", "Home", new { @id = "lnkRegister" })</p>

    @Html.TextBoxFor(model => model.Email, new { @class = "text" })
    <br />
    @Html.PasswordFor(model => model.Password, new { @class = "text" })

    <p>
        <input type="button" value="Login" id="btnLogin" />
    </p>

    <div id="Result">
        <div class="Loading" style="display:none;"> Checking....</div>
    </div>
    </div>
    </fieldset>
    <br />

    <div id="divRegisterInfo" style="display:none;">
        <fieldset>
        <legend>Users</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)
            @Html.ValidationMessageFor(model => model.Password)
        </div>
       <p>
            <input type="button" value="Create"  id="btnRegister" />
        </p>

        <p>
            <div id="divShowRegistrationMessage">

             </div>
        </p>

    </fieldset>

    </div>
}



<script type="text/javascript">
    $('#btnLogin').click(function (e) {
        var email = $('#Email').val();
        var Password = $('#Password').val();
        var postdata =
        {
            "Email": email,
            "Password": Password
        };
        $('.Loading').fadeIn(50);
        $.ajax({

            url: '@Url.Action("CheckLogin","Home")',
            data: postdata,
            success: function (msg) {
                var data = msg.split(':');
                $('#Result').html(data[0]);
                $('.Loading').fadeOut(50);
             },
            error: function (data) {

                $('#Result').html(data);
                $('.Loading').fadeOut(50);
            }

        });
        e.preventDefault();
    });

    $('#lnkRegister').click(function (e) {
        e.preventDefault();
        $('#divLoginInfo').fadeOut(100);
        $('#divRegisterInfo').fadeIn(100);
    });

    $('#btnRegister').click(function (e) {

        var firstName = $('#divRegisterInfo #FirstName').val();
        var lastName = $('#divRegisterInfo #LastName').val();
        var email = $('#divRegisterInfo #Email').val();
        var password = $('#divRegisterInfo #Password').val();
        var postdata =
            {
                "FirstName": firstName,
                "LastName": lastName,
                "Email": email,
                "Password": password
            };

        $("#divShowRegistrationMessage").html('Pleaes wait...');
        e.preventDefault();
        $.ajax({
            type: 'POST'    
            url: '@Html.Action("Register","Home")',
            data: postdata,
            success: function (msg) {
                $('#divShowRegistrationMessage').html(msg);
            },
            error: function (data) {
                $('#divShowRegistrationMessage').html(data);
            }
        });

    });
</script>

Answer 1

You have a trailing , here which might result into a javascript error:

var postdata =
        {
            "FirstName": firstName,
            "LastName": lastName,
            "Email": email,
            "Password": password,  // <-- remove this comma
        };

The javascript error results into the next line not being executed which is e.preventDefault(); and thus the form performs a normal submit and not an AJAX submit. IIRC some browsers actually might tolerate this but others not. Anyway, it's invalid javascript and needs to be fixed.