I have a form created in MVC 5. There is a text box below:
<div class="form-group">
#Html.LabelFor(model => model.Client_PID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
</div>
</div>
I want to make this for conditionally invisible with a default value, else to be filled in by the customer.
What is the best way to accomplish this. I have been able to make the text box invisible conditionally, but then my form fails,
if (ModelState.IsValid) is not valid...how do I pass a default value into this?
You can use HiddenFor when you want it to be hidden and in other case you can generate text box, for example:
#if(ShouldBeVisible)
{
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
}
else
{
#Html.HiddenFor(model => model.Client_PID,1)
}
Now on the base of bool we are creating hidden field and setting it's default value otherwise it will generate text box and user would need to fill in value.
Hope it helps!
You can also do it with a input checkbox and a jQuery function to control this display/hide effect and its target default value.
<label for="hidden">
<input type="checkbox" id="hidden" class="display-hidden" data-target=".hidden" />
Show Client ID?
</label>
<div class="form-group hidden">
#Html.LabelFor(model => model.Client_PID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
</div>
</div>
Then the jQuery function:
$(".display-hidden").click(function() {
var target = $(this).attr("data-target");
if($(this).is(':checked'){
$(target).fadeIn(320);
} else {
$(target).fadeOut(320);
$(target).val(//your default value);
}
});
Here is how I did it...I figured it out before I looked at your awesome answers...thank you for helping!!
#if (true)
{
put in the filed
}
else
{
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { style = "display:none" } })
}
Perhaps this is not best practice?
Related
I attempt to create the dropdown list in the View. The dropdown list for "CD_STATE_CLASS" "IN_DIVIDED" is working but for "TOLL_ROAD", it can return option values in the dropdown list, but the selected value defined in the function is not presented.When I log the TOLL_ROAD in the console, i can see the value but not in the dropdown list. I have no idea where the problem is because code looks identical. And also, when i save the form, it seems like selected TOLL_ROAD value in the dropdown list is not passing to the Road object.
private void GetEditRoadSelectLists(Road road)
{
var roadLookup = objMgr.GetRoadLookupDataBAL();
ViewBag.RoadTypes = roadLookup.RoadTypeLookup;
ViewData["CD_STATE_CLASS"] = new SelectList(roadLookup.StateClassLookup, "StateClassCode", "StateClassDescription", road.CD_STATE_CLASS);
ViewData["IN_DIVIDED"] = new SelectList(roadLookup.YesNoLookup, "YesNoShort", "YesNoLong", road.IN_DIVIDED);
ViewData["TOLL_ROAD"] = new SelectList(roadLookup.TollLookup, "Id","TOLL_ROAD", road.RoadsRamps.TOLL_ROAD);
//ViewData["TOLL_ROAD"] = new SelectList(roadLookup.TollLookup, "TOLL_ROAD", "TOLL_ROAD", road.RoadsRamps.TOLL_ROAD);
System.Diagnostics.Debug.WriteLine("toll"+road.RoadsRamps.TOLL_ROAD);
System.Diagnostics.Debug.WriteLine("YES" + road.IN_DIVIDED);
}
<div class="form-group row">
#Html.LabelFor(model => model.CD_STATE_CLASS, htmlAttributes: new { #class = "control-label col-md-2 required" })
<div class="col-md-4">
#Html.DropDownList("CD_STATE_CLASS", null, "-- Please select --", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CD_STATE_CLASS, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.RoadsRamps.TOLL_ROAD, htmlAttributes: new { #class = "control-label col-md-2 required" })
<div class="col-md-4">
#Html.DropDownList("TOLL_ROAD", null, "-- Please select --", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.RoadsRamps.TOLL_ROAD, "", new { #class = "text-danger" })
</div>
</div>
I'm new to MVC asp.net jquery ajax and hoping you guys can help me give insight on my problem.
Thank you so much any answer would be helpful.
I'm just having a self exercise that i saw on some online group to help me gain more knowledge on how to implement jquery on asp.net mvc any advice would help.
Controller
public JsonResult AddJob(jobdetail job)
{
using(jQueryAjaxEntities db = new jQueryAjaxEntities())
{
db.jobdetails.Add(job);
db.SaveChanges();
return Json("Success");
}
}
Heres my AddJob view
Whenever I remove the script src it's saving normally, can anyone explain me why is it like that?
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnSave").click(function () {
var JobModel = {
TaskName: $("Task_Name").val(),
Description: $("Description").val(),
DateStarted: $("Date_Started").val(),
DateFinished: $("Date_Finished").val(),
Status: $("Status").val()
};
$.ajax({
type: "POST",
url: "/Home/AddJob",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({ job: JobModel }),
success: function (response) {
window.location.href = "/Home/Index"
}
});
});
});
</script>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.JobID)
<div class="form-group">
#Html.LabelFor(model => model.Task_Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Task_Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Task_Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Date_Started, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Date_Started, new { htmlAttributes = new { #class = "form-control", #type = "date" } })
#Html.ValidationMessageFor(model => model.Date_Started, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Date_Finished, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Date_Finished, new { htmlAttributes = new { #class = "form-control", #type = "date" } })
#Html.ValidationMessageFor(model => model.Date_Finished, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Status, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Status, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Status, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group" id="DivSave">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Submit" id="btnSave" class="btn btn-default" />
</div>
</div>
</div>
}
You are probably hitting your AddJob Action twice. First, the btnSave button is clicked, and by the jquery event, you post your data with ajax. Then, your form submits the data to your AddJob Action as well. And a duplicate record is inserted.
You posting your form twice.
1.#(Html.BeginForm()) Post call as button type is submit.
which is working fine and inserting proper data.
2.jQuery AJAX Post Call.
Missing # for getting values of fields.
So, It inserting Null data.
Code:
TaskName: $("Task_Name").val()
It should be:
TaskName: $("#Task_Name").val()
If you made this changes then it will insert data twice.
So, You need to post form once only.
This can be done:
Change Button type sumit to button. This will avoid post call of form begin.
Remove Jquery post code.
I will suggestions Remove AJAX call code post your form using form post only.
I'm learning to use razor to create web applications.
I want to modify the following code
<div class="form-group">
#Html.LabelFor(model => model.foo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.foo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.foo, "", new { #class = "text-danger" })
</div>
</div>
so, instead of just displaying an error, also performs an action if the value is valid, I'm also using the following range validator
[Range(5000000, 50000000)]
I want to be able to change the following model's text, if the range validator succeds.
#Html.EditorFor(model => model.foofoo, new { htmlAttributes = new { disabled = "disabled", #class = "form-control" } })
I try to add label in the right side as well of the text box to include the unit of the value.I would like to have like this
and This code gives like this.
this is my code
<div class="form-group ">
#Html.LabelFor(model => model.files, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-8">
#{ Html.EnableClientValidation(false); }
#Html.EditorFor(model => model.files, new { htmlAttributes = new { #class = "form-control " } })<span>GB</span>
#{ Html.EnableClientValidation(true); }
#Html.ValidationMessageFor(model => model.files, "", new { #class = "text-danger" })
</div>
</div>
Thanks.
The class = "col-md-8" contains position:relative.
Since this line has class="form control " and your GB doesn't have a class. It goes to its natural position. Adding a class should tell it where to go.
#Html.EditorFor(model => model.files, new { htmlAttributes = new { #class = "form-control col-md-11" } })<span class="col-md-1">GB</span>
I have this input on my View :
<div class="form-group">
#Html.LabelFor(model => model.Detail, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Detail)
#Html.ValidationMessageFor(model => model.Detail)
</div>
</div>
I want to increase the text box width. I have changed col-md-x value but nothing changed. How can I change the textbox width for this part of code? Thanks.
You can apply the various col- classes as needed rather than creating a custom class. Using these will ensure the site remains responsive - see http://getbootstrap.com/css/#forms-control-sizes
You can specify the class by adding
new { #class = "col-md-3"}
which results in
<div class="form-group">
#Html.LabelFor(model => model.Detail, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Detail, new { #class = "col-md-3"})
#Html.ValidationMessageFor(model => model.Detail)
</div>
</div>
col-md-x is the space allocated to the container of your textbox. You can't increase the textbox's size by increasing the class col-md-x, but only the container's size.
If you are using ASP.NET MVC 5.1, you can use :
#Html.EditorFor(model => model.Detail, new { htmlAttributes = new { #class = "largeTextBox" } })
And in your .css
.largeTextBox {
50px;
}
If you are using an older version of ASP.NET MVC, you should use #Html.TextBoxFor instead of #Html.EditorFor. This supports HTML attributes.
#Html.EditorFor(model => model.Detail, new { #class = "largeTextBox" }, })
More information, see the What's New section
You could use a textbox and use the style attribute along with the new keyword as the example shows below
#Html.TextBoxFor(model => model.Detail, new { style = "width:600px" })
It can also be used for LabelFor
#Html.LabelFor(model => model.Detail, "Detail", new { #class = "control-label col-md-4", style = "width:160px" })
You can pass an object of HtmlAttributes with the TextBox using new Keyword as
#Html.EditorFor(model => model.Detail, new { #class = "widthNew" });
and Now your css as
.widthNew{
100px;
}