Single select with chosen with razor - razor

So i have implemented Chosen with my project and worked great with multi select but i want to add that for simple dropdown. I have total of 80 entry in dropdown so need the search function of chosen..this is my code.
<div class="editor-label">
<span style="color: red;">*</span> <strong>Select Therapist:</strong>
</div>
<div class="editor-field">
#Html.DropDownList("TherapistList", Model.TherapistList
, new
{
#class = "chzn-select",
data_placeholder = "Choose Therapist",
}
)
</div>
and
<script >
$(".chzn-select").chosen({
allow_single_deselect: false,
search_contains: false,
no_results_text: "Oops, nothing found!"
});
</script>
i have addded the CSS and .JS reference on top. Its working fine with multiselet when i add #Html.ListBox("TherapistList", Model.TherapistList
but i want single select with search option as they display on website.
thanks in advance.

If you don't call #Html.Listbox but #Html.DropDown you will get a single select chosen.
#Html.DropDownList("TherapistList", Model.TherapistList, new {
#class = "chzn-select",
data_placeholder = "Choose Therapist",
}
)

Related

MVC Placeholder in Dropdownlist

How can I put a placeholder in a dropdownlist? I already had to search, but I still could not find the solution.
HTML
<div class="wrap-input100 rs1-wrap-input100 validate-input">
<span class="label-input100">Room</span>
#Html.DropDownList("ID_Room", null, htmlAttributes: new { #class = "focus-input100" })
<span class="focus-input100"></span>
</div>
#Html.DropDownList("ID_Room", null, "placeholder" , new { #class = "focus-input100" })
Also. you don't need to htmlAttributes. Just having new {} is fine

Passing parameter to #Url.Action

I am trying to pass two parameters through a #Url.Action for a submit button. However, the values are not being passed.
I have index view with a dropdown field and a Save button. What I would like for the user to be able to do is select a dropdown value and Save the value. However, no matter how I access my function the values are null. I have tried passing in parameters and binding the data.
Currently my view looks like -
<h3>Burn Conditions</h3>
<div class="form-group">
#Html.LabelFor(model => model.ConditionsReasonsID, "Condition", new { #class = "control-label col-md-2"})
<div class="col-md-10">
#Html.DropDownList("ConditionsReasonsID", String.Empty)
#ViewBag.conditionsReasons
#Html.ValidationMessageFor(model => model.ConditionsReasonsID)
<a href= "#Html.Raw(#Url.Action("CreateCondition", "RequestedBurns", new { requestedBurnsID = ViewBag.RequestedBurnsID, conditionsReasonsID = Model.ConditionsReasonsID }))">
<input type="submit" value="Save Condition" />
</a>
</div>
</div>
in my controller I have
public ActionResult CreateCondition(int requestedBurnsID, int conditionsReasonsID)
{
BurnDecision burnDecision = new BurnDecision();
burnDecision.RequestedBurnsID = requestedBurnsID;
burnDecision.ConditionsReasonsID = conditionsReasonsID;
//Find BurnSiteID
RequestedBurn requestedBurn = db.RequestedBurns.Find(burnDecision.RequestedBurnsID);
ViewBag.burnSitesID = requestedBurn.BurnSitesID;
db.BurnDecisions.Add(burnDecision);
db.SaveChanges();
return RedirectToAction("Index", "RequestedBurns", new { burnSitesID = ViewBag.burnSitesID, requestedBurnsID = burnDecision.RequestedBurnsID });
}

HTML autocomplete username causing password field to be filled in, once user already logged in

Very strange issue is occurring and has to do with my browsers capability to remember passwords. So I have a few login details and have rememberd them upon login. I move to the area of the site where I manage users. There is a field for their initials, and after that is a password field. If I double click in the initials input field I get a list of a all usernames that I login to the site with. If I select one it will autocomplete the below password field with the relevant stored password.
My Question is how can I disable this once logged in? I set the form and both inputs autocomplete attribute to off, still no success. I know it has to do with the fact that the browser (FireFox) see's a password field and "Assumes" the prior field is the username field. This is a extremely huge assumption. If I change the input type to text the autocompleteing does not work. So its all based on the fact that its a password field and the prior text input must be the username. The changing of the fields ids don't change anything
Below Is the form and fields:
<div class="row">
#using (Html.BeginForm("UserCreate", "Account", FormMethod.Post, new { id = "UserCreateForm", autocomplete = "off" }))
{
<div class="col-md-6">
#Html.LabelFor(model => model.Initial, htmlAttributes: new { #class = "col-md-4" })
<div class="col-md-8 popovers" data-container="body" data-trigger="hover"
data-placement="top" data-content="Required">
#Html.EditorFor(model => model.Initial, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
#Html.ValidationMessageFor(model => model.Initial, "", new { #class = "text-danger" })
</div>
</div>
<!--/span-->
<div class="col-md-6">
#Html.LabelFor(model => model.Password, htmlAttributes: new { #class = "col-md-4" })
<div class="col-md-8 popovers" data-container="body" data-trigger="hover"
data-placement="top" data-content="Required">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<!--/span-->
}
</div>
Thanx for any help!
Sorry I found a workaround. Still not ideal but does the job
<input type="text" style="display:none">
<input type="password" style="display:none">
Pretty much fools the browser.

How to change Razor CheckboxFor alignment

The standard ASP.NET MVC template in Visual Studio 2013 generates a page Register.cshtml that defines the UI for registering new user into the system. I extended it to add a checkbox for "I accept the terms." Here is the code snippet:
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
#Html.CheckBoxFor(m => m.AcceptTerms, new { #class = "form-control" })
#Html.Label("I accept", new { #class = "control-label" })
</div>
</div>
The idea is that a chexkbox gets displayed below the password editbox. The text must get displayed on the right side of the checkbox.
Here is the partial image of how the output looks:
As you can see, the checkbox is getting center-aligned and "I accept" is flowing to the next line.
How can I keep the checkbox and the label together and also ensure that the checkbox is left-aligned with the editbox above it? Regards.
Do this...
<label>
I accept
#Html.CheckBoxFor(m => m.AcceptTerms)
</label>
Try this ... hope this will help
<div class="checkbox">
#Html.CheckBoxFor(model => model.IsMobileView, new { htmlAttributes = new { #class = "form-control pull-left" } })
</div>
It seems that 'label' or/and input type="checkbox" have the display type block.
To fast check try add style="display: inline-block" to both Label and CheckBoxFor. If I'm right, then you can correct your .css-files.

Contents not saving when edited in view

I hope there is a simple answer to this problem which I'm just not seeing.
I am developing an asp.net MVC 4 application.
Basically I want to allow the user to edit the contents of a previous entry(newsArticle) they would have made (sounds easy)
This entry consist's of a date, two blocks of text, (Title and body) an img.
These entries correspond to properties of a model, which also include, ID , img name and status.
I have successfully manged to enter, save and retrieve all the data when needed.
However when I run the program and try and edit a previous entry it only saves the Title and the body text and removes the values that were there, for date, img, img name and status.
Is this related to the textboxes used in the view ? Why are those values kept and the others not.
Just to point out when I run and select an entry all the data is shown correctly but when I click save values are removed (date, img name , status)
Any thoughts.....
Controller....
public ActionResult Edit(int id)
{
String encodedBody;
NewsArticle newsArticle = _newsArticle.Get(id);
encodedBody = HttpUtility.HtmlDecode(newsArticle.Body.ToString());
newsArticle.Body = encodedBody;
return View(newsArticle);
}
// POST: /Article/Edit/5
[HttpPost]
public ActionResult Edit(NewsArticle newsArticle)
{
try
{
if (ModelState.IsValid)
{
db.Entry(newsArticle).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
}
catch (System.Data.DataException)
{
//Log th error(add a variable name after DataExpection)
ModelState.AddModelError("", "Unable to save changes. Try again, and if the problem persists see your system administrator.");
}
return View(newsArticle);
}
View.......
#using (Html.BeginForm("Edit", "Admin", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal", id = "newsEditForm"}))
{
#Html.ValidationSummary()
#Html.HiddenFor(model => model.ID)
<div class="control-group">
<label class="control-label">Posted on :</label>
<div class="controls">
<span class="text">#Model.DateCreated.Value.ToShortDateString()</span>
#*#Html.LabelFor(n => n.DateCreated)*#
</div>
</div>
<div class="control-group">
<label class="control-label">#Html.LabelFor(n => n.Title)</label>
<div class="controls">
#Html.TextBoxFor(n => n.Title, new { #class = "span4 m-wrap", rows = 1})
</div>
</div>
<div class="control-group">
<label class="control-label">#Html.LabelFor(n => n.Body)</label>
<div class="controls">
#Html.TextAreaFor(n => n.Body, new { #class = "span12 ckeditor m-wrap", rows = 4 })
</div>
</div>
<div class="control-group">
<label class="control-label">Selected Image </label>
<label class="controls">#Html.DisplayTextFor(model => model.ImageName)</label>
#* <div class="span4 blog-img blog-tag-data">
<div class="editor-field">
<input type="file" name="Article" id="ArticleImage"/>
</div>
</div>*#
</div>
<div class="form-actions">
<button type="submit" class="btn green" id="submitnews"><i class="icon-ok"></i>Submit</button>
#Html.ActionLink("Cancel", "ArticleList", "Admin", null, new { #class = "btn blue"})
#*<button type="button" class="btn blue" onclick="location.href='ArticleList','Admin'">Cancel</button>*#
</div>
}
Your problem is you're saving the newsArticle that's posted back directly to the DB. The posted newsArticle contains a null entry for the image, date, img name and status because those fields don't exist in your form. You really shouldn't pass domain models back to your edit for this and other security reasons. However, this is a quick fix to your issue
[HttpPost]
public ActionResult Edit(NewsArticle newsArticle)
{
try
{
if (ModelState.IsValid)
{
NewsArticle savedArticle= _newsArticle.Get(newsArticle.Id);
savedArticle.Body = newsArticle.Body
savedArticle.Title = newsArticle.Title
db.SaveChanges();
return RedirectToAction("Index");
}
}
catch (System.Data.DataException)
{
//Log th error(add a variable name after DataExpection)
ModelState.AddModelError("", "Unable to save changes. Try again, and if the problem persists see your system administrator.");
}
return View(newsArticle);
}