将部分视图CheckBox绑定到模型属性

时间:2019-04-09 12:28:32

标签: c# asp.net-mvc razor

有一个数据库上下文,其中集合的元素是类VirtualServer。我正在尝试将其显示为表格,在其中的一列中,将有复选框应更改VirtualServer类中的IsSelectedForRemove属性

我的模特:

public class VirtualServer
    {
        public VirtualServer()
        {
            CreateDateTime = DateTime.Now.ToString();
        }

        public Int32 VirtualServerId { get; set; }

        public String CreateDateTime { get; set; }

        public String RemoveDateTime { get; set; }

        public Boolean IsSelectedForRemove { get; set; }
    }

我的主视图:

@using VirtualServerManager.Models

@model VirtualServersManagerContext

@{
    Layout = null;

    AjaxOptions ajaxOptions = new AjaxOptions
    {
        UpdateTargetId = "tableBody"
    };

}

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Virtual Servers Manager</title>

        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    </head>
    <body>
        <div>
            <h3>Virtual Servers Manager</h3>

            @using (Ajax.BeginForm("Index", ajaxOptions))
            {
                <table border="1">
                    <tr>
                        <td><p>VirtualServerId</p></td>
                        <td><p>CreateDateTime</p></td>
                        <td><p>RemoveDateTime</p></td>
                        <td><p>SelectedForRemove</p></td>
                    </tr>

                    <tbody id="tableBody">
                        @Html.Partial("GetVirtualServers", Model.VirtualServers)
                    </tbody>
                </table>
                <input type="submit" value="SendSelected"/>
            }
        </div>
    </body>
</html>

我的局部视图:

@using VirtualServerManager.Models

@model IEnumerable<VirtualServer>

@foreach (var server in Model)
{
    <tr>
        <td><p>@server.VirtualServerId</p></td>
        <td><p>@server.CreateDateTime</p></td>
        <td><p>@server.RemoveDateTime</p></td>
        <td>
            @Html.HiddenFor(m => server.VirtualServerId)
            @Html.CheckBoxFor(m => server.IsSelectedForRemove)
        </td>
    </tr>
}

我的控制器:

public class HomeController : Controller
    {
        public HomeController()
        {
            _dataBaseContext = new VirtualServersManagerContext();
        }

        public ActionResult Index()
        {
            return View(_dataBaseContext);
        }

        [HttpPost]
        public PartialViewResult Index(VirtualServersManagerContext model)
        {
            return PartialView("GetVirtualServers", _dataBaseContext.VirtualServers);
        }

        VirtualServersManagerContext _dataBaseContext;
    }

我希望当我更改复选框的状态并单击SendSelected按钮时,后操作索引附带一组具有IsSelectedForRemove属性的实际值的VirtualServer,但没有任何变化

1 个答案:

答案 0 :(得分:0)

您必须在部分视图内使用 @using(Ajax.BeginForm(“ Index”,ajaxOptions))。好吧,您无法以通常的方式执行此操作(用表格对行进行填充),因为表中的每一行都不能具有多个表格。幸运的是, HTML5 给了我们很好的工作,这是 form属性。 您应该尝试执行以下操作:

@using VirtualServerManager.Models

@model IEnumerable<VirtualServer>

@foreach (var server in Model)
{
    using (Ajax.BeginForm("Index", ajaxOptions), new {id=server.Id}) //set unique Id for the form
            {
    <tr>
        <td><p>@server.VirtualServerId</p></td>
        <td><p>@server.CreateDateTime</p></td>
        <td><p>@server.RemoveDateTime</p></td>
        <td>
            @Html.HiddenFor(m => server.VirtualServerId, new{form = @server.Id} ) //use the form id in the fields you want to update
            @Html.CheckBoxFor(m => server.IsSelectedForRemove, new{form = @server.Id})
            @Html.Hidden("IsSelectedForRemove", false)//Checkbox needs this Hmtl.Hidden(), to send false to the server if the checkbox is unchecked 
        </td>
    </tr>
    }
}

这应该可以解决问题。