Question

我正在开发一个项目，我想在单击按钮时将用户添加到列表中。用户可以在单击按钮之前输入名称和工资。

问题是：如何在单击按钮时调用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);
        }
    }
}

查看：

<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*@

型号：

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

将您的字段放在表单标记内，并将表单发布到AddUser操作方法

像这样更新您的索引视图。您可以看到此视图是对UserModel

的强类型

@model TimeIsMoney.Models.UserModel
@using(Html.BeginForm("AddUser","Home")
{
   @Html.TextBoxFor(s=>s.UserName)
   @Html.TextBoxFor(s=>s.Wage)
   <input  type="submit"/ >
}

如果您不想发布整个表单但在同一页面中显示列表而不刷新页面，您可以使用jQuery和ajax发布数据并获取响应并将其用于显示。

我们需要侦听提交按钮的click事件并阻止默认行为（发布表单），serialize表单并通过$ .post方法发送。当我们得到回应。使用html方法更新ID为userList

的div的内部html

@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>
}

确保您的AddUser方法返回没有布局的视图。

您可以转到AddUser.cshtml视图并将Layout设置为null。

@{
  Layout=null;
}

调用Controller方法并显示列表 - MVC

1 个答案: