I have a few radio buttons
<p>#Html.RadioButton("selected", "img")img
#Html.RadioButton("selected", "input")input
#Html.RadioButton("selected", "script")script
#Html.RadioButton("selected", "link")link
#Html.RadioButton("selected", "form")form</p>
and I want to use twitter bootstrap's btn-group, buttons-radio as a style as a replacement for these radio buttons, the code i attempted to add was
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" name="selected" value="a">a</button>
<button type="button" class="btn" name="selected" value="img">img</button>
<button type="button" class="btn" name="selected" value="input">input</button>
<button type="button" class="btn" name="selected" value="script">script</button>
<button type="button" class="btn" name="selected" value="link">link</button>
<button type="button" class="btn" name="selected" value="form">form</button>
</div>
in my controller i'm using the I'm using the FormCollection as a way of getting the value from the checked radiobutton, but i would like to use the bootstrap css instead of having the plain #Html.radiobutton.
string selectedTechnology = form["selected"];
List.UrlType = selectedTechnology;
I have a feeling that this is not the correct way to do it, since the helper probably works with the formcollection and it has no idea what the bootstrap css buttons are but if there is a way to implement it, that'd be great.
UPDATE:
So... here is the solution I was looking for
radio buttons using bootstrap css
<div id="radios" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" name="option-a" value="a">a</button>
<button type="button" class="btn" name="option-img" value="img">img</button>
<button type="button" class="btn" name="option-script" value="script">script</button>
<button type="button" class="btn" name="option-link" value="link">link</button>
<button type="button" class="btn" name="option-form" value="form">form</button>
<input type="hidden" name="option" value="0" />
</div>
i created a jscript click function
<script type="text/jscript">
$("body").find("#radios").children().each(function () {
$(this).bind('click', function () {
$("input[name=option]").val(this.value);
});
});
</script>
inside my controller I used the FormCollection to add the selected button to my model
string selectedTechnology = form["option"];
whiteList.UrlType = selectedTechnology;
hopefully this helps.
I haven't actually used the twitter bootstrap (only read up on it), and .NET isn't my strong point, but:
1) You need to use input with type="radio" to make a radio button, not the button tag.
2) The twitter bootstrap provides the .radio and .inline classes to be applied to the parent of the input element, like a label:
<label class="radio">
<input type="radio" name="selected" value="..." />
Text to come after the radio button
</label>
3) #Html.RadioButton takes a third argument, an object, for specifying attributes:
#Html.RadioButton("selected", "form", new { class = "class" });
Hope that helps.
So... here is the solution I was looking for
radio buttons using bootstrap css
<div id="radios" class="btn-group view-opt-btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" name="option-a" value="a">a</button>
<button type="button" class="btn" name="option-img" value="img">img</button>
<button type="button" class="btn" name="option-script" value="script">script</button>
<button type="button" class="btn" name="option-link" value="link">link</button>
<button type="button" class="btn" name="option-form" value="form">form</button>
<input type="hidden" name="option" value="0" />
</div>
i created a jscript click function
<script type="text/jscript">
$("body").find("#radios").children().each(function () {
$(this).bind('click', function () {
$("input[name=option]").val(this.value);
});
});
</script>
inside my controller I used the FormCollection to add the selected button to my model
string selectedTechnology = form["option"];
whiteList.UrlType = selectedTechnology;
hopefully this helps.
Related
I have a page that has the following code:
<div class="form-control">
<input type="submit" value="Save" class="btn btn-primary"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
and below the form:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" >Save changes</button>
</div>
</div>
</div>
</div>
the input type submit " <input type="submit" value="Save" class="btn btn-primary"/> " works, however when I click on the modal button, and the modal opens, the button inside "Save Changes" does not work.
I have also changed the button inside the modal to the same code as the Save button, but it also doesn't work. it doesn't call the OnPost button.
I have also tried adding a handler " asp-page-handler="Save" " and renaming the OnPostAsync to OnPostSaveAsync but does not work.
The inspect does not execute anything on the browser also.
I'm using razor pages asp net6 and the modal code comes from the bootstrap5 docs.
Your <div class="modal"> is likely located as a direct child of <body> instead of being inside its <form>...
... but <button type="submit"> won't work unless the <button> itself is a descendant of the <form> element that should be submitted.
Fortunately, if the <button> is not a descendant of a <form>, then you can manually bind it using the <button form=""> attribute, which contains the id="" of the <form> you want to submit.
Note that the form="" attribute can also be used with all HTML form controls: on all <input> elements, <textarea>, and <select> - which allows you to work-around the fact we can't nest <form> elements.
I am using the tag helper normaly like this:
<a asp-action="ActionName" asp-route-id="#item.id" class="btn btn-sm btn-info mt-2">Edit</a>
or <button asp-action="ActionName" asp-route-id="#item.id class="btn btn-sm btn-info mt-2""></button>
However, when I try to use the tag helper with a composite primary key I am unable to get the link right.
asp-route-id="#item.ID1, #item.ID2" = ActionName/Id1,Id2
asp-route-id="#item.ID1?ID2=#item.ID2" = ActionName/Id1%3FID2%3DId2?
How can I use the asp-route-id and have it putput /Id1?ID2=Id2 or /Id1?{SpecifiedName}=Id2?
I found a workarout for anchor using Html.ActionLink, but not for button
This is a working demo.
<form method="post">
<label>Username:</label>
<input type="text" name="username" class="form-control" />
<label>Password:</label>
<input type="password" name="password" class="form-control" />
<button asp-action="Index" asp-route-id="1" asp-route-id2="2" class=" btn btn-info ">Edit</button>
</form>
View:
After submit the button, the generate url:
https://localhost:5001/Home/Index/1?id2=2
The request payload:
Controller action:
I have 1 form and 2 buttons, one within a form, one out side of a form on a page:
<form method="post">
<button asp-page-handler="AddRecord" id="addRecordBtn" class="btn btn-sm
btn-secondary" type="submit">Add Record</button>
</form>
<button asp-page-handler="EmailData" id="emailData" class="btn btn-sm btn-secondary data-btn">Email Data</button>
I've also created some custom validation. When I click the EmailData button, the custom validation fires and returns null as there's no form data. Both are POST.
How do I prevent this from happening? I can't seem to find an up to date answer for .NET Core.
Thanks
Add onsubmit:
<form method="post" onsubmit="return false">
<button asp-page-handler="AddRecord" id="addRecordBtn" class="btn btn-sm
btn-secondary" type="submit">Add Record</button>
</form>
return false will prevent form action
I have this HTML code and I want to click the button:
<div class="col-md-3 col-sm-5">
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#SignInModal" style="width:100%">
Sign in
</button>
</div>
this is what I tried:
driver.FindElement(By.ClassName("btn-success")).Click();
To invoke click() on the button with text as Sign in you can use either of the following solutions:
CssSelector:
driver.FindElement(By.CssSelector("button.btn.btn-success.btn-lg[data-toggle='modal'][data-target$='SignInModal']")).Click();
XPath:
driver.FindElement(By.XPath("//button[#class='btn btn-success btn-lg'][normalize-space()='Sign in']")).Click();
i have a page with multiple forms like this: (all of them have different names
<form method="post" name="form1">
<input type="text>
<input type="text>
<input type="text>
<input type="text>
<button type="submit" name="button1" class="btn btn-icon btn-primary glyphicons circle_ok"><i></i>Save changes</button>
</form>
This is the code i'm using to check which form is submitted:
if(IsPost && !Request["button1"].IsEmpty()) {
}
the code above only works if i submit the form through an <input type="submit" name="button">
i wanted to know if there's any way to know which form is submitted with a button type=submit (the one that's in the form i posted above)
This is because the value of the a <button> element is not posted. You could add a hidden field to your form:
<input type="hidden" name="formname" value="myform" />
Then check for this in your code:
if(IsPost && Request["formname"] == "myform") {
}