Dynamically Checkboxes in MVC?

[vikram]

Hello there,

How to create Dynamically Checkboxes after fetching the records from database ?
and can get the selected value too?


thanks & regards
vik

[Baidaly]

Hello!

You should fetch data in Controller and send it to view as a Model or using ViewBag. In the View you should iterate through passed collection of records:

@{
    var X = Html.X();
    var checkboxesLabels = new List<string> { "One", "Two", "Three" };
}

@Html.X().ResourceManager().ScriptMode(ScriptMode.Debug)

@(X.FormPanel()
    .Items(i =>{
        foreach (string label in checkboxesLabels)
        {
            i.Add(new Checkbox{ BoxLabel = label });
        }
    })
)

[vikram]

Hello!

You should fetch data in Controller and send it to view as a Model or using ViewBag. In the View you should iterate through passed collection of records:

@{
    var X = Html.X();
    var checkboxesLabels = new List<string> { "One", "Two", "Three" };
}

@Html.X().ResourceManager().ScriptMode(ScriptMode.Debug)

@(X.FormPanel()
    .Items(i =>{
        foreach (string label in checkboxesLabels)
        {
            i.Add(new Checkbox{ BoxLabel = label });
        }
    })
)

And how can i get the values ? like which one has selected on button click ...???


thanks & regards
vikram

[Baidaly]

The logic should be similar to the logic of this sample: http://mvc.ext.net/#/Form_Groups/Basic/

[vikram]

The logic should be similar to the logic of this sample: http://mvc.ext.net/#/Form_Groups/Basic/

Thank you Baidaly, for your help :)

Well with your solution i am able to display the check boxes dynamically but
I wanted to you know that while creating check boxes dynamically at least 1000+ ,browser response got hanged approximately 4 to 6 min and after that it displays the check boxes ( i used TableLayoutConfig with columns=4) and also i tried it with columns=1 but the response was the same.

So, i adopted another method and used JavaScript to create check boxes dynamically which took less than 2 to 3 sec. to display the check boxes more than a 1200+.

With Regards
Vik

[Baidaly]

We would appreciate if you will share your solution with the community. It can be helpful for somebody.

[vikram]

Thank you Baidaly, for your help :)

Well with your solution i am able to display the check boxes dynamically but
I wanted to you know that while creating check boxes dynamically at least 1000+ ,browser response got hanged approximately 4 to 6 min and after that it displays the check boxes ( i used TableLayoutConfig with columns=4) ans also i tried with columns=1 but the response was the same.

So, i adopted another method and used JavaScript to create check boxes dynamically which took less than 2 to 3 sec. to display the check boxes more than a 1200+.
With Regards
Vik

.CSS

<style>
		.checkDiv
		{
			width: 90px;
			border: solid 1px silver;
			display: inline-block;
			margin: 5px;
			background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f0f0f0),color-stop(100%,#d7d7d7));
			background-image: -moz-linear-gradient(center top , rgb(240, 240, 240), rgb(215, 215, 215));
			background-image: -o-linear-gradient(center top , rgb(240, 240, 240), rgb(215, 215, 215));
		}
	</style>

.CSHTML page

var checkAll = function (value) {
			var chkList = $("#checkboxDiv input:checkbox");
			for (i = 0; i < chkList.length; i++) {
				document.getElementById(i).checked = value
		}
	}

function getcheckboxtext() {
			var chkList = $("#checkboxDiv input:checkbox");
			var arrayList= '';
			$.each(chkList, function () {
				if ($(this).is(":checked") == true) {
					arrayList+= $(this).parent().text() + ",";
				}
			});
			alert(arrayList);
		
		}

	function CreateCheckboxes(str) {
			var returnStr = "";
			for (i = 0; i < str.length; i++) {
returnStr += '<div class="checkDiv"><input ' + str1[i] + ' type="checkbox" id="' + i + '" value="' + str[i] + '" />' + str[i] + '</div>';
			}
			$("#checkboxDiv").html(returnStr + '<br/><br/><center><input type="button"  name="BtnCheckAll" value="Check All" onclick="checkAll(true);"/> <input type="button" name="BtnUnCheckAll" value="UnCheck All" onclick="checkAll(false);"/> <input type="button" name="BtnSave" value="Show Selected one" onclick="getcheckboxtext();"/></center>');
		}

	</script>

@(X.Container()
				.Content(@<text><div id="checkboxDiv">
				</div></text>)

.Controller

public ActionResult RenderView()
{
//you can pass records from database using for loop.
List<string> rec;
			rec.Add("1st");
			rec.Add("2nd");
			rec.Add("3rd");
			rec.Add("4th");
			rec.Add("5th");
		
string[] aa = rec.ToArray();
X.Js.Call("CreateCheckboxes", new object[] { aa });
return PartialView("~/Views/yourviewname.cshtml", yourmodelname);

		}

thanks
vik