I have a MVC View Model in which I have nullable boolean property:
[DisplayName("Is Active")]
public bool? IsActive { get; set; }
View:
<div class="col-md-3">
<div class="row">
<label>#Html.LabelFor(model => model.IsActive)</label>
</div>
#Html.RadioButtonFor(model => model.IsActive, true, new {id = "IsIsActiveTrue" })
<label>Yes</label>
#Html.RadioButtonFor(model => model.IsActive, false, new {id = "IsIsActiveFalse" })
<label>No</label>
#Html.RadioButtonFor(model => model.IsActive, "", new {id = "IsIsActiveAll"})
<label>All</label>
</div>
By default, I would like to select All when page loads. I tried to add
#checked = "checked"
but it didn't work (any of radiobutton value is selected). Please advise.
You cannot pass NULL as the value for the radio button when using RadioButtonFor helper method. If you pass ""as the value, you cannot set that in your GET action as your variable type is bool?,not string.
If you absolutely want 3 radiobuttons with your current type, you may simply write pure HTML code to render that. As long as your radio button's name attribute value matches your view model property name, model binding will work fine when you submit the form.
#using (Html.BeginForm("Search","Customer"))
{
<label>Active</label>
<input type="radio" name="IsActive" value="true"/>
<label>In Active</label>
<input type="radio" name="IsActive" value="false"/>
<label>All</label>
<input type="radio" name="IsActive" checked="checked" />
<input type="submit"/>
}
Here we are setting the checked attribute for all in the HTML markup.
Another option is to switch your controls from 3 radio buttons to 2 checkboxes. You can mark all of them checked initially and user may select/unselect as needed. Another option is changing your type from bool? to an enum with these 3 values. With both of these approaches, with the use of CheckBoxFor or RadioButtonFor helper, you should be able to set the items which needs to be checked, in your GET action method. Use the one which is more appropriate to your code structure/style.
I did it by replacing RadiobuttonFor with RadioButton:
<div class="row">
<label>#Html.LabelFor(model => model.IsActive)</label>
</div>
<div class="row col-md-12">
#Html.RadioButton("IsActive", true, false) Yes
#Html.RadioButton("IsActive", false, false) No
#Html.RadioButton("IsActive", null, true) All
</div>
Related
I have an input field and it accepts strings inputted by the user. It looks for the string based on a radio button. Pic of Form
Basically I want that input field to turn into a date picker if the DOB or DOJ radio button is selected.
This is how my view looks like currently
<div class="row">
<div class="col-md-4">
<form asp-action="Find">
#Html.TextBoxFor(m => m.input)<br />
#Html.RadioButtonFor(m => m.radio, "ID")<aspan>ID</aspan><br />
#Html.RadioButtonFor(m => m.radio, "FirstName")<aspan>First Name</aspan><br />
#Html.RadioButtonFor(m => m.radio, "LastName")<aspan>Last Name</aspan><br />
#Html.RadioButtonFor(m => m.radio, "DOB")<aspan>DOB</aspan><br />
#Html.RadioButtonFor(m => m.radio, "DOJ")<aspan>DOJ</aspan><br />
#Html.RadioButtonFor(m => m.radio, "Phone")<aspan>Phone</aspan><br />
#Html.RadioButtonFor(m => m.radio, "Email")<aspan>Email</aspan><br />
<div class="form-group">
<input type="submit" value="Find" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
Firstly, you should not use #Html.RadioButtonFor in that way. It will generate all the inputs with the same id. That would not be nice, as per specification ID-s should be unique.
Do it like this (give a different id for each input)
#Html.RadioButtonFor(model => model.radio, "FirstName", new { id = "FirstName" })
Secondly, you need to use JavaScript for what you want to achieve.
I am going with JQuery, but you can do it without it also. Use change method so you get the selected value for the radio button each time the user changes it. Then you can use .prop() to change the input type.
$('input[name=radio]').change(function() {
if (this.value=== 'DOB' || this.value=== 'DOJ') {
$('input[name=input]').prop('type', 'date');
} else {
$('input[name=input]').prop('type', 'text');
}
});
this is a tricky one to explain, so I'll try bullet pointing.
Issue:
Dynamic rows (collection) available to user on View (add/delete)
User deletes row and saves (POST)
Collection passed back to controller with non-sequential indices
Stepping through code, everything looks fine, collection items, indices etc.
Once the page is rendered, items are not displaying correctly - They are all out by 1 and therefore duplicating the top item at the new 0 location.
What I've found:
This happens ONLY when using the HTML Helpers in Razor code.
If I use the traditional <input> elements (not ideal), it works fine.
Question:
Has anyone ever run into this issue before? Or does anyone know why this is happening, or what I'm doing wrong?
Please check out my code below and thanks for checking my question!
Controller:
[HttpGet]
public ActionResult Index()
{
List<Car> cars = new List<Car>
{
new Car { ID = 1, Make = "BMW 1", Model = "325" },
new Car { ID = 2, Make = "Land Rover 2", Model = "Range Rover" },
new Car { ID = 3, Make = "Audi 3", Model = "A3" },
new Car { ID = 4, Make = "Honda 4", Model = "Civic" }
};
CarModel model = new CarModel();
model.Cars = cars;
return View(model);
}
[HttpPost]
public ActionResult Index(CarModel model)
{
// This is for debugging purposes only
List<Car> savedCars = model.Cars;
return View(model);
}
Index.cshtml:
As you can see, I have "Make" and "Actual Make" inputs. One being a HTML Helper and the other a traditional HTML Input, respectively.
#using (Html.BeginForm())
{
<div class="col-md-4">
#for (int i = 0; i < Model.Cars.Count; i++)
{
<div id="car-row-#i" class="form-group row">
<br />
<hr />
<label class="control-label">Make (#i)</label>
#Html.TextBoxFor(m => m.Cars[i].Make, new { #id = "car-make-" + i, #class = "form-control" })
<label class="control-label">Actual Make</label>
<input class="form-control" id="car-make-#i" name="Cars[#i].Make" type="text" value="#Model.Cars[i].Make" />
<div>
<input type="hidden" name="Cars.Index" value="#i" />
</div>
<br />
<button id="delete-btn-#i" type="button" class="btn btn-sm btn-danger" onclick="DeleteCarRow(#i)">Delete Entry</button>
</div>
}
<div class="form-group">
<input type="submit" class="btn btn-sm btn-success" value="Submit" />
</div>
</div>
}
Javascript Delete Function
function DeleteCarRow(id) {
$("#car-row-" + id).remove();
}
What's happening in the UI:
Step 1 (delete row)
Step 2 (Submit form)
Step 3 (results)
The reason for this behavior is that the HtmlHelper methods use the value from ModelState (if one exists) to set the value attribute rather that the actual model value. The reason for this behavior is explained in the answer to TextBoxFor displaying initial value, not the value updated from code.
In your case, when you submit, the following values are added to ModelState
Cars[1].Make: Land Rover 2
Cars[2].Make: Audi 3
Cars[3].Make: Honda 4
Note that there is no value for Cars[0].Make because you deleted the first item in the view.
When you return the view, the collection now contains
Cars[0].Make: Land Rover 2
Cars[1].Make: Audi 3
Cars[2].Make: Honda 4
So in the first iteration of the loop, the TextBoxFor() method checks ModelState for a match, does not find one, and generates value="Land Rover 2" (i.e. the model value) and your manual input also reads the model value and sets value="Land Rover 2"
In the second iteration, the TextBoxFor() does find a match for Cars[1]Make in ModelState so it sets value="Land Rover 2" and manual inputs reads the model value and sets value="Audi 3".
I'm assuming this question is just to explain the behavior (in reality, you would save the data and then redirect to the GET method to display the new list), but you can generate the correct output when you return the view by calling ModelState.Clear() which will clear all ModelState values so that the TextBoxFor() generates the value attribute based on the model value.
Side note:You view contains a lot of bad practice, including polluting your markup with behavior (use Unobtrusive JavaScript), creating label element that do not behave as labels (clicking on them will not set focus to the associated control), unnecessary use of <br/> elements (use css to style your elements with margins etc) and unnecessary use of new { #id = "car-make-" + i }. The code in your loop can be
#for (int i = 0; i < Model.Cars.Count; i++)
{
<div class="form-group row">
<hr />
#Html.LabelFor(m => m.Cars[i].Make, "Make (#i)")
#Html.TextBoxFor(m => m.Cars[i].Make, new { #class = "form-control" })
....
<input type="hidden" name="Cars.Index" value="#i" />
<button type="button" class="btn btn-sm btn-danger delete">Delete Entry</button>
</div>
}
$('.delete').click(function() {
$(this).closest('.form-group').remove();
}
In my view I have,
#Html.CheckBoxFor(m => m.IsExist, new { #id = "IsExist" })
In my Model I have IsExist value from DB. Either true or false.
Now how can I 'Check' or 'Uncheck' the option, based on the true or false value in IsExist.
I expected, on binding by default the check box takes the value of Model. Howeverr that is not happening.
How can i achieve it?
Here how i achieved it
#Html.CheckBox("VC",(item.isVC=="Y") ? true : false)
where my item.isVC has value "Y" or "N"
Below snippet indicates an alternate way of having checkbox created and conditionally making it checked/unchecked. The following approach is also useful to get the value of checkbox by traditional approach using jquery.
#model myproject.Models.StudentModel
<div class="row">
<label class="checkbox-inline">
<input type="checkbox" name="selfStudy" checked="#Model.IsExist"><b>Self Study</b>
</label>
</div>
You can do this to check a checkbox :
if (Model.IsExist) {
#Html.CheckBoxFor(m => m.IsExist, new { #id = "IsExist", "checked" = "checked"})
}
Hope it's help
There are a few questions on SO about multiple submit buttons, such as How do you handle multiple submit buttons in ASP.NET MVC Framework? but what I am having trouble with is having multiple search buttons, each with it's own associated textbox for the value being searched for, and which searches it's own set of data. For example..
<div class="leftContentColumnRow">
#Html.TextBox("SearchString", null, new { placeholder = "Search Roles..." })
<input type="submit" value="" class="searchbtn" name="SearchRoles" />
</div>
<div class="rightContentColumnRow">
#Html.TextBox("SearchString", null, new { placeholder = "Search Permissions..." })
<input type="submit" value="" class="searchbtn" name="SearchPermissions" />
</div>
I can determine which button has been clicked, but I am struggling to get hold of the data in both textboxes.
Use a separate form for each input button pair with a different action for the form.
Like Oded said, 2 forms, each has it'w own action paramter value.
#using(Html.Beginform("SearchRole","User")
{
<div class="leftContentColumnRow">
#Html.TextBox("SearchString", null, new { placeholder = "Search Roles..." })
<input type="submit" value="" class="searchbtn" name="SearchRoles" />
</div>
}
#using(Html.Beginform("SearchPermissions","User")
{
<div class="rightContentColumnRow">
#Html.TextBox("SearchString", null, new { placeholder = "Search Permissions..." })
<input type="submit" value="" class="searchbtn" name="SearchPermissions" />
</div>
}
and the Action methods
public ActionResult SearchRole(string SearchString)
{
//get data and return something
}
public ActionResult SearchPermissions(string SearchString)
{
//get data and return something
}
I'm fairly new to ASP.NET MVC and still getting used to some of the concepts.
I understand that to pass the value of a text box in the View back to the Controller, I can use Html.BeginForm and give the text box the same name as the corresponding parameter in the Controller Action.
Here's my situation: I have 2 buttons. I want them to call the same Action in the Controller. I want them to both pass the value for the text box (i.e. the "searchText").
However, I want one of the buttons to pass "false" for the parameter isQuickJump and I want the other button to pass "true" for the parameter isQuickJump.
Here is my View:
#using (Html.BeginForm("SearchResults", "Search", FormMethod.Get)) {
<div id="logo" class="centered">
<a href="SearchResults">
<img alt="Search" src="../../Content/themes/base/images/Search.jpg" />
</a>
</div>
<div id="searchBox" class="centered">
#Html.TextBox("searchText", null, new { #class = "searchTextBox" })
</div>
<div id="buttons" class="centered">
<input type="submit" id="searchButton" value="Search" class="inputBtn" />
#Html.ActionLink("Quick Jump", "SearchResults", "Search", new { isQuickJump = true }, new { #class = "btn" })
</div>
}
Controller:
public ActionResult SearchResults(string searchText, int? page, int? size, bool? isQuickJump, GridSortOptions sort)
{
var items = GetSearchGrid(searchText, page, size, sort);
if (Request.IsAjaxRequest())
return PartialView("_SearchResultsGrid", items);
return View(items);
}
Any suggestions on how to do this?
I appreciate your help!
Just use 2 submit buttons with the same name and different value:
<div id="buttons" class="centered">
<button type="submit" name="isQuickJump" value="false">Search</button>
<button type="submit" name="isQuickJump" value="true">Quick Jump</button>
</div>
Depending on which button is clicked the corresponding value will be sent to the server for the isQuickJump parameter. And since both are submit buttons, they will also submit all other input fields data to the server (which was not the case with the anchor that you used as the second button).