I am trying to style razor syntax with materialize css. this is what I have right now. Which doesn't work, the check boxes cannot be checked.
<div class="form-group">
<div class="col-md-12">
#foreach (var item in (SelectList)ViewBag.RoleId)
{
<input type="checkbox" name="SelectedRoles" value="#item.Value" class="checkbox-inline" />
#Html.Label(item.Value, new { #class = "control-label" })
}
</div>
</div>
this is what I need to have, the issue is every check box that i check always checks Admin. I know its because the loop is naming the id and for the same for all check boxes. also I would like the closer to there check boxes
<div class="form-group">
<div class="col-md-12">
#foreach (var item in (SelectList)ViewBag.RoleId)
{
<input type="checkbox" name="SelectedRoles" value="#item.Value" class="filled-in" id="filled-in-box" />
#Html.Label(item.Value, new { #for = "filled-in-box" })
}
</div>
</div>
You can do add some unique property value and create unique id like "filled-in-box-"+item.id.
Here in example, I have suffixed item.id to create unique id.
#foreach (var item in (SelectList)ViewBag.RoleId)
{
<input type="checkbox" name="SelectedRoles" value="#item.Value" class="filled-in" id="filled-in-box-#item.id" />
#Html.Label(item.Value, new { #for = "filled-in-box-"+item.id })
}
OR
Just get rid of #HTML.Label and use
<label>
#item.Value <input type="checkbox" name="SelectedRoles" value="#item.Value" class="filled-in" />
</label>
Related
I am studying mvc and user interface.
I am trying to display and check user details and if a certain variable is true, I want a bootstrap toggle on icon to appear, and if false, I want it to be a toggle off icon. So if s.Active is true, instead of true, I want the on icon. Can anyone advise on this?
#foreach(var s in Model.Tickets) {
<tr>
<td>#s.Issue</td>
<td>#s.CreatedOn</td>
<td>#s.Active</td>
</tr>
}```
ok, you can use if with for
#foreach(var s in Model.Tickets) {
<tr>
<td>#s.Issue</td>
<td>#s.CreatedOn</td>
<td>
#if (s.Active)
{
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
<label class="custom-control-label" for="customSwitch1"></label>
</div>
}
else
{
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>
}
</td>
</tr>
}
this toggle work according to bootstrap, i used this
https://bootswatch.com/litera/
or you also could use your own toggle style
I've got a modal contact us window that pops up, with a drop down listing where you select a category. I'm trying to figure out a way to reset the selected item when the modal is closed either by the cancel button or the x button. So far the only way I've figured out how to do this is by quickly refreshing the page (see the CloseAndRefresh function near the bottom) when either of the buttons are clicked. This is not ideal because if someone has entered data and not submitted it, refreshing will erase it all. Is there an easier way to achieve this without refreshing?
Below is the code for my modal button
#Html.ModalButton( string.Empty, Rxcs.Contact + " " + Rxcs.Support, "none", "HelpContactSupport" )
<div id="page-contact-form">
X
#using (Html.BeginForm( "ContactHelp", "emails", FormMethod.Post ))
{
<div class="row">
#if (Request.IsAuthenticated && Session["PersonID"] != null)
{
<input type="hidden" name="address" value="#ViewContext.GetContext().people.Find(Session["PersonID"]).Email" />
}
else
{
<label for="address" class="medium-2 columns text-right">Email Address:</label>
<div class="medium-10 columns">
<input type="text" name="address" id="address" />
</div>
}
<div class="medium-2 hide-for-small columns"> </div>
<div class="medium-10 columns">
<p>#Rxcs.What_is_your_question</p>
</div>
<label class="medium-2 columns text-right" for="contactCat">
#Rxcs.Category
</label>
<div class="medium-10 columns" id="selectParent">
#Html.DropDownListing( "contactCat", new SelectList( ViewContext.GetContext().contact_category, "ID", "CategoryNameEnglish" ) )
</div>
<div id="bodyParent">
<input type="hidden" name="Subject" value="Contact Help on Page: #Request.Url.AbsoluteUri" class="col-md-10" />
<label class="medium-2 columns text-right" for="body">#Rxcs.Body.Replace( "English", "" ).Replace( "anglais", "" )</label>
<div class="medium-10 columns">
<textarea rows="10" cols="100" name="body" id="body"></textarea>
</div>
<input type="submit" value="#Rxcs.Send" class="button float-right" onclick="$('#contactCat').next().children().first().css('border', '1px solid #f00');return $('#contactCat').val() != '';" />
</div>
<a class="button inline float-left" onclick="CloseAndRefresh()">#Rxcs.Cancel</a>
<script>
function CloseAndRefresh() {
location.href = '#';
javascript: history.go(0);
}
</script>
<br />
</div>
}
</div>
#Html.ModalButtonEnd()
I did this by clearing dropdownlist selection and then assign it's text to the first text Here is a code snippet might be help you
dropdownname.ClearSelection();
dropdownname.Items.FindByText(Your Text).Selected = true;
I have the following code:
JS
.if(() => { return this.HasProvidedEitherSku1OrSku2 === false })
.isNotEmpty().withMessage(‘at least one sku is required')
.hasLengthBetween(0, 50)
.endIf()
.ensure('Sku2', (config) => {config.computedFrom(['Sku1'])})
.if(() => { return this.HasProvidedEitherSku1OrSku2 === false })
.isNotEmpty().withMessage(‘at least one sku is required’)
.hasLengthBetween(0, 50)
.endIf();
HTML
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">SKU</label>
<input disabled.bind="readonly" type="text" class="form-control" value.bind="Sku1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label"> SKU</label>
<input disabled.bind="readonly" type="text" class="form-control" value.bind="Sku2">
</div>
</div>
withMessage seens to react differently when contained within an if statement. rather than adding a 'has-warning' to the form-group. It just adds:
<p class="help-block **aurelia-validation-message**">at least one sku is required</p>
How do I force a 'has-warning'? Or have something close to an if statement. If p class = "" then grab label above and input below.
I am currently building a survey/questionnaire app where the admin user can create questionnaires with multiple sections and questions under those sections.
Response:
public ActionResult AnswerQuestions(int ID, Response model)
{
model.Answers = model.Answers.Where(a => !String.IsNullOrEmpty(a.TextAnswer) || a.RatingAnswer.HasValue).ToList();
model.UserID = User.Identity.GetUserId();
model.QuestionnaireID = ID;
db.Responses.Add(model);
db.SaveChanges();
return RedirectToAction("Details", "Responses", new { id = ID });
}
At the moment i am using the above code to gather the answers from each question and store it but it is creating a new response each time. Can someone please help me so that I could use an existing "response" and still push the answers to the database.
View Code :
<form action="#Url.Action("AnswerQuestions", "Responses", new { id = Model.QuestionnaireID })" method="post">
<div class="well well-small">
<h4>Questions - #ViewBag.ResponseID</h4>
</div>
<ul class="unstyled bordered skip-first">
#foreach (var question in Model.SectionVM.Questions)
{
<li class="row">
<div class="span9">
<input type="hidden" name="Answers.Index" value="#question.QuestionID" />
<input type="hidden" name="Answers[#question.QuestionID].QuestionID" value="#question.QuestionID" />
#Html.Raw(question.Question1)
</div>
<div class="span3">
#if (question.QuestionType == "Text")
{
<input class="span3" type="text" name="Answers[#question.QuestionID].TextAnswer" />
}
#if (question.QuestionType == "Rating")
{
<input type="radio" name="Answers[#question.QuestionID].RatingAnswer" value="1"/><p>Don’t Know</p>
<input type="radio" name="Answers[#question.QuestionID].RatingAnswer" value="2" /><p>Not us</p>
<input type="radio" name="Answers[#question.QuestionID].RatingAnswer" value="3" /><p>Somewhat true of us</p>
<input type="radio" name="Answers[#question.QuestionID].RatingAnswer" value="4" /><p>Mostly true of us</p>
<input type="radio" name="Answers[#question.QuestionID].RatingAnswer" value="5" /><p>That’s us</p>
}
</div>
</li>
}
</ul>
I am pretty advanced in C# but a newcomer in the world of ASP.NET.
My HomeController.cs:
public ActionResult Index()
{
// tuple -> item1 = key string / item2 = assigned list
var configList = new List<Tuple<string, List<string>>>();
configList = fillItWithSomeData(..)
ViewBag.ConfigSettings = configList;
return View();
}
My Index.cshtml:
<div>
<div class="row">
#foreach (var elements in ViewBag.configSettings)
{
<div class="col-md-8 checkbox">
/*I NEED A BUTTON HERE*/
<label>
<input type="checkbox">#elements.Item1
</label>
</div>
foreach (var listElement in elements.Item2)
{
<div class="col-md-8 col-md-offset-1 checkbox">
<label>
<input type="checkbox">#listElement
</label>
</div>
}
}
</div>
</div>
Every key string in my list contains a list of strings. (look at var configList)
In my view I want to have a button for each key string which should be able to open or close the assigned list of the respective key string. I currently use ASP.NET-MVC. How can I program that? In C# or do I need to use JS for that? I really have no idea. Thanks in advance.
You can use bootstrap Accordion or bootstrap Collapsible panel.
below code using bootstrap Collapsible panel.
<div>
<div class="row">
#foreach (var elements in ViewBag.configSettings)
{
<div class="col-md-8 checkbox">
/*I NEED A BUTTON HERE*/
<label>
<input type="checkbox" data-toggle="collapse" data-target="##elements.Item1">#elements.Item1
</label>
</div>
foreach (var listElement in elements.Item2)
{
<div class="col-md-8 col-md-offset-1 checkbox collapse" id="#elements.Item1">
<label>
<input type="checkbox">#listElement
</label>
</div>
}
}
</div>