CODEWITHSUNDEEP
c#asp.net-mvcrazor
Сергей
Сергей

Reputation: 1

Binding partial view CheckBox to model property

There is a database context in which the element of the set is the class 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

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

Upvotes: 0

Views: 198

Answers (1)

Pedro Figueiredo
Pedro Figueiredo

Reputation: 2452

You must use the @using (Ajax.BeginForm("Index", ajaxOptions)) inside your Partial View. 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. 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.

Upvotes: 0

Related Questions