Tuesday, 7 November 2017

Bind CheckBox Using Model In MVC


Introduction

In this article we will learn how to bind checkbox in Asp.net MVC using Model class. Bind checkbox using model using MVC. 

ASP.Net MVC does not have an in-built CheckBox control and hence using the SelectListItem class as Model, a Custom CheckBox has been populated from Model Class.
                   Arrange Distinct Elements Of A List In Ascending Order Using LINQ 

Model :- Here is my model class code named as CheckboxListModel. Here i use SelectListItem to store the values of total Games.
public class CheckBoxListModel
    {
        public IList<string> SelectedGames { get; set; }
        public IList<SelectListItem> AvailableGames { get; set; }

        public CheckBoxListModel()
        {
            SelectedGames = new List<string>();
            AvailableGames = new List<SelectListItem>();
        }
    }
 Controller:- Here is my controller class code where two methods used. One is Controller default one Index method by which i post the List data to View. and Other one is GetGames method which i filled static Data.

Note : you can use database data as well by replacing the static data from this method.

public class CheckBoxListController : Controller
{
    // GET: CheckBoxList
    public ActionResult Index()
    {
        var model = new CheckBoxListModel
        {
            AvailableGames = GetGames()
        };
        return View(model);
    }

    private IList<SelectListItem> GetGames()
    {
        List<SelectListItem> objList = new List<SelectListItem>() { 
        new SelectListItem {Text = "Cricket", Value = "Cricket"},
        new SelectListItem {Text = "Football", Value = "Football"},
        new SelectListItem {Text = "Table Tennis", Value = "Table Tennis"},
        new SelectListItem {Text = "Hockey", Value = "Hockey"},
    };
        return objList;
    }
}
 View:- The last one is View. So here is my View code in which the very first line the MVCDemo.Models.CheckBoxListModel class is declared as Model for the View. 

he View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside this form a foreach loop is used to bind the iterated List of data to the Checkbox.

            What is WebAPI and why do we need API's
@model MVCDemo.Models.CheckBoxListModel
@{
    ViewBag.Title = "Index";
}

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
 <div class="container">
     @using (Html.BeginForm("Index", "Home"))
     {
         foreach (var item in Model.AvailableGames)
         {
           <div class="checkbox">
               <label>
                   <input type="checkbox"
                          name="SelectedFruits"
                          value="@item.Value" /> @item.Text
                   </label>
               </div>
         }
     }
 </div>
</body>
</html>
Output:

No comments:

Post a Comment