My ajax function failed to store data into sql server - model-view-controller

Question

I have a JQuery login/register modal in my mvc web application and I'm trying to store the new user in the simplest form at this stage, so now I know that I must use Ajax to send the information to the server but something is wrong and it is not working
so here is my modal:
<!--Signin/Signup container-->
<div id="modal" class="popupContainer" style="display:none;">
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">سجل عن طريق الفيس بوك</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">سجل عن طريق كوكل</span>
</a>
</div>
<div class="centeredText">
<span>أو استخدم الايميل الخاص بك</span>
</div>
<div class="action_btns">
<div class="one_half">سجل دخول</div>
<div class="one_half last"> انضم</div>
</div>
</div>
<!-- Username & Password Login form -->
<div class="user_login">
<form>
<label>الايميل / اسم المستخدم</label>
<input type="text" />
<br />
<label>كلمة السر</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">احفظ معلومات الدخول على هذا الجهاز</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> رجوع</div>
<div id="login_btn" class="one_half last">Login</div>
</div>
</form>
هل نسيت كلمة المرور؟
</div>
<!-- Register Form -->
<div class="user_register">
<form>
<label>اسم المستخدم</label>
<input id="txtUserName" type="text" />
<br />
<label>عنوان البريد الألكتروني</label>
<input id="txtEmail" type="email" />
<br />
<label>كلمة المرور</label>
<input id="txtPass" type="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div id="register_btn" class="one_half last">Register</div>
</div>
</form>
</div>
</section>
</div>
<!--Signin/Signup End-->
and this is my script
<script>
//login code
$(document).ready(function () {
$("#register_btn").click(function () {
// Do something
$.ajax({
url: '#Url.Action("Register", "Account")',
type: 'POST',
data: {//passing data
userName:$("#txtUserName").val(),
email:$("#txtEmail").val(),
password: $("#txtPass").val()
},
success: function () {
alert('success');
},
error: function () {
alert('failure');
}
});
});
});
</script>
and here is my controller code
public ActionResult Register()
{
return View();
}
[HttpPost]
public ActionResult Register(UserModel user)
{
AddDetails(user);
return View();
}
private void Connection()
{
string constr = ConfigurationManager.ConnectionStrings["NerdsContext"].ToString();
con = new SqlConnection(constr);
}
//Add records to database
private void AddDetails(UserModel user)
{
Connection();
SqlCommand com = new SqlCommand("AddUser", con);
com.CommandType = CommandType.StoredProcedure;
com.Parameters.AddWithValue("#userName", user.userName);
com.Parameters.AddWithValue("#email", user.email);
com.Parameters.AddWithValue("#password", user.password);
con.Open();
com.ExecuteNonQuery();
con.Close();
}
I checked my sql procedure it is working fine but I don't know why I'm getting failure alert.