CODEWITHSUNDEEP
javascriptajaxasp.net-mvccheckbox
Ade Zaenudin
Ade Zaenudin

Reputation: 31

Get Value Checkbox Checked in MVC using Ajax Post

can somebody help me..

this is my Code:

Index.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>jQuery With Example</title>
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        $(function () {

            $('.chkview').change(function () {
                $(this).closest('tr').find('.chkitem').prop('checked', this.checked);
            });

            $(".chkitem").change(function () {
                var $tr = $(this).closest('tr'), $items = $tr.find('.chkitem');
                $tr.find('.chkview').prop('checked', $items.filter(':checked').length == $items.length);
            });
        });

        function Save() {
            $.ajax({
                url: @Url.Action("Index", "Home" , "Index"),
                type: "POST",
                data: formData ,
                dataType: "json",
                success: function(data){
                    alert(data.RoleID)
                },
                error: function(e){
                    debugger;
                }
        }

</script>
</head>
<body>
    <h2>Access Control-Home</h2>

    <br />
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { RoleID="RoleID" }))
{
    <input type="hidden" name="RoleID" value="1" id="RoleID" />
    <table id="mytable">
        <tr>
            <td>View</td>
            <td>Insert</td>
            <td>Update</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>Administrator</td>
            <td>
                <input type="checkbox" class="chkview chkview-1" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-1" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-1" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-1" />
            </td>
        </tr>
        <tr>
            <td>Free User</td>
            <td>
                <input type="checkbox" class="chkview chkview-2" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-2" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-2" />
            </td>
            <td>
                <input type="checkbox" class="chkitem chkitem-2" />
            </td>
        </tr>
    </table>
    <br />

        <button type="submit" class="buttons buttons-style-1" onclick="Save()">Save</button>
}

</body>
</html>

HomeController.cs

[HttpPost]
public ActionResult Index(string RoleID)
{
   var _roleID = RoleID;
   return View();
}

i want to ask 2 question.

  1. how i can parsing value of list checked checkbox using ajax? i want parsing classname of checkbox which i checked example i need list of array if i checked row administrator, { 'chkinsert-1','chkupdate-2' }

  2. how i can get value collection of array in controller post? example: public ActionResult Index(string RoleID, array[] collChecbox) contents of collChecbox = { 'chkinsert-1','chkupdate-2'} in accordance with the user checked of checkbox input.

can somebody help me??

Upvotes: 0

Views: 4054

Answers (1)

Ashwini Verma
Ashwini Verma

Reputation: 7525

Why don't you use Ajax.BeginForm() this makes so easy to send posted form value.

Also, you should create proper model first.

MODEL

    public class UserRole
    {
    public Administrator Administrator { get; set; }
    public FreeUser FreeUser { get; set; }
    }
    public class Administrator
    {
    public int Checkbox1 { get; set; }
    }
    public class FreeUser
    {
    public int Checkbox1 { get; set; }
    }

Do following in View.

    @model Model.UserRole
    <div id="result"></div>
    @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
    {
        <input type="hidden" name="RoleID" value="1" id="RoleID" />
        <table id="mytable">
            <tr>
                <td>View</td>
                <td>Insert</td>
                <td>Update</td>
                <td>Delete</td>
            </tr>
            <tr>
                <td>Administrator</td>
                <td>
                    @Html.CheckBoxFor(m => m.Administrator.Checkbox1)
                </td>
            </tr>
            <tr>
                <td>Free User</td>
                <td>
                    @Html.CheckBoxFor(m => m.FreeUser.Checkbox1)
                </td>
            </tr>
        </table>
        <br />
        <button type="submit" class="buttons buttons-style-1" onclick="Save()">Save</button>
    }

Controller action

    [HttpPost]
    public ActionResult Index(UserRole model)
    {
        return View();
    }

Also don't forget to include ajax library.

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

Upvotes: 1

Related Questions