简体   繁体   中英

how to use multiple Checkbox in ASP.Net mvc3 Razor

In my ASP.Net MVC3 Razor project i have to implement a customer registration form(Screen Shot Attached).In that form , a single entity (say :purpose of doing DMIt) contains more than one answer.So i use checkbox to select the multiple or single answer.I have the view page and also a Model.How to code the View page to select multiple checkbox and also in Controller.

页面截图

Controller Code

 public ActionResult CustomerRegistration()
        {
            return View();
        }

Model Code

namespace Elixir.Models
{
    [Table("tbl_ElixirCustomer")]
    public class Customer
    {
        [Key]
        public int CusId { get; set; }
        public string Name { get; set; }
        public int age { get; set; }
        public int Gender { get; set; }
        public string FathName { get; set; }
        public string MothName { get; set; }
        public string OrgSchooName { get; set; }
        public string Address { get; set; }
        public string city { get; set; }
        public string State { get; set; }
        public string PIN { get; set; }
        public string tele { get; set; }
        public string Mob { get; set; }
        public string Email { get; set; }
        public string Web { get; set; }
        public string Purpose { get; set; }
        public string brief { get; set; }

    }

    public class CustomerViewModel
    {
        public string Purpose { get; set; }
        public int Id { get; set; }
        public bool IsChecked { get; set; }

    }
}

View Code

 <div class="col-lg-10">@Html.TextBoxFor(Model => Model.Mob, new { @class = "form-control" })</div>
                        <label class="col-lg-2 control-label">
                            Email</label>
                        <div class="col-lg-10">@Html.TextBoxFor(Model => Model.Email, new { @class = "form-control" })</div>
                        <label class="col-lg-2 control-label">
                            Web Site</label>
                        <div class="col-lg-10">@Html.TextBoxFor(Model => Model.Web, new { @class = "form-control" })</div>

                        <label class="col-lg-2 control-label">
                            Purpose of doing DMIT</label>
                        <div class="col-lg-10">
                            <div class="styled-chekbox">
                                <input type="checkbox" checked class="icheck-box-flat">
                            </div>
                            <span class="checkbox-label">Career Planning</span>
                            <div class="styled-chekbox">
                                <input type="checkbox" checked class="icheck-box-flat">
                            </div>
                            <span class="checkbox-label">Personel</span>
                            <div class="styled-chekbox">
                                <input type="checkbox" checked class="icheck-box-flat">
                            </div>
                            <span class="checkbox-label">Relationship</span>
                            <div class="styled-chekbox">
                                <input type="checkbox" checked class="icheck-box-flat">
                            </div>
                            <span class="checkbox-label">Parenting</span>
                            <div class="styled-chekbox">
                                <input type="checkbox" checked class="icheck-box-flat">
                            </div>
                            <span class="checkbox-label">Activity Plan for children</span>
                            <div class="styled-chekbox">
                                <input type="checkbox" checked class="icheck-box-flat">
                            </div>
                            <span class="checkbox-label">Stress Management</span>
                        </div>
                        <label class="col-lg-2 control-label">
                            Any Challenges</label>
                        <div class="col-lg-10">@Html.TextAreaFor(model => model.brief, new { @class = "tinymce-simple span12", @row = "170", @cols = "45", @width = "40%" })</div>

                         <div class="col-lg-2 control-label"></div>
 <div class="col-lg-10">

                            @*<input type="button" class="" />*@ @* <button type="submit" class = "btn btn-success">@Html.ActionLink("Save", "EmployeeRegistration", "Home")</button>*@
                            @* <button type="submit" >@Html.ActionLink("Save", "EmployeeRegistration", "Home",  new { @class = "btn btn-success" })</button>*@
                            <input type="submit" class="btn btn-success" value="Save" />
                            <button class="btn btn-success">
                                Clear</button>
                            <button class="btn btn-success">
                                Cancel</button>
                                </div>

Create a Boolean property in model

Model:

public String Question{ get; set; }
public Boolean Options{ get; set; }
public String OptionContent{ get; set; }
...so on

Pass this model into the view and then use EditorFor html helper.

@using (Html.BeginForm("actionname", "Home", FormMethod.Post, null)){ 
<div>
    @Html.LabelFor(model => model.Question)
</div>
<div>
    @Html.EditorFor(model => model.Option)
    @Html.LabelFor(model => model.OptionContent)
</div>
}

In CustomerViewModel you can have separate properties for every option

        public bool CareerPlanning { get; set; }
        public bool Personal{ get; set; }
        public bool RelationShip{ get; set; }
        and So on.....

Then in view you can have field for these properties

     @Html.CheckBoxFor(Model => Model.CareerPlanning )<span>  Career Planning </span>
     @Html.CheckBoxFor(Model => Model.Personal)<span>  Personal </span>
     @Html.CheckBoxFor(Model => Model.RelationShip) <span> RelationShip</span>
     and So on.....

Now in controller you need to modify Purpose depending on all checkbox value

 StringBuilder sb=new StringBuilder();
   if(model.CareerPlanning)
     sb.Append("Carrer Planning");
   if(model.Personal)
     sb.Append("-Personal");
 and so on....

and at the end

model.Purpose=sb.ToString();

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM