How do I add a dollar symbol in front of a TextBox, which cannot be edited? I want to have the dollar symbol so people don't need to type '$' by themselves. Here is my code:
#Html.Label("lblP1", "Rate 1", htmlAttributes: new { #class = "control-label", #style = "margin-right: 30px" })
<br />
#Html.EditorFor(m => m.Pricing.Price1, null, new { htmlAttributes = new { #type = "string", #class = "form-control" } })
This is an example using bootstrap:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
#Html.EditorFor(m => m.Pricing.Price1, null, new { htmlAttributes = new { #type = "string", #class = "form-control" } })
</div>
Source: https://getbootstrap.com/docs/4.0/components/input-group/
Related
Hi I want to have add more button on my page which can replicate the existing form as many times as i want as i click add more button just like what linkedin is doing for education and experience section.
I want dynamic controls with complete styling
<div class="form-horizontal" style=" border: 1px solid #c6c7cc;
border-radius: 5px;
font: 14px/1.4 " helvetica="" neue",="" helvetica,="" arial,="" sans-serif;="" overflow:="" hidden;="" width:="" 840px;="" padding:="" 10px;="" background-color:="" white;"="">
<div class="row">
<div class="col-lg-12">
<h4 style="background-color:cornflowerblue; padding:5px;">Educational information</h4>
</div>
</div>
<div style="margin:10px;">
<div class="row">
<div class="col">
#Html.EditorFor(model => model.educations.Degree_Title, new { htmlAttributes = new { placeholder = "Enter Degree Title ", #class = "form-control" } })
#Html.ValidationMessageFor(model => model.educations.Degree_Title, "", new { #class = "text-danger" })
</div>
<div class="col">
#Html.EditorFor(model => model.educations.School, new { htmlAttributes = new { placeholder = "Enter School Name", #class = "form-control" } })
#Html.ValidationMessageFor(model => model.educations.School, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div style="margin:10px;">
<div class="row">
<div class="col">
#Html.EditorFor(model => model.educations.Field_of_study, new { htmlAttributes = new { placeholder = "Enter Field of Study", #class = "form-control" } })
#Html.ValidationMessageFor(model => model.educations.Field_of_study, "", new { #class = "text-danger" })
</div>
<div class="col">
#Html.EditorFor(model => model.educations.Description, new { htmlAttributes = new { placeholder = "Enter Course/Degree Detail", #class = "form-control" } })
#Html.ValidationMessageFor(model => model.educations.Description, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div style="margin:10px;">
<div class="row">
<div class="col">
#Html.DropDownListFor(model=>model.educations.Grade, new List<SelectListItem>
{
new SelectListItem{ Text="Select Grade", Value = "1" },
new SelectListItem{ Text="A", Value = "2" },
new SelectListItem{ Text="B", Value = "3" },
new SelectListItem{ Text="C", Value = "4" },
new SelectListItem{ Text="D", Value = "5" },
new SelectListItem{ Text="E", Value = "6" },
}, new { #class = "btn form-text" })
#Html.ValidationMessageFor(model => model.educations.Grade, "", new { #class = "text-danger" })
<div class="col-sm-4">
#Html.EditorFor(model => model.educations.Start_Year, new { htmlAttributes = new { placeholder = "Enter Start Date", #class = "form-control" } })
#Html.ValidationMessageFor(model => model.educations.Start_Year, "", new { #class = "text-danger" })
</div>
<div class="col-sm-4">
#Html.EditorFor(model => model.educations.End_Year, new { htmlAttributes = new { placeholder = "Enter End Date", #class = "form-control" } })
#Html.ValidationMessageFor(model => model.educations.End_Year, "", new { #class = "text-danger" })
</div>
<div class="col">
<label for="switch17">Active</label>
#Html.CheckBoxFor(m => m.educations.isFinalDegree, new { id = "switch17", name = "switch17", #class = "css-checkbox9 all_check" })
</div>
</div>
</div>
</div>
</div>
it should generate the above complete code as many times as i click the button
<div class="form-group">
<label>Quoted With New Combo Endorsement</label>
#Html.DropDownListFor(a => a.Quoted_With_New_Combo_Endorsement, new[]
{
new SelectListItem {Text = "Yes", Value = "Yes"},
new SelectListItem {Text = "No", Value = "No"},
}, "Select the Value", new { style = "width:250px", #class = "form-control" })
</div>
How to convert this code to the checkbox for(Yes/NO)?
Reminder: datatype can't be changed to bool
I've done this in a project and it's working fine.
<div class="form-group">
<label class="col-md-2 control-label">Scan in Colour?</label>
<div class="col-md-10">
<div class="radio-group">
#Html.RadioButtonFor(m => m.ScanInColour, "Yes",
new { #id = "ScanInColourYes", #class = "form-control" })
<span>Yes</span>
#Html.RadioButtonFor(m => m.ScanInColour, "No",
new { #id = "ScanInColourNo", #class = "form-control" })
<span>No</span>
</div>
</div>
</div>
Shouldn't it be a radio-button because it either yes or no?
Instead of the #Html.DropDownListFor use:
#Html.RadioButton("YesNo","Yes")
#Html.RadioButton("YesNo","No")
Hi I have two partial views in a single asp .net mvc page. When I submit entries using any of the partial view 2 entries got saved in database. If I disable any one partial view page works fine. Please help.
My Partial views look like this:
#using (Ajax.BeginForm("Create", "EnquiryForm", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divEnquiryFormMessage", LoadingElementId = "imgLoadingEnquiryForm" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.AntiForgeryToken()
<div id="divEnquiryFormMessage">
</div>
<div class="form-group">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control", #placeholder = "Name" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.ContactNumber, new { htmlAttributes = new { #class = "form-control", #placeholder = "Contact Number" } })
#Html.ValidationMessageFor(model => model.ContactNumber, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control", #placeholder = "Email" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.TextAreaFor(model => model.Comments, new { htmlAttributes = new { #class = "form-control", #placeholder = "Comments" } })
#Html.ValidationMessageFor(model => model.Comments, "", new { #class = "col-sm-12 text-danger" })
</div>
<button type="submit" class="submit_btn">Submit</button>
<img style="display:none;" src="~/Content/Images/LoadingImage.gif" id="imgLoadingEnquiryForm" />
}
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
Second partial view:
#using (Ajax.BeginForm("Create", "MailingList", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divMessage", LoadingElementId = "imgLoading" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.AntiForgeryToken()
<div id="divMessage">
</div>
<div class="form-group">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control", #placeholder = "First Name" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control", #placeholder = "Last Name" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control", #placeholder = "Email" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "col-sm-12 text-danger" })
</div>
<div class="form-group">
#Html.EditorFor(model => model.ZipCode, new { htmlAttributes = new { #class = "form-control", #placeholder = "Zip Code" } })
#Html.ValidationMessageFor(model => model.ZipCode, "", new { #class = "col-sm-12 text-danger" })
</div>
<button type="submit" class="submit_btn">Submit</button><img style="display:none;" src="~/Content/Images/LoadingImage.gif" id="imgLoading" />
}
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
Both partial views are hitting different controllers and method still there is weird situation. I thing multiple "submit" buttons are causing problems, but I do not know how to resolve this issue.
Other ISSUE: after saving content I want to empty input controls in my partial view but it is also not working. I have tried ModelState.Clear()
My Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public string Create(EnquiryFormViewModel vObj)
{
System.Threading.Thread.Sleep(1000);
if (ModelState.IsValid)
{
EnquiryForm mObj = new EnquiryForm();
mObj.Name = vObj.Name;
mObj.ContactNumber = vObj.ContactNumber;
mObj.Email = vObj.Email;
mObj.Comments = vObj.Comments;
mObj.IsContacted = false;
mObj.CreatedOn = DateTime.Now;
string status = enquiryFormService.insertEnquiryForm(mObj);
ModelState.Clear();
return status;
}
else
{
return "<p class=\"bg-danger\">Oops there are some errors on page.</p>";
}
}
There Should Be Only 1 Ajax-unobtrusive in your whole page otherwise your controller will hit multiple times
You can use a success method after form have been submitted like this:-
#using (Ajax.BeginForm("Create", "MailingList", new AjaxOptions { onSuccess="ResetForm",HttpMethod = "POST", UpdateTargetId = "divMessage", LoadingElementId = "imgLoading" }))
And create a Function ResetForm() inside <script> tag and Inside function write
$('#formID')[0].reset();
I am using a form like this, how can I change the textboxforinto a select, because I can't find any option to do it in the #Html
#using (Html.BeginForm("LeggTilUtdannelse", "Utdannelse", FormMethod.Post, new { #class = "form-horizontal", id = "legg-til-form" }))
{
#Html.AntiForgeryToken()
<div class="form-group">
#Html.LabelFor(m => m.Til, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Til, new { #class = "form-control", autocomplete = "off" })
</div>
</div>
}
I think you're looking for an #Html.DropDownList or #Html.DropDownListFor.
I am trying to Filter/Search kendoUI grid using my custom Dropdownlist. I have been able to get a result on singe column filtering but if i try to add new dropdownlist for filtering the Grid i can't get the required result.
my problem is with logic operator and it's different values.
is it the correct way ? or any other suggestions?
I add here the images for more description and hope you to help me please. thanks
HTML dropdowns :
<html>
<div class="form-group col-md-2" style="margin-bottom:0px;">
#Html.Label("Media", htmlAttributes: (new { #class = "col-sm-4 control-label" }))
<div class="col-sm-8" style="float:none;">
#Html.DropDownListFor(model => model.MediaTypeID, (ViewData["media"] as SelectList), "select media", new { #class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select media", style = "border-bottom:none;border-radius:0px;" })
#* #Html.ValidationMessageFor(model => model.MediaTypeID, "", new { #class = "text-danger" })*#
</div>
</div>
<div class="form-group col-md-2" style="margin-bottom:0px;">
#Html.Label("Outlet", htmlAttributes: (new { #class = "col-sm-4 control-label" }))
<div class="col-sm-8" style="float:none;">
#Html.DropDownListFor(model => model.channel, (ViewData["company"] as SelectList), "select channel", new { #class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select channel", style = "border-bottom:none;border-radius:0px;" })
#Html.ValidationMessageFor(model => model.channel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group col-md-2" style="margin-bottom:0px;">
#Html.Label("Start Date", htmlAttributes: (new { #class = "col-sm-6 control-label" }))
<div class="col-sm-6" style="float:none;">
#Html.DropDownListFor(model => model.EntryDate, (ViewData["entryDate"] as SelectList), "select date", new { #class = "form-control btnregister chosen-select", onchange = "changes_dropdown(this.id)", data_placeholder = "select date", style = "border-bottom:none;border-radius:0px;", id = "startDate" })
#Html.ValidationMessageFor(model => model.EntryDate, "", new { #class = "text-danger" })
</div>
</div>
</html>
Javascript Function and filltering:
<script type="text/javascript">
function changes_dropdown(fieldID)
{
var fieldValue = document.getElementById(fieldID).value;
$("#grid").data("kendoGrid").dataSource.filter({
logic: "and",
filters: [
{
field: fieldID,
operator: "contains",
value: fieldValue
}
]
});
}
</script>
At first you don't need to pass id of current field to changes_dropdown function. Instead you can use onchange = "changes_dropdown() and inside this function use var fieldValue = this.value
Also when you define single filter you don't need to specify logic between predicates (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-filter):
$("#grid").data("kendoGrid").dataSource.filter({
filters: [
{
field: fieldID,
operator: "contains",
value: fieldValue
}
]
});