I have a scenario where I want to change the button text depending upon the which user is logged in. Also, I get the logged user info like below
#ViewBag.CurrentGroupName
Also here is my button html
<input type="button" class="button approve" value="Accept" onclick="return SaveFiberData('Approve');" />
Now what I want is
if CurrentGroupName == FL and CurrentGroupName == FE then text should be Accept else it should be Approve.
How should I do it in MVC
You can conditionally render the value attribute value of the button
<input type="button" class="btn"
value="#((ViewBag.CurrentGroupName=="FL"||ViewBag.CurrentGroupName=="FE")?
Html.Raw("Accept"):Html.Raw("Approve"))"
onclick="return SaveFiberData('#((ViewBag.CurrentGroupName=="FL"||
ViewBag.CurrentGroupName=="FE")? Html.Raw("Accept"):Html.Raw("Approve"))');" />
While this works, I would recommend moving the if condition check to a helper method and use that. So if you ever have to add a third state to the condition, you make the change in a single place.
You can create a custom html helper and use that to render your button.
Create a view called MyHelper.cshtml inside the App_Code folder (create one in the web app root if that does not exist). Add the below helper method code to that
#helper MyButton(string item)
{
var b = "Approve";
if (item != null && (item == "FL" || item == "FE"))
{
b = "Accept";
}
<input type="button" class="btn" value="#b" onclick="return SaveFiberData('#b')" />
}
Now in your view, you can call this helper
#MyHelper.MyButton(ViewBag.CurrentGroupName)
Related
I have a node application, where on the frontend, I have multiple buttons that activate the same post route as specified by the formaction attribute below:
<button type="submit" formaction="/specifiedroute">-</button>
However, I want to be able to tell which button was clicked within the post route. Is there anyway I would be able to access the name or id attributes of the button within the post route (perhaps within the request object)? If not, would the only way to identify the buttons be to add a parameter to the formaction as below:
<button type="submit" formaction="/specifiedroute?redbutton">-</button>
Note all these buttons exist in one form (I can't change this) and I can't just use a hidden input field.
May be you should try this
<button type="submit" formaction="/specifiedroute?button=red">Red</button>
<button type="submit" formaction="/specifiedroute?button=green">Green</button>
<button type="submit" formaction="/specifiedroute?button=blue">Blue</button>
// NodeJS
Controller
app.post('/specifiedroute', (req, res) => {
let buttons = {
"red": "Red Button Clicked",
"green": "Green Button Clicked",
"blue": "Blue Button Clicked"
}
let reqButton = req.query.button;
res.send(buttons[reqButton])
})
The name and value of the submit button used to submit a form will be included in the submitted form data.
<button formaction="/specifiedroute" name="foo" value="minus">-</button>
and on the server
if (req.body.foo === 'minus')
I'm trying to make an Edit button, with an input field that appears/disappears when the button is pressed. It was working previously, however when I tried to make a Display form, it doesn't seem to recognize the "title.value" This is very strange. I'm using Boolean for an "edit" variable combined with a *ngIf to show/hide the form. If I take the *ngIf="edit" off, it works normally as a form that displays what you're written. Am I missing something?
Here's the HTML:
<input type="text" #title *ngIf="edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2>
and here's the .ts:
public edit = false;
public groupTitle = "";
getTitle(val) {
this.groupTitle = val;
}
You have a problem with implementing together the ngIf directive and a reference to your input element as #title. In that case you can use hidden instead of ngIf.
Here's your html:
<input type="text" #title [hidden]="!edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2>
There are couple more elegant ways to bind a value and render it on a page.
The first one is to get rid of the Get title button and use (input) method directly on an input element.
In that case, Html looks like:
<input type="text" #title *ngIf="edit" (input)="getTitle(title.value)"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>
The second one is to use [(ngModel]) instead of the getTitle method and bind your input value directly to the groupTitle variable.
Html will look like:
<input type="text" #title *ngIf="edit" [(ngModel)]="groupTitle"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>
Your .ts file:
edit = false;
groupTitle = "";
I have two buttons in my HTML: Save & Save and Exit. On the server I check the value of the button and act accordingly. However if the value of the button starts with a capital letter on the server it is Null. The lower case letter goes through fine.
Below is my code
//HTML:
<input type="submit" class="btn btn-primary btn-block" name="submissionbutton" value="Save" />
<input type="submit" class="btn btn-primary btn-block" name="submissionbutton" value="Save & Exit" />
//SERVER:
var button = Request.Form["submissionbutton"];
model.Save(id, db);
if (button == "Save & Exit")
{
return RedirectToAction("Index");
}
else
{
model = new EditEquipmentViewModel(id, db);
return View(model);
}
If I change the value in the input from "Save" to "save", all works fine but then it displays lower case "save" on the button itself, which is undesirable.
I don't understand how changing the value from Lower Case to Upper Case in the input type="button" nullifies it on the server.
I'll bet the issue is actually your ampersand. If that's the case, look at using encodeURIComponent();
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
"Without encodeURIComponent the ampersand could be interpretted on the
server as the start of a new field and jeopardize the integrity of the
data."
I think the above will sanitize the value you're sending and fix the problem. You could also try a button element instead of an input element. This way your value will be whatever you want versus the text displayed on the button. The other way to do it is make your own button out of a div element. I'm not sure if those suggestions will really help though, as I don't work with asp.net myself.
<button name="name" value="save" type="submit">Save</button>
<button name="name" value="saveexit" type="submit">Save & Exit</button>
I am thinking it has something to do with how Json serializes form values:
Try this link below:
JSON properties now lower case on swap from ASP .Net Core 1.0.0-rc2-final to 1.0.0
Replace this line:
jsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
With:
jsonFormatter.SerializerSettings.ContractResolver = new DefaultContractResolver();
Hi I need some help as I am new to MVC. I have a Drop Down List that is being populated with values from the config. I am going to use this drop down to pass a value when hitting submit to run a Query and bring back data into a table.
Where I need help:
If a user wants to reset the drop down back to "Choose Your Value" and clear the table of the data for in prep to run a new query, I want them to be able to click the "Clear" button and be able to do so.
I searched a lot and learned a lot about JavaScript ways of doing this, but I would like to use .NET and MVC.
Here is my Drop Down code:
#{
ViewBag.Title = "Index";
}
#Html.DropDownList("YourElementName",
(IEnumerable<SelectListItem>)ViewBag.DropdownVals, "--Choose Your Value--",
new {
//size = "5",
style = "width: 600px"
}
I have a button like this:
<input id="Button2" type="button" value="Clear" />
Can the button call some code in the controller that will clear both the list and table data?
Please explain in detail if you have time.
Any help is much appreciated.
Controller as it is right now:
public ActionResult Index()
{
//ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
string[] values = (ConfigurationManager.AppSettings["DropdownValues"]).Split(',').Select(sValue => sValue.Trim()).ToArray();
List<SelectListItem> dropDowns = new List<SelectListItem>();
for (int i = 0; i < values.Length; i++)
{
dropDowns.Add(new SelectListItem { Text = values[i], Value = values[i] });
}
ViewBag.DropdownVals = dropDowns;
return View();
}
You can simply reload the page, which will set the dropdown and the page to default.
<input id="Button2" type="button" value="Clear" onclick="window.location.reload()" />
Again, this also depends on how you are fetching the data. If it is a Get request with dropdown value in the query string, then this wouldn't work.
You'd have to do:
<input id="Button2" type="button" value="Clear" onclick="location.href='#Url.Action("Index", "ControllerName")'" />
The natural way to do something like that is using client side code, you don't need something in the server to do this.
Using server side code, is an overkill, but the simple way is to reload the same page (where the dropdownlist is set by default without a selected item).
For a simple javascript way, and not reloading the page:
<input id="Button2" type="button" value="Clear" onclick="document.getElementById('YourElementID').value=''" />
I am working on an application process using Laravel 4.2.
Users applying with my form need to be able to save their form input for later, or submit it. So right now I have two different buttons, Save and Submit.
The key difference between saving and submitting would be a status. When a user saves their application, their application status will be marked as "in progress", when they submit their application the status would be marked as "completed".
My question is:
In terms of my form HTML structure, How do I differentiate between a saved and submitted application? Just checking whether or not they have filled out all the required inputs would not be reliable, because there is the possibility that the user wanted to add more to it later.
I tried doing a form inside of a form, but quickly realized this would not work.
Does anyone have an idea as to how to accomplish this?
You can have two submit buttons inside a form with different names and values:
<button type="submit" name="action" value="save">Save</button>
<button type="submit" name="action" value="submit">Submit</button>
You can then check the value in your controller action:
public function postSubmission()
{
if (Request::get('action') == 'save')
{
// Save form for later
}
elseif (Request::get('action') == 'submit')
{
// Immediately submit form
}
}
Lets say your code is something like this (this is from Laravel5 but as far as i remember it's mostly the same).
{!! Form::open(array('route' => array('admin.editApplication'), 'method' => 'PATCH')) !!}
....
<button type="submit" name="save" value="save">Save</button>
<button type="submit" name="edit" value="edit">Edit</button>
{!! Form::close() !!}
Then in your controller you can do something like this (check if the value is set in edit (you might want to call it something else than edit and save)
public function editApplication(Request $request) {
if(isset($request->input('save')){
// Your code to save here
}else{
// Your code to edit here.
}
}