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

Question

There is a database context in which the element of the set is the class VirtualServer. 有一个数据库上下文，其中集合的元素是类VirtualServer。 I am trying to present it as a table, in one of the columns of which there will be checkboxes that should change the IsSelectedForRemove property in the VirtualServer class 我试图将它呈现为一个表，在其中一列中将有一些复选框，应该更改VirtualServer类中的IsSelectedForRemove属性

My model: 我的模特：

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

My main view: 我的主要观点：

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

My partial view: 我的部分观点：

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

My controller: 我的控制器：

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

I expect that when I change the state of the checkboxes and click the SendSelected button, the post action Index comes up with a set of VirtualServer with the actual values of the IsSelectedForRemove property, but nothing changes 我希望当我更改复选框的状态并单击SendSelected按钮时，post action Index会出现一组VirtualServer，其中包含IsSelectedForRemove属性的实际值，但没有任何更改

Answer 1

You must use the @using (Ajax.BeginForm("Index", ajaxOptions)) inside your Partial View. 您必须在Partial View中使用@using（Ajax.BeginForm（“Index”，ajaxOptions）） 。 Well, you can't do this the usual way (surrouding your row with the form), because you can´t have several forms for each row inside a table. 好吧，你不能以通常的方式做到这一点（用表格覆盖你的行），因为你不能在表格中的每一行有几个表格。 Luckly, HTML5 gives us a good work arouund, which is the form attribute. 幸运的是， HTML5为我们提供了一个很好的工作，即表单属性。 You should try to do something like this: 你应该尝试做这样的事情：

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

This should do the trick. 这应该可以解决问题。

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

问题描述

1 个解决方案

解决方案1
0 2019-04-09 13:36:26

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

问题描述

1 个解决方案

解决方案1 0 2019-04-09 13:36:26

解决方案1
0 2019-04-09 13:36:26