Unable to use telerik notification in asp.net mvc project - asp.net-mvc

Question

I would like to use noty in my Asp.net Mvc project, however since I can not do it, I prefer telerik aversely. The algorithm is, user registers a web page,processes at the server side, in case of success I would like to show a message at the client. Here is the usage of telerik notification:
http://demos.telerik.com/aspnet-mvc/notification/index
here is my source: (HomeController/Register)
[HttpPost]
public ActionResult Register(Users user)
{
IAraclar tool = null;
string uname = null;
IKisiBL userBusinessRule = null;
try
{
tool = new toollar();
uname = tool.GetUserName(user.UserEmail);
user.UserName = uname;
USERS newDataUser = new USERS
{
USER_ID = 0,
USER_EMAIL = user.UserEmail,
USER_NAME = user.UserName,
USER_PASSWORD = user.UserPassword,
USER_ROLE_TIP = (short)user.UserRoleTipi,
USER_KURUM_TIPI = (short)user.UserKurumTipi
};
using (LojmanEntities entities = new LojmanEntities())
{
entities.USERS.Add(newDataUser);
entities.SaveChanges();
}
}
catch (Exception ex)
{
tool.HataRaporla(ex);
throw;
}
//ViewData["SuccessMessage"] = SistemMesajlari.KayitTamamlandi_ok();
return View();
}
https://docs.google.com/document/d/11EoaOQysDa0FmNIawSZ1AafOh0pZ58W_Qku2Z3BnXWo/edit?usp=sharing
Here is my Register.cshtml, in which tightly coupled with the Action above :
#model LojmanMVC.Domain.Entities.Users
#{
ViewBag.Title = "Lojman Bilgi Sistemi Kullanıcı Kaydı";
}
<h2>Lojman Bilgi Sistemi Kullanıcı Kaydı</h2>
<p id="sifresonuc"> </p>
#*prospective item that shows message*#
#(Html.Kendo().Notification()
.Name("staticNotification")
.AppendTo("#appendto")
)
#*classical form in mvc*#
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Lütfen kullanıcı bilgilerinizi giriniz: </legend>
<div class="editor-label">
#Html.LabelFor(model => model.UserEmail) (Bakanlıkça verilen e-posta adresiniz)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserEmail)
#Html.ValidationMessageFor(model => model.UserEmail)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.UserPassword)
</div>
<div class="editor-field">
#Html.TextBoxFor(item => item.UserPassword, new { id = "password1" })
</div>
<div class="editor-label">
<label for="male">Lütfen şifrenizi tekrar giriniz: </label>
</div>
<div class="editor-field">
<input type="password" name="password2" id="password2" />
</div>
<div class="editor-label">
<label for="male">Lütfen rolünüzü giriniz: </label>
</div>
<div class="editor-field">
#Html.MyEnumDropDownListFor(m => m.UserRoleTipi)
</div>
<p>
<input type="submit" id="registerButton" value="Kayıt Ol" />
</p>
<button id="showStaticNotification" class="k-button">Static in the panel below</button>
</fieldset>
}
<script type="text/javascript">
console.log("1");
function checkPasswordMatch() {
console.log("checkPasswordMatch");
var password = $("#password1").val();
var confirmPassword = $("#password2").val();
if (password != confirmPassword) {
$("#sifresonuc").html("Şifreler uyuşmamaktadır!");
var $p = $("#sifresonuc");
var $button = $("#registerButton");
$button.prop('disabled', true);
$p.css("background-color", "red").show(500);
}
else {
$("#sifresonuc").html("");
var $p = $("#sifresonuc");
$p.css("background-color", "white").show(500);
var $button = $("#registerButton");
$button.prop('disabled', false);
}
}
console.log("2");
$(document).ready(function () {
$("#password2").keyup(checkPasswordMatch);
});
console.log("3");
function InputToLower(obj) {
if (obj.value != "") {
obj.value = obj.value.replace('İ', 'i').replace('I', 'ı').toLowerCase();
}
}
console.log("4");
$(function () {
$("#registerButton").click(function (e) {
console.log("5");
// e.preventDefault();
var errorSummary = $('.validation-summary-errors');
console.log("6");
if (errorSummary.length == 0) {
$('#listError').remove();
$('<div class="validation-summary-errors"></div>').insertAfter($('.validation-summary-valid'));
$(".validation-summary-errors").append("<ul id='listError'><li>0 karakter giremezsiniz. OSI-122 </li></ul>");
}
else if (errorSummary.length == 1) {
$('#listError').remove();
$(".validation-summary-errors").append("<ul id='listError'><li>You cannot enter more than 20 characters.</li></ul>");
}
//return false;
// place that sets notification
console.log("7");
var d = new Date();
staticNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "info");
var container = $(staticNotification.options.appendTo);
container.scrollTop(container[0].scrollHeight);
console.log("8");
});
});
</script>
https://docs.google.com/document/d/1t7g9K4v5BrIyFkHVCMxVowDUbMlT3P6Tsz-88d7YOuA/edit?usp=sharing
(Since I can not write these lines of code despite every efforts, I share it via google docs)
When I run the code, there is no notification appear in the page, and "1,2,3,4" was appeared at the console.Function contains 5 does not work there. What things did I do wrong?
Thanks in advance.

Answer 1

I think you should try to assign the handler of your registerButton in the $document.ready() function, and try to assign the handler of the click event using the functions unbind/bind.
document.ready(function(){
$("#registerButton").unbind("click").bind("click", function() {
<your code here>
...
});
});