呼叫控制方法和显示列表 - MVC [英] Calling Controller method and displaying list - MVC

问题描述

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

现在的问题是：我如何调用控制器方法，并单击按钮时显示列表

？

控制器：

 命名空间TimeIsMoney.Controllers
{
    公共类HomeController的：控制器
    {        清单＆LT;＆的usermodel GT;名单=新名单，LT;＆的usermodel GT;（）;
        公众的ActionResult指数（）
        {
            返回查看（）;
        }        公众的ActionResult ADDUSER（用户的usermodel）
        {
            VAR列表=会话[myUsers]作为名单＆LT;的usermodel取代;
            list.Add（用户）;
            返回查看（名单）;
        }
    }
}
 

查看：

 ＆LT; D​​IV CLASS =COL-MD-12行＆GT;
    ＆LT;形式为GT;
        ＆LT;输入类型=文本占位符=名称/＆GT;
        ＆LT;输入类型=数字占位符=计时工资/＆GT;
        ＆LT;输入类型=按钮值='@ Url.Action（ADDUSER）window.location.href ='添加的onclick =/＆GT;
    ＆LT; /表及GT;
＆LT; / DIV＆GT;
 @ *下面是其中列表应该被显示* @
 

型号：

 命名空间TimeIsMoney.Models
{
    公共类的usermodel
    {
        [需要]
        [数据类型（DataType.Text）
        [显示名称（用户名）]
        公共字符串用户名{获得;组; }        [需要]
        [数据类型（DataType.Text）
        [显示名称（工资）]
        公共字符串工资{搞定;组; }
    }
}
 

解决方案

把你的域的表单标签内张贴的形式向 ADDUSER 操作方法

更新你这样的索引视图。你可以看到，这个观点是强类型的的usermodel

  @model TimeIsMoney.Models.UserModel
@using（Html.BeginForm（ADDUSER，家）
{
   @ Html.TextBoxFor（S = GT; s.UserName）
   @ Html.TextBoxFor（S = GT; s.Wage）
   ＆LT;输入类型=提交/＆GT;
}
 

如果你不想张贴整个表单，但显示在同一页面列表而无需刷新页面，则可以使用jQuery和AJAX发布的数据，并获得响应，并用它来显示。

我们需要监听提交按钮和prevent的click事件的默认行为（张贴形式），连载的形式，并通过$发送.POST方法。当我们得到回应。使用 HTML 方法来更新id为股利用户列表

的内部HTML

  @model TimeIsMoney.Models.UserModel
@using（Html.BeginForm（ADDUSER，家）
{
   @ Html.TextBoxFor（S = GT; s.UserName）
   @ Html.TextBoxFor（S = GT; s.Wage）
   ＆LT;输入ID =btnSubmit按钮类型=提交/＆GT;
}
＆LT; D​​IV ID =用户列表/＆GT;
@section脚本
{
 ＆LT;脚本＆GT;
   $（函数（）{
      $（＃btnSubmit按钮）。点击（函数（五）{
         亦即preventDefault（）;         VAR _form = $（本）.closest（形式）;         $。员额（_form.attr（行动），_ form.serialize（）函数（响应）{
            $（＃用户列表）HTML（响应）;
         }）;      }）;
   }）;
 ＆LT; / SCRIPT＆GT;
}
 

请确保您的 ADDUSER 方法返回一个视图没有布局。

您可以到 AddUser.cshtml 查看和设置布局为null。

  @ {
  布局= NULL;
}
 

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


}

解决方案

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

这篇关于呼叫控制方法和显示列表 - MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！