Calling Controller method and displaying list - MVC [duplicate] - asp.net-mvc

Question

This question already has an answer here:
Adding users to a list MVC
(1 answer)
Closed 7 years ago.
I'm working a a project where I want to Add users to a list when a button is clicked.
The user can input name and wage before clicking on the button.
The question is: How do I call the Controller method and display the list when the button is clicked?
Controller:
namespace TimeIsMoney.Controllers
{
public class HomeController : Controller
{
List<UserModel> list = new List<UserModel>();
public ActionResult Index()
{
return View();
}
public ActionResult AddUser(UserModel user)
{
var list = Session["myUsers"] as List<UserModel>;
list.Add(user);
return View(list);
}
}
}
View:
<div class="col-md-12 row">
<form >
<input type="text" placeholder="Name" />
<input type="number" placeholder="Hourly wage" />
<input type="button" value="Add" onclick="window.location.href='#Url.Action("AddUser")'" />
</form>
</div>
#*Here is where the list is supposed to be displayed*#
Model:
namespace TimeIsMoney.Models
{
public class UserModel
{
[Required]
[DataType(DataType.Text)]
[DisplayName("Username")]
public string UserName { get; set; }
[Required]
[DataType(DataType.Text)]
[DisplayName("Wage")]
public string Wage { get; set; }
}
}

Answer 1

Put your fields inside a form tag and post the form to the AddUser action method
Update your Index view like this. You can see that this view is strongly typed to the UserModel
#model TimeIsMoney.Models.UserModel
#using(Html.BeginForm("AddUser","Home")
{
#Html.TextBoxFor(s=>s.UserName)
#Html.TextBoxFor(s=>s.Wage)
<input type="submit"/ >
}
If you do not want to post the entire form but show the list in the same page without refreshing the page, you may use jQuery and ajax to post the data and get the response and use it for displaying.
We need to listen for the click event of the submit button and prevent the default behavior (posting the form), serialize the form and send it via $.post method. When we get a response. Use html method to update the inner html of the div with id userList
#model TimeIsMoney.Models.UserModel
#using(Html.BeginForm("AddUser","Home")
{
#Html.TextBoxFor(s=>s.UserName)
#Html.TextBoxFor(s=>s.Wage)
<input id="btnSubmit" type="submit"/ >
}
<div id="userList" />
#section Scripts
{
<script>
$(function(){
$("#btnSubmit").click(function(e){
e.preventDefault();
var _form=$(this).closest("form");
$.post(_form.attr("action"),_form.serialize(),function(response){
$("#userList").html(response);
});
});
});
</script>
}
Make sure your AddUser method returns a view without layout.
you may go to the AddUser.cshtml view and set the Layout to null.
#{
Layout=null;
}