use VS 2013, I have a table that should show the data of a form, but it shows undefined HomeController
[HttpPost]
public ActionResult AddUser(string UserName, string Email, string Password)
{
var user = new UserModel();
user.UserName = UserName;
user.Email = Email;
user.Password = Password;
return Json(user, JsonRequestBehavior.AllowGet);
}
UserModel
public class UserModel
{
public int ID { get; set; }
public string UserName { get; set; }
public string Email { get; set; }
public string Password { get; set; }
}
Index
@{
ViewBag.Title = "Home Page";
}
@model AjaxTut.Models.UserModel
<div class="row">
<div class="col-md-8 col-lg-offset-4">
<h2>Add User</h2>
<br />
<span>User Name: </span> @Html.TextBoxFor(x => x.UserName, new { @class = "form-control" })<br />
<span>Email: </span> @Html.TextBoxFor(x => x.Email, new { @class = "form-control" })<br />
<span>Password: </span> @Html.TextBoxFor(x => x.Password, new { @class = "form-control" })<br />
<p><a class="btn btn-default" onclick='SaveUser()'>Save</a></p> <br /><br /><br />
</div>
</div>
<div class="row">
<div class="col-md-8 col-lg-offset-3">
<h2>New User List</h2>
<table id="myTable" class="table-striped">
<tr>
<th>User Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</table>
</div>
</div>
<style>
#myTable tr th {
color: white;
width: 300px;
height: 40px;
text-decoration: solid;
background-color: yellowgreen;
padding: 10px;
}
</style>
<script>
function SaveUser() {
var userName = $("#UserName").val();
var email = $("#Email").val();
var password = $("#Password").val();
$.ajax({
type: "POST",
ur: "Home/AddUser",
data: JSON.stringify({ UserName: userName, Email: email, Password: password }),
contentType: "application/json",
success: function (result) {
$("#myTable").append("<tr><td>" +
result.UserName + "</td><td>" +
result.Email + "</td><td>" +
result.Password + "</td></tr>");
$("#UserName").val("");
$("#Email").val("");
$("#Password").val("");
}
})
}
</script>
Can someone tell me what is happening?